开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第27天，点击查看活动详情
组件的生命周期
在组件创建,加载到页面上运行以及组件被销毁的过程中,在组件特定时期触发的事件
组件的创建阶段
componentWillMount 组件将要被挂载,还没有开始渲染虚拟DOM
render 渲染真正的虚拟DOM
componentDidMount 组件完成挂载,组件已经显示到页面上,这个方法执行完,组件进入运行的状态
组件运行阶段
componentWillReceiveProps 组件将要接受新的属性父组件为子组件传递新的属性值
componentWillUpdate 组件将要被更新
render 根据最新的state和props重新渲染一颗内存中的虚拟dom
componentDidUpdate 页面又重新渲染 state和虚拟DOM和页面完全保持同步
组件销毁阶段
componentWillUnmount 组件将要被卸载
defaultProps
在组件创建之前,会先初始化默认的props,全局调用一次
调用constructor构造器中的this.state = {},初始化组件的状态
绑定this传参的三种方式
1.在事件中绑定this
onClick= {this.handlerMsg.bind(this, arg)}
2.在构造函数中绑定this传参
this.handlerMsg = this.handlerMsg.bind(this)
3.用箭头函数
onclcik={() => {this.handleMsg()}}
绑定文本框与state中的值
1.在vue中,默认可以通过v-model指定实现数据双向绑定
2.在react中只能把state之上的数据同步到控件上,但是不能默认实现把界面数据上的改变同步到state之上
3.绑定文本框与state中的值
value ={this.state,msg} onChange={this.handleTextChange}
//文本框内容改变时的处理函数
this.setState({
value: this.refs.txt.value
})
4.setState的问题
需要回调函数的形式获取最新的state
this.setState({}, function () {
console.log(this.state.msg);
})
React创建组件的方式
1.父组件向子组件传递数据 属性扩散 将组件封装到单独文件中
2.理解es6中class关键字的使用,基于class关键字创建组件
两者对比
1.用构造函数创建出来的组件 叫做无状态组件
2.用class关键字创建出来的组件,叫做有状态组件
本质区别就是 有无state属性
