理解React组件的生命周期

React提供了不少钩子函数使咱们能够在合适的时间、合适的节点更新组件的状态，这些钩子是生命周期函数，想要使用React，咱们必须掌握在钩子中能够作什么，不能够作什么。

？？首先你们想一下在哪里发送请求比较合适 componentWillMount、 componentDidMount、 componentWillReceiveProps、 componentDidUpdate?

组件3个阶段

组件的生命主要包括3个阶段： 挂载、更新、卸载，React 16开始还添加了错误处理。

挂载

组件被实例化并挂载在到dom树这一过程称为挂载

• constructor()
• componentWillMount()
• render()
• componentDidMount()

更新

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

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

当执行this.forceUpdate时，shouldComponentUpdate将不会被触发

卸载

当一个组件被移出Dom树时，组件就会被卸载

• componentWillUnmount()

Error Handling

• componentDidCatch()

constructor

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

DO

1. 设置组件的初始状态
2. bind function

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

// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this); // 上面提到的bind function

使用箭头函数声明处理函数，我的比较推荐这种方案，代码简洁干净
handleClick = () => {}

DON’T

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

下图是强行在constructor中调用this.setState所发出的警告，在constructor中调用this.setState是没有任何做用的

componentWillMount

它也只会在挂载过程当中被调用一次，它的做用和constructor没有太大差别。有不少人在componentWillMount中请求后台数据，认为这样能够更早的获得数据，componentWillMout是在render函数执行前执行的，虽然请求是在第一次render以前发送的，可是返回并不能保证在render以前完成。React中不推荐在componentWillMount中发送异步请求?。

还有一点须要了解： 在componentWillMount中执行this.setState是不会触发二次渲染的。仔细思考一下，componentWillMount好像没啥卵用了。正所谓存在即合理，在服务端渲染的场景中componentDidMount是不会被执行的，所以能够在componnetWillMount中发生AJAX请求。

DO

1. 使用this.setState更新组件状态
2. 发送AJAX请求(服务端渲染场景中)

DON’T

1. 发送AJAX请求(浏览器渲染场景中)

componentDidMount

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

DO

1. 发送AJAX请求

DON’T

1. this.setState更新状态，由于会触发二次渲染

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后该钩子函数可能会被触发屡次)?

DO

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

DON’T

1. 发生异步请求

shouldComponentUpdate

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

DO or DON’T
什么也不要作就对了?

componentWillUpdate

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

DO

1. 同步Props到组件状态

DON’T

1. 发生异步请求

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
    // ...
  }
}

DO

1. 异步请求

DON’T

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

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
  );
}

在哪请求数据

？？首先你们想一下在哪里发送请求比较合适componentWillMount、componentDidMount、componentWillReceiveProps、componentDidUpdate?

在componentDidMount和componentDidUpdate中。?

本文是阅读了Understanding React — Component life-cycle和官方文档后作的总结，也能够说是我抄来得?，欢迎你们批评指正。code
React系列课程之 入门

Understanding React — Component life-cycle
React.Component
component-lifecycle-methods

【开发环境推荐】 Cloud Studio 是基于浏览器的集成式开发环境，支持绝大部分编程语言，包括 HTML五、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，无需下载安装程序，一键切换开发环境。 Cloud Studio提供了完整的 Linux 环境，而且支持自定义域名指向，动态计算资源调整，能够完成各类应用的开发编译与部署。