React入门（1）--React组件的生命周期及其使用场景

学习一门最需要先了解的就是它的生命周期，知道每个生命周期钩子该做什么事情，同时也能理解在不同阶段，React在内部做了什么事情。

图片来源：https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

挂载时：

首先是constructor，一个组件在更新到页面之前需要创建出来，constructor就是class组件的构造函数。

static getDerivedStateFromProps的意思就是从props中获取state。即从外部的属性去初始化内部的状态。

render是react中唯一必须定义的生命周期函数，因为我们需要通过在render中写jsx或者createElement来描述我们的界面。

componentDidMount是渲染完成后端生命周期函数，在这个生命周期里我们一般去发起ajax请求，或者处理一些副作用等。

 

当组件有个新属性传过来，或者state改变时，或调用forceUpdate()强制刷新组件时，会导致组件的更新，更新时：

shouldComponentUpdate: 判断组件是否要更新，在这里可以做一些性能上的优化，避免不需要更新的组件更新，浪费浏览器资源。当调用forceUpdate()时会导致组件跳过 shouldComponentUpdate()。

getSnapshotBeforeUpdate: 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate() 

componentDidUpdate: 更新完成后的生命周期函数。