使用function 和 class 两种创建组件方式的对比
注意:使用class关键字创建的组件,有自己的私有数据和生命周期函数
注意:使用function创建的组件,只有props。没有私有数据和生命周期函数
1.用构造函数创建出来的组件:叫做"无状态组件" 【无状态组件今后用的不多】
2.用class关键字创建出来的组件:叫做“有状态组件”【今后用的最多】
3.什么情况下使用有状态组件,什么情况下使用无状态组件?
- 如果一个组件需要有自己的私有数据,则推荐使用:class创建的有状态组件
- 如果一个组件不需要私有的数据,则推荐使用:无状态组件
- React官方说:无状态组件,由于没有自己的state和生命周期函数,所以运行效率会比有状态组件稍微高一些。
有状态组件和无状态组件之间的本质区别就是:有无state属性、和有无生命周期函数
4 . 组件中的props 和 state/data 之间的区别- props中的数据都是外界传递过来的
- state/data中的数据,都是组件私有的。(通过Ajax获取回来的数据,一般都是私有数据)
- props中的数据都是只读的,不能重新赋值
- state/data 中的数据,都是可读可写的。
// 1. 导入包
import React from 'react'
import ReactDOM from 'react-dom'
//2. class 关键字创建组件
class Movie extends React.Component{
//构造器
constructor(){
//由于 Movie 组件,继承了 React.Component 这个父类,所以,自定义的构造器中,必须调用 super()
super()
//只有调用了 super() 以后,才能使用 this 关键字
this.state = { //这个 this.state = {} 就相当于 vue 中的 data(){ return {}}
msg:'大家好,我是class 创建的 Movie组件'
}
}
//render 函数的作用,是 渲染 当前组件对应的 虚拟DOM元素
render(){
//return null 必须有返回值,没有返回值时,返回null
//在class 关键字创建的组件中,如果想使用 外界传递过来的 props 参数, 不需要接收,直接通过 this.props.***访问即可
// 注意: 不论是 class 还是普通的 function 创建的组件,他们的 props 都是只读的。
// this.props.name = '李四'
//在 class 创建的组件中, this.state 上的数据,都是可读可写的。
this.state.msg = 'msg的值被我修改了'
return <div>
{/* 在class 组件内部,this 表示 当前组件的实例对象 */}
这是Movie组件---{this.props.name}---{this.props.age}---{this.props.gender}
<h3>{this.state.msg}</h3>
</div>
}
}
const user = {
name : 'zs',
age : 22,
gender:'男'
}
// 3. 调用 render 函数渲染
ReactDOM.render(<div>
123
{/* <Movie name={user.name} age={user.age} gender={user.gender}></Movie> */}
<Movie {...user}></Movie>
</div>, document.getElementById('app'))