函数的方式创建组件与类的方式创建组件的异同
通过函数的方式创建组件:
// 定义显示时间的组件
function Clock(props){
// props.time必须手动转换为字符串,否则会被作为对象进行解析,会报错
return (
<div>
<div>定时刷新</div>
<div>{props.time.toLocalTimeString()}</div>
</div>
)
}
function tick(){
const element = <div><Clock time={new Date()}/></div>
ReactDOM.render(element,document.getElementById('root'));
}
setInterval(tick,1000)
说明:
- 函数名称首字母必须大写,为了区分DOM元素
- 通过函数的参数props可以传递组件的属性信息
- Props数据是只读的
- 单向数据流
缺点: 需要外部代码,比如: "setInterval(tick,1000)来驱动组件的内部属性变化
就因为这个缺点才引出了下面通过类的方式创建组件,接下来我们详细了解一下
通过类的方式创建组件:
class Clock extends React.Component {
constructor(props){
super(props)// 这一行需要显示的调用父类构造函数
// state名字是固定的
this.state = {
date: new Date(),
abc: 'nihao'
}
}
render(){
return (
<div>
<div>{this.state.abc}</div>
<div>刷新时间</div>
<div>{this.state.date.toLocalTimeString()}</div>
</div>
)
}
componentDidMount() {
this.tick()
}
// 定时更改时间
tick(){
setInterval(()=>{
// 这样的数据处理方式是不对的,因为状态数据的修改,必须通过setState方式
// this.state.date = new Date();
this.setState({
date: new Date()
})
},1000)
}
}
const element = <div><Clock/></div>
ReactDOM.render(element,document.getElementById('root'))
说明:
- 函数名称首字母必须大写,为了区分DOM元素
- 类的方式与函数方式创建组件的显著区别: 类可以包含状态state
- 组件的状态初始化state必须在构造函数constructor中进行,如果需要修改状态,必须通过setState进行
- 组件中的数据只有两种 props和state, 这两种数据都是从父组件想子组件传递,反之不可以(自上而下的单向数据流)
- Props是只读的,state既可读也可以修改