React——生命周期

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 —— 在这个组件被剔除之前调用