react生命周期

生命周期

componentWillMount(即将移除)

componentWillMount()是唯一一个在render()之前调用的生命周期方法。因此是在服务端渲染中唯一被调用的方法。
因为componentWillMount()将被删除，所以官方推荐使用constructor()替代该方法

render()

• 在一个class 或者 function 组件中必须需要的

render() will not be invoked if shouldComponentUpdate() returns false.

constructor()

constructor(props)

react的构造器是在装载之前被调用的，当构造器实现了React.Component类，你应该在任意的生命之前调用super(props)

• Otherwise, this.props will be undefined in the constructor, which can lead to bugs.

constructor(props) {
  super(props);
  // Don't call this.setState() here!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);// 改变handleClick的this的上下文
}

---

componentDidMount()

componentDidMount()

组件安装后立即调用componentDidMount（）（插入到树中）。
当该方法被调用时候，React 已经渲染了组件并且将组件插入 DOM。因此如有有任何依赖于 DOM 的初始化，应该放在这里。

• 在componentDidMount请求异步加载的数据
  有一种错觉，在componentWillMount请求的数据在render就能拿到，但其实render在willMount之后几乎是马上就被调用，根本等不到数据回来，同样需要render一次“加载中”的空数据状态，所以在didMount去取数据几乎不会产生影响。
• 在componentDidMount中添加加事件监听
  react只能保证componentDidMount-componentWillUnmount成对出现，componentWillMount可以被打断或调用多次，因此无法保证事件监听能在unmount的时候被成功卸载，可能会引起内存泄露
• 该方法中可以使用this.setState()方法，它将触发重新渲染。

---

componentWillReceiveProps（即将移除）

componentWillReceiveProps(nextProps)

• 当组件接收到新的props，该方法会首先被调用，但是需要注意一点，即使props并没有发生改变，该方法也会被调用，所以使用该方法的时候要确保比较this.props和nextProps，避免不必要的渲染。
  componentWillReceiveProps将被移除，使用新的static getDerivedStateFromProps代替。

static getDerivedStateFromProps（新增）

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps内部不可以有副作用，因为现在是无论是state改变还是props改变，都会执行它。所以要谨慎使用。

shouldComponentUpdate

shouldComponentUpdate(nextState, nextProps)

有些时候需要避免不必要的渲染，可以使用该方法。返回false意味着 React 不执行componentWillUpdate()，render(),componentDidUpdate()。
该方法在初始化时候不执行。根据 React 文档，React 可能将shouldComponentUpdate视做提示而不是严格的根据它的返回结果决定是否执行，也就是说可能出现shouldComponentUpdate返回false，但是还是发生重新渲染。

componentWillUpdate（即将移除）

componentWillUpdate(nextProps, nextState)

该方法在被渲染前调用.shouldComponentUpdate在新的props进入组件或者state改变的时候调用。

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState)

该方法在 React 16.3 被添加并且它配合componentDidUpdate。该方法应该覆盖了旧方法shouldComponentUpdate的所有用例。
getSnapshotBeforeUpdate在元素被渲染并写入 DOM 之前调用，这样，你在 DOM 更新前捕获 DOM 信息（例如：滚动位置）。
应该返回一个snapshot值或null，无论返回什么，shouldComponentUpdate都可以接收到snapshot参数。
如果想要获得一个 list 或者一个聊天窗口中的滚动位置，可以在getSnapshotBeforeUpdate中取到这些信息。然后将滚动信息作为snapshot值返回。这允许在更新DOM后在componentDidUpdate中设置正确的滚动位置。

componentDidUpdate()

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.
当组件被更新时，将此作为在DOM上操作的机会。这也是一个进行网络请求的好地方，在生命周期中由于state的变化触发请求，在componentDidUpdate中进行。

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID); // 若props没有改变，网络请求可能就不需要了
  }
}

componentDidUpdate() will not be invoked if shouldComponentUpdate() returns false.

---

componentWillUnmount()

componentWillUnmount()

在卸载，销毁组件之前调用该方法。

static getDerivedStateFromProps(nextProps, prevState) {
    4. Updating state based on props // 根据props更新state
    7. Fetching external data when props change // 依赖props的数据请求
  }
  constructor() {
    1. Initializing state // 初始化
  }
  componentWillMount() {
    1. Initializing state // 初始化
  }
  componentDidMount() {
    2. Fetching external data // 请求数据
    3. Adding event listeners (or subscriptions) // 添加事件监听
  }
  componentWillReceiveProps() {
    4. Updating state based on props // 根据props更新state
    6. Side effects on props change
    7. Fetching external data when props change // 依赖props的数据请求
  }
  shouldComponentUpdate() {
  }
  componentWillUpdate(nextProps, nextState) {
     5. Invoking external callbacks
     8. Reading DOM properties before an update
    
  }
  render() {
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    8. Reading DOM properties before an update
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    5. Invoking external callbacks
    6. Side effects on props change
  }
  
  componentWillUnmount() {
  }