React——生命周期

一、组件初始化(initialization)阶段

• super(props)，将父组件的props传给给子组件
• constructor()用来做一些组件的初始化工作，如定义this.state的初始内容
  
  

二、组件的挂载(Mounting)阶段

1. componentWillMount —— 在组件被挂载到页面之前调用，只调用一次
2. render
3. componentDidMount —— 在组件已经被挂载到页面后调用，只调用一次
   
   

三、组件的更新(update)阶段

• state更新

1. shouldComponentUpdate —— 在组件被更新之前调用
   • 需要返回一个布尔值
   • 为true，则继续往下执行更新阶段的生命周期函数
   • 为false，则不执行更新阶段的生命周期函数
2. componentWillUpdate —— 在 shouldComponentUpdate 返回 true 后执行
3. render
4. componentDidUpdate —— 组件更新完成后执行
   
   

• props更新

1. componentWillReceiveProps
   • 只在子组件中执行，顶级组件不执行
   • 子组件第一次诞生在父组件中，不会执行
   • 子组件之前已经存在于父组件中，则执行
2. shouldComponentUpdate —— 在组件被更新之前调用
   • 需要返回一个布尔值
   • 为true，则继续往下执行更新阶段的生命周期函数
   • 为false，则不执行更新阶段的生命周期函数
   • 参数一（nextProps）：改变的props
   • 参数二（nextState）：改变得state
   • 当父组件传过来的数据改变，但子组件不用改变时，可以返回false来优化性能。如父组件的input框改变，但只点击button后子组件才会改变，则判断内容是否改变，改变才返回true，否则返回false
3. componentWillUpdate —— 在 shouldComponentUpdate 返回 true 后执行
4. render
5. componentDidUpdate —— 组件更新完成后执行
   
   

四、卸载（unmounting）阶段

• componentWIllUnmount —— 在这个组件被剔除之前调用