React 的组件在第一次挂在的时候首先获取父组件传递的 props, 接着获取初始的 state 值, 接着经历挂载阶段的三个生命周期函数, 也就是 ComponentWillMount,render,ComponentDidMount, 这三个函数分别代表组件将会挂载, 组件渲染, 组件挂载完毕三个阶段, 在组件挂载完成后, 组件的 props 和 state 的任意改变都会导致组建进入更新状态, 在组件更新阶段, 如果是 props 改变, 则进入 ComponentWillReceiveProps 函数, 接着进入 ComponentShouldUpdate 进行判断是否需要更新, 如果是 state 改变则直接进入 ComponentShouldUpdate 判定, 这个默认是 true, 当判定不需要更新的话, 组件继续运行, 需要更新的话则依次进入 ComponentWillMount,render,ComponentDidMount 三个函数, 当组件卸载时, 会首先进入生命周期函数 ComponentWillUnmount, 之后才进行卸载, 如图
React 的生命周期函数:
初始化阶段: getDefaultProps 获取实例的默认属性, getInitialState 获取每个实例的初始化状态, ComponentWillMount: 组件将被装载, 渲染到页面上, render: 组件在这里生成虚拟的 DOM 节点, ComponentDidMount: 组件真正被装载之后
运行中状态: componentWillReceiveProps: 组件将要接收到属性的时候调用 shouldComponentUpdate: 组件接受到新属性或者新状态的时候 (可以返回 false, 接收数据后不更新, 阻止 render 调用, 后面的函数不会被继续执行了)shouldComponentUpdate 这个方法用来判断是否需要调用 render 方法重新描绘 dom. 因为 dom 的描绘非常消耗性能, 如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法, 可以极大的提高性能. componentWillUpdate: 组件即将更新不能修改属性和状态 render: 组件重新描绘 componentDidUpdate: 组件已经更新 销毁阶段: componentWillUnmount: 组件即将销毁
来源: http://www.bubuko.com/infodetail-3012036.html