修炼React - React生命周期.md

挂载阶段(Mounting)

constructor

  类组件，首先会调用constructor。

class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      count: props.value
    }
  }
}

  常用于：

• 初始化state
• 创建refs
• 方法绑定

getDerivedStateFromProps(props, state)

  在渲染之前调用的最后一个方法。可以根据初始的props设置state,但推荐在constructor中初始化state。

static getDerivedStateFromProps(props, state) {
  return { count: state.value }
}

  setState调用，并不会调用这个函数。

  无论父组件更新，还是props发生变化，这个函数都会被调用。

render

  返回组件jsx

componentDidMount

  在第一次渲染后，调用这个方法。

  常用于：

• Ajax请求
• 添加事件侦听器

更新阶段(Updating)

getDerivedStateFromProps(props, state)

  如果需要根据props变化更新状态，可以通过返回新的state对象来实现。

shouldComponentUpdate

  总是返回一个布尔值。默认情况下，返回true。

shouldComponentUpdate(nextProps, nextState) {
  return nextState.count !== nextProps.value
}

render

getSnapshotBeforeUpdate(prevProps, prevState)

  基于props的变化，通过返回新的state来实现更新。

componentDidUpdate

componentDidUpdate（prevProps，prevState，snapshot）{ 
}

卸载阶段(Unmounting)

componentWillUnmount

错误(Errors)

getDerivedStateFromError

componentDidCatch

  在子组件中发生错误时被触发。

  只适用于呈现生命周期方法中的错误。