React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁;
初始化:getDefaultProps()、getInitialState()、componentWillMount()、render()、componentDidMount()
更新:componentWillReceiveProps(nextProps)、shouldComponentUpdate(nextProps、nextState)、componentWillUpdate(nextProps、nextState)、render()、componentDidUpdate()
销毁:componentWillUnmount()
getDefaultProps():设置默认的 props,也可以用 defaultProps 设置组件的默认属性;
getInitialState():使用 es6 的语法的时候没有这个钩子,在 es6 的 class 语法中,对应的是 constructor ,可以在这里定义 this.state ;此时是可以访问 this.props 的;
在 constructor() 中接收一个 props 参数,props 是从父组件中传入的属性对象,如果父组件中没有传入属性而组件自身定义了默认属性,那么这个 props 指向的就是组件的默认属性;
componentWillMount():组件初始化的时候调用,以后组件更新的时候是不会调用的,整个生命周期也只是调用一次,此时可以修改 state;
这个方法在组件被挂在到 DOM 前使用,且只会调用一次。这个方法实际上在项目中很少会用到,因为可以在该方法中执行的工作都可以提前到 constructor 中;在这个方法中调用 this.setState 不会引起组件的重新渲染;
render():在这个钩子中进行虚拟 Dom 的创建,进行 diff 算法,更新 dom 树也在此时进行,在这里就不要进行 state 的更改了,否则会陷入死循环;
render 并不负责组件的实际渲染工作,它只是返回一个 ui 的描述,真正的渲染出页面 DOM 的工作是由 React 自身负责的;
componentDidMount():组件被挂载到 DOM 之后调用,只调用一次;在这个方法中调用 this.setState 会引起组件的重新渲染;
componentDidMount 是执行组件与服务器通信的最佳地方的原因由两个:
1)、在 componentDidMount 中执行与服务器通信可以保证获取到数据中,组件已经处于挂在状态,这时即使要直接操作 DOM 也是安全的,而 componentWillMount 无法保证这一点;
2)、当组件在服务器端渲染时,componentWillMount 会被调用两次,一次是在服务器端,另一次是在浏览器端,而 componentDidMount 能保证在任何情况下只会被调用一次;
当然,componentWillMount 会在组件被挂载前调用,因此从时间上,在 conponentWillMount 中执行服务器通信要早于在 componentDidMOunt 中执行,执行的越早意味着服务器数据越能更快的返回组件;但是实际上这个时间差是微乎其微的,完全可以忽略不计。
componentWillReceiveProps(nextProps):组件初始化的时候是不调用的,组件接收新的 props 的时候去调用;
shouldComponentUpdate(nextProps, nextState):此钩子可以进行性能的优化;组件接收新的 state 或者 props 时调用,可以在此时进行前后两个 props 和 state 的对比,看看是不是相同,如果是相同的,则返回 false 阻值更新;
componentWillUpDate(nextProps, nextState):组件初始化时不调用,只有在组件将要更新的时候才调用,此时可以进行 state 的修改;
componentDidUpdate():组件初始化时不调用,组件更新完成后调用,此时可以获得 Dom 节点;
在 componmentWillREceiveProps 中调用 setState,只有在组件 render 及其的方法中,this.state 指向的才是更新后的 state;在 render 之前的方法 shouldComponentUpdate、componentWillUpdate 中,this.state 依然指向的是更新前的 state。