ReactNative——生命周期

Posted 2020-08-12 嘆世殘者——華帥

1、创建阶段

getDefaultProps：处理props的默认值 在react.createClass调用

//在创建类的时候被调用　　this.props该组件的默认属性

 

 

2、实例化阶段

ReactDOM.render(<自定义组件 启动后开始实例化

getInitialState：初始化组件的state值，其返回值会赋值给组件的this.state属性；

、

componentWillMount：在render之前调用此方法，业务逻辑的处理都应该放在这里，如对state的操作等；

、

render：根据state值，渲染并返回一个虚拟DOM；

、

componentDidMount：该方法发生在render方法之后；在该方法中，ReactJS会使用render方法返回的虚拟DOM对象来创建真实的DOM结构，组件内部可以通过this.getDOMNode()来获取当前组件的节点；

 

state：组件的属性，主要是用来存储组件自身需要的数据，每次数据的更新都是通过修改state属性的值，ReactJS内部会监听state属性的变化，一旦发生变化的话，就会主动触发组件的render方法来更新虚拟DOM结构。

 

虚拟DOM：将真实的DOM结构映射成一个JSON数据结构

 

 

3、更新阶段

主要发生在用户操作之后或父组件有更新的时候，此时会根据用户的操作行为进行相应的页面结构的调整

componentWillReceiveProps：该方法发生在this.props被修改或父组件调用setProps()方法之后；调用this.setState()方法来完成对state的修改；

、

shouldComponentUpdate：用来拦截新的props或state，根据逻辑来判断是否需要更新；

、

componentWillUpdate：shouldComponentUpdate返回true的时候执行，组件将更新；

、

componentDidUpdate：组件更新完毕后在此做一些DOM操作。

 

4、销毁阶段

componentWillUnmount：销毁时被调用，通常做一些取消事件绑定、移除虚拟DOM中对应的组件数据结构、销毁一些无效的定时器等工作。