react生命周期

1.React 通常将组件生命周期分为三个阶段：

如果我们给组件创建一个props（用于组件通信）、调用setState（更改state中的数据）、调用forceUpdate（强制更新组件）时，都会重新调用render函数

render函数重新执行之后，就会重新进行DOM树的挂载

挂载完成之后就会执行componentDidUpdate生命周期函数

当移除组件时，就会执行componentWillUnmount生命周期函数

• 装载阶段（Mount），组件第一次在DOM树中被渲染的过程；
• 更新过程（Update），组件状态发生变化，重新更新渲染的过程；
• 卸载过程（Unmount），组件从DOM树中被移除的过程；
• 

• 1、组件挂载阶段

• 挂载阶段组件被创建，然后组件实例插入到 DOM 中，完成组件的第一次渲染，该过程只会发生一次，在此阶段会依次调用以下这些方法：
• constructor
• getDerivedStateFromProps
• render
• componentDidMount
• constructor
• 组件的构造函数，第一个被执行，若没有显式定义它，会有一个默认的构造函数，但是若显式定义了构造函数，我们必须在构造函数中执行 super(props)，否则无法在构造函数中拿到this。如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数Constructor。
• constructor中通常只做两件事：
• 初始化组件的 state
• 给事件处理方法绑定 this

• constructor(props) {

    super(props);

    // 不要在构造函数中调用 setState，可以直接给 state 设置初始值  this.state = { counter: 0 }

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

• 2、组件更新阶段

• 当组件的 props 改变了，或组件内部调用了 setState/forceUpdate，会触发更新重新渲染，这个过程可能会发生多次。这个阶段会依次调用下面这些方法：
• getDerivedStateFromProps
• shouldComponentUpdate
• render
• getSnapshotBeforeUpdate
• componentDidUpdate

• 3、组件卸载阶段

• 卸载阶段只有一个生命周期函数，componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作：
• 清除 timer，取消网络请求或清除
• 取消在 componentDidMount() 中创建的订阅等；
• 这个生命周期在一个组件被卸载和销毁之前被调用，因此你不应该再这个方法中使用 setState，因为组件一旦被卸载，就不会再装载，也就不会重新渲染。

• 4、错误处理阶段

• componentDidCatch(error, info)，此生命周期在后代组件抛出错误后被调用。 它接收两个参数∶
• error：抛出的错误。
• info：带有 componentStack key 的对象，其中包含有关组件引发错误的栈信息
• React常见的生命周期如下：
• 

• React常见生命周期的过程大致如下：

• 挂载阶段，首先执行constructor构造方法，来创建组件
• 创建完成之后，就会执行render方法，该方法会返回需要渲染的内容
• 随后，React会将需要渲染的内容挂载到DOM树上
• 挂载完成之后就会执行componentDidMount生命周期函数

2.React主要生命周期总结：

getDefaultProps：这个函数会在组件创建之前被调用一次（有且仅有一次），它被用来初始化组件的 Props；

getInitialState：用于初始化组件的 state 值；

componentWillMount：在组件创建后、render 之前，会走到 componentWillMount 阶段。这个阶段我个人一直没用过、非常鸡肋。后来React 官方已经不推荐大家在 componentWillMount 里做任何事情、到现在 React16 直接废弃了这个生命周期，足见其鸡肋程度了；

render：这是所有生命周期中唯一一个你必须要实现的方法。一般来说需要返回一个 jsx 元素，这时 React 会根据 props 和 state 来把组件渲染到界面上；不过有时，你可能不想渲染任何东西，这种情况下让它返回 null 或者 false 即可；

componentDidMount：会在组件挂载后（插入 DOM 树中后）立即调用，标志着组件挂载完成。一些操作如果依赖获取到 DOM 节点信息，我们就会放在这个阶段来做。此外，这还是 React 官方推荐的发起 ajax 请求的时机。该方法和 componentWillMount 一样，有且仅有一次调用。

3、React中发起网络请求应该在哪个生命周期中进行？为什么？

• 对于异步请求，最好放在componentDidMount中去操作，对于同步的状态改变，可以放在componentWillMount中，一般用的比较少。
• 
  如果认为在componentWillMount里发起请求能提早获得结果，这种想法其实是错误的，通常componentWillMount比componentDidMount早不了多少微秒，网络上任何一点延迟，这一点差异都可忽略不计。
• react的生命周期： constructor() -> componentWillMount() -> render() -> componentDidMount()
  上面这些方法的调用是有次序的，由上而下依次调用。
• constructor被调用是在组件准备要挂载的最开始，此时组件尚未挂载到网页上。
• componentWillMount方法的调用在constructor之后，在render之前，在这方法里的代码调用setState方法不会触发重新render，所以它一般不会用来作加载数据之用。
• componentDidMount方法中的代码，是在组件已经完全挂载到网页上才会调用被执行，所以可以保证数据的加载。此外，在这方法中调用setState方法，会触发重新渲染。所以，官方设计这个方法就是用来加载外部数据用的，或处理其他的副作用代码。与组件上的数据无关的加载，也可以在constructor里做，但constructor是做组件state初绐化工作，并不是做加载数据这工作的，constructor里也不能setState，还有加载的时间太长或者出错，页面就无法加载出来。所以有副作用的代码都会集中在componentDidMount方法里。