React创建组件有两种方式
- 函数式组件
- 类组件
函数式组件已经学过，现在看下类组件怎么写。
class HelloClass extends React.Component {
// render函数的作用,渲染当前组件对应的虚拟dom元素
// 在class关键字创建的组件中，如果想用外界传过来的props参数，不需接收，直接通过this.props.xxx访问
render() {
return <div>这是class创建的组件 --{this.props.name} --{this.props.age}</div>
}
}
const user = {
name: '沙赞',
age: 14
}
ReactDOM.render(<HelloClass {...user} />, document.getElementById('app'))
函数式组件和类组件区别
- 类组件，有自己的私有数据和生命周期函数
- 函数式组件，只有props，没有自己的私有数据和生命周期函数
那么类组件有自己的私有数据怎么理解呢？我们把上面的类组件修改下:
class HelloClass extends React.Component {
// 构造器
constructor() {
// 由于继承了React.Component这个父类，所以自定义构造器中，必须调用super()
super()
// 只有调用了super()以后，才能使用this关键字
this.state = {
msg: '大家好，我是class创建的组件'
}
}
// render函数的作用,渲染当前组件对应的虚拟dom元素
// 在class关键字创建的组件中，如果想用外界传过来的props参数，不需接收，直接通过this.props.xxx访问
render() {
// 在class创建的组件中，this.state上的数据，都是可读可写的
// this.state.msg = '你好'
return <div>这是class创建的组件 --{this.props.name} --{this.props.age} --{this.state.msg}</div>
}
}
有状态组件和无状态组件
有状态组件和无状态组件之间的本质区别就是: 有无state属性和有无生命周期函数;
组件中的props和state之间的区别
- props中的数据都是外界传递过来的;
- state中的数据，都是组件私有的(通过Ajax获取回来的数据，一般都是私有数据)
- state中的数据，是可读可写的;
