react组件生命周期的理解

react提供了很多的钩子函数，使我们可以在合适的节点合适的时间进行更新状态。这些钩子函数就是生命周期函数。想要了解react，就必须明白钩子函数可以做什么，不可以做什么。

组件的三个阶段

---

组件的生命周期主要包括三个阶段：分别为挂载、更新、卸载阶段

挂载

组件被实例化并且挂载到DOM树就叫做挂载。
挂载的顺序为constructor()、render()、componentDidMount()

constructor()

当组件被实例化时，构造函数就被会最先执行。需要注意的是constructor的第一行必须是super(props)语句。
我可以做：

• 设置组件的初始状态
• bind function（绑定函数的this）

简单解释下bind function,当类的方法作为事件处理函数时，有可能会丢失this指向，有两种常见的解决方案：

this.handleClick = this.handleClick.bind(this)

使用箭头函数也可以解决this指向问题
handleClick = () => {}

我不可以做：

• 向后台发送请求进而更新组件状态
• 使用this.setState初始化

componentDidMount

此函数只会被调用一次既组件挂载完成时，在render函数调用之后。组件挂载完成表示它的子组件也全部被挂载完成。父组件render ->子组件render->子子组件render… …子子组件DidMount -> 子组件DidMount -> 父组件DidMount。React就是个递归的世界。componentDidMount函数中可以发生异步请求。

我可以做：

• 发送AJAX请求

我比可以做

• this.setState更新状态，因为会触发二次渲染

更新

当组件的属性或者状态改变时会重新渲染

更新阶段所执行的顺序如下：

• componentWillReceiveProps()
• shouldComponentUpdate()
• componentWillUpdate()
• render()
• componentDidUpdate()

componentWillReceiveProps()

当父组件re-render时该钩子函数就会执行，即使所传入的属性没有改变。这个钩子最大的用途：组件的部分状态是依赖于属性时做状态同步使用，在其中使用this.setState是不会触发额外的渲染的，this.setState的状态更新和props触发的render合并一次进行。要合理使用componentWillReceiveProps需记住做好条件判断：

componentWillReceiveProps(nextProps) {
  if(nextProps.myProp !== this.props.myProps) {
    // nextProps.myProp has a different value than our current prop
  }
}

请不要尝试在componentWillReceiveProps中发送异步请求(React Fiber后该钩子函数可能会被触发多次)?

可以做的有：

• 根据Props的更新同步组件状态

不可以做的有：

• 发生异步请求

shouldComponentUpdate

shouldComponentUpdate主要是用来优化React应用性能的，水平没达到一定高度就不要去动它了。组件的状态或者属性改变时都会触发该函数，但只有在返回true时，组件才会被重新渲染。

我是一个什么都不做的小可爱！！！！

componentWillUpdate

当我们没有覆写componentShouldUpdate时，componentWillUpdate会在其之后立即执行。当shouldComponent被覆写过时，componentWillUpdate主要用来取代componentWillReceiveProps，用来同步Props至组件的部分状态。

我可以做：

• 同步Props到组件状态

我不能做：

• 发生异步请求

componentDidUpdate

它和componentDidMount的功能类似，componentDidMount发生于组件的首次render之后，而componentDidUpdate则是发生于组件状态及属性变化所导致的re-render之后。主要是用来请求后台数据。和componentWillReceiveProps类似，做相应处理时，需要做属性是否变更的判断，如下面代码所示。有趣的一点： componentWillReceiveProps接收的参数是nextProps, componentDidUpdate接收的是preProps。

componentDidUpdate(prevProps) {
  if(prevProps.myProps !== this.props.myProp) {
    // this.props.myProp has a different value
    // ...
  }
}

我可以做：

• 异步请求

我不可以做：

• this.setState更新状态，会触发二次渲染

卸载

当一个组件被移出Dom树时，组件就会被卸载。
所用的方法如下：

• componentWillUnmount()
• omponentDidCatch()

componentWillUnmount

当组件被卸载时被调用，在这里主要做一些清理操作，清理定时器、关闭socket、清除监听器等等

componentDidCatch

React的错误机制：子组件中产生的错误若并未被捕获或处理会抛给父组件，若上层也一直没有处理，错误将会被抛至最顶层导致浏览器白屏。
React16开始添加了一个新的特性错误处理。componentDidCatch十分特别，它只可以处理子组件中产生的、未处理的错误，能够捕获的错误类型有子组件render函数中产生的错误及生命周期函数中产生的非异步错误。用法：

//父组件或祖宗组件中实现
componentDidCatch(errorString, errorInfo) {
  this.setState({
    error: errorString
  });
  ErrorLoggingTool.log(errorInfo);
}
render() {
  if(this.state.error) return <ShowErrorMessage error={this.state.error} />
  return (
    // render normal component output
  );
}

你了解了这些钩子函数的用法，以及它的解释，但是在哪里请求数据呢？

我建议大家在==componentDidMount()==这里请求数据。

还想知道更多吗？那就认真追更吧