React组件生命周期
4个阶段:创建阶段、实例化阶段、更新阶段、销毁阶段
【创建阶段】
● getDefaultProps 只在组件创建时调用一次并缓存返回的对象(即在 React.createClass 之后就会调用)
【实例化阶段】
● getInitialState 初始化组件的state值。会赋值给组件的 this.state,只在组件装载之前调用一次;
● componentWillMount [渲染完成之前] 根据业务逻辑来对state进行相应的操作,只会在渲染前调用一次,render 之前调用;
● render 组装生成这个组件的 HTML 结构,这个函数是用来渲染DOM
● componentDidMount [渲染完成之后] 只在第一次渲染完成之后才会调用,只会调用一次,render 之后调用;
[到此处,项目已经正常运行了,组件通过 ReactDOM.findDOMNode(this)能获取当前组件的节点]
【更新阶段】
● componentWillReceiveProps 当组件接收到新的 props时,会触发 (nextProps): 可以拿到即将改变的状态
● shouldComponentUpdate : 在组件接收到新的props或者state时被调用。该方法用来拦截新的 props或 state,然后根据事先设定好的判断逻辑,做出最后要不要更新组件的决定;在初始化时或者使用forceUpdate时不被调用。
● componentWillUpdate():当上面的方法拦截返回 true 的时候,就可以在该方法中做一些更新之前的操作;在这个函数内你不能调用setState改变组件状态
● componentDidUpdate(): 和 componentDidMount 类似,在组件的更新已经同步到 DOM 中去后触发,在这里执行DOM操作以及发起网络请求
【销毁阶段】
● componentWillUnmount 卸载组件触发,进行取消事件绑定、移除虚拟DOM 中对应的组件数据结构、销毁一些无效的定时器等工作。