b2b网站用织梦可以做吗电商运营推广是做什么的

React组件的两种创建方式

注意点 引入的组件的名首字母要大写，组件文件要先引入React
构造函数式接收属性要用形参接收，class式不需要，用this.props.xxx获取，class还有类似vue中的data的属性，this.state={}；class式必须有render ，render要有返回值，constructor中要先super()然后在进行操作格式如下

构造函数式 无状态组件(用的不多)

import React from 'react'
export default function hello (props) {return <h2>{props.name}-{props.age}</h2>
}

引入

let age = 20
let name = "hongbin"
let skill = ['Vue','React']
let hongbin = {age,name,skill
}
const myDiv = <div id="wrap"><h1>Hello React</h1><Hello {...hongbin}></Hello>
</div>
ReactDom.render(myDiv,document.getElementById("app"))

class式 有状态组件（推荐，有生命周期，私有数据）

import React from 'react'
export default class Hi extends React.Component {constructor(){super()this.state = {hi:"hi"}}render(){return <div>{this.state.hi}<br/>{this.props.skill.map(i => <h3 key={i}>{i}</h3>)}</div>}
}

引入同构造函数式

<Hi {...hongbin}></Hi>

两种组件形式各有各的优势
构造函数式因为没有生命周期和私有属性，所以速度更快，性能高，适合没有私有值的情况使用
class式组件有生命周期和私有属性，适合用于对值需要操作获取等情况
两者可以相互配合使用

webpack.config.js配置引入时省略文件后缀名和@别名

resolve:{//省去js文件中导入文件的后缀名extensions:['.js','.jsx','.json'], //表示引入的文件自动匹配后缀名从数组中的第一项开始匹配alias:{//别名'@':path.join(__dirname ,'./src')//表示@代表根目录下的src目录}}

这样引入组件时不需要像这样

import Hello from './components/hello.jsx'

可以这样代替

import Hello from './components/hello'
import Hello from '@/components/hello'

两种组件方式配合使用
比如要对一组数据进行渲染，只用class的方式可以写成

class CommentsWrap extends React.Component {constructor() {super()this.state = {lists: [{ id: 1, user: 'Peter', content: 'Hi i am Peter' },{ id: 2, user: 'David', content: 'Hi i am David' },{ id: 3, user: 'Paul', content: 'Hi i am Paul' },{ id: 4, user: 'Lisa', content: 'Hi i am Lisa' },{ id: 5, user: 'Caesar', content: 'Hi i am Caesar' },],}}render() {return (<div>{this.state.lists.map((list, index) => {return (<div key={index}><h3>评论人：{list.user}</h3><h4>评论内容：{list.content}</h4></div>)})}</div>)}
}

可以看到整体分为两个部分，一部分是需要渲染的数据，一部分是return到页面的jsx标签
可以看到return出去的jsx部分数据是来自组件的state中的值，本身不需要自己私有的值，这样我们就可以把他抽离成一个单独的组件，这样index.js文件中只需要放处理出去的组件就可以了
index.js

import CommentsWrap from '@/components/CommentWrap'ReactDom.render(<div><CommentsWrap></CommentsWrap></div>,document.getElementById('app')
)

CommentsWrap组件

import CommentList from '@/components/CommentList'
export default class CommentsWrap extends React.Component {constructor() {super()this.state = {lists: [{id: 1,user: 'Peter',content: 'Hi i am Peter',},{id: 2,user: 'David',content: 'Hi i am David',},{id: 3,user: 'Paul',content: 'Hi i am Paul',},{id: 4,user: 'Lisa',content: 'Hi i am Lisa',},{id: 5,user: 'Caesar',content: 'Hi i am Caesar',},],}}render() {return (<div>{this.state.lists.map((list, index) => {return <CommentList key={index} {...list}></CommentList>})}</div>)}
}

CommentList组件

export default function CommentList(props) {return (<div><h3> 评论人： {props.user} </h3><h4> 评论内容： {props.content} </h4></div>)
}

这样每个块单独抽出来，更易于日后代码的维护，也符合模块化开发潮流

jsx的样式
jsx的样式书写格式：

style = {{color:"deepPink"}}

样式的4次抽离
1，

  <div style = {{padding:"0.6rem" ,border:"0.0625rem dashed #00f",maxWidth:"50vw",margin:"0.625rem auto"}}><h3 style = {{color:"deepPink"}}> 评论人： {props.user} </h3><h4 style = {{color:"green"}}> 评论内容： {props.content} </h4></div>

2

let wrap = {padding:"0.6rem" ,border:"0.0625rem dashed #00f",maxWidth:"50vw",margin:"0.625rem auto"}
let user = {color:"deepPink"}
let context = {color:"green"}export default function CommentList(props) {return (<div style = {wrap}><h3 style = {user}> 评论人： {props.user} </h3><h4 style = {context}> 评论内容： {props.content} </h4></div>)
}

3

let style = {wrap : {padding:"0.6rem" ,border:"0.0625rem dashed #00f",maxWidth:"50vw",margin:"0.625rem auto"},user : {color:"deepPink"},context : {color:"green"}
}export default function CommentList(props) {return (<div style = {style.wrap}><h3 style = {style.user}> 评论人： {props.user} </h3><h4 style = {style.context}> 评论内容： {props.content} </h4></div>)
}

4

import style from '@/components/style'
export default function CommentList(props) {return (<div style = {style.wrap}><h3 style = {style.user}> 评论人： {props.user} </h3><h4 style = {style.context}> 评论内容： {props.content} </h4></div>)
}

components/style.js

export default {wrap : {padding:"0.6rem" ,border:"0.0625rem dashed #00f",maxWidth:"50vw",margin:"0.625rem auto"},user : {color:"deepPink"},context : {color:"green"}
}

最后如果本文对你有用的话欢迎你关注我的公众号，会有各种技术栈的文章