生命周期的状态
组件的生命周期可分成三个状态：
Mounting：已插入真实 DOM
Updating：正在被重新渲
Unmounting：已移出真实 DOM
componentWillMount 在渲染前调用,在客户端也在服务端。
生命周期介绍
componentDidMount :
在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
componentWillReceiveProps
在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate
返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。
componentWillUpdate
在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate
在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount
在组件从 DOM 中移除之前立刻被调用。
代码示意
class Content extends React.Component { componentWillMount() { console.log('Component WILL MOUNT!') } componentDidMount() { console.log('Component DID MOUNT!') } componentWillReceiveProps(newProps) { console.log('Component WILL RECEIVE PROPS!') } shouldComponentUpdate(newProps, newState) { return true; } componentWillUpdate(nextProps, nextState) { console.log('Component WILL UPDATE!'); } componentDidUpdate(prevProps, prevState) { console.log('Component DID UPDATE!') } componentWillUnmount() { console.log('Component WILL UNMOUNT!') }
React16.3生命周期安装
在创建组件的实例并将其插入DOM时，将按以下顺序调用这些方法：
constructor()
React组件的构造函数在安装之前被调用。在实现React.Component子类的构造函数时，应该super(props)在任何其他语句之前调用。否则，this.props将在构造函数中未定义，这可能导致错误。
通常，在React中，构造函数仅用于两个目的：
通过分配对象来初始化本地状态this.state。
将事件处理程序方法绑定到实例。
不应该打电话setState()给constructor()。相反，如果您的组件需要使用本地状态，请直接在构造函数中指定初始状态this.state。
构造函数是his.state直接分配的唯一位置。在所有其他方法中，需要使用this.setState()。
static getDerivedStateFromProps()
getDerivedStateFromProps在调用render方法之前调用，无论是在初始安装还是后续更新。它应该返回一个更新状态的对象，或者返回null以不更新任何状态。
render()
render()方法是类组件中唯一必需的方法。
调用时，它应检查this.props并this.state返回以下类型之一：
React elements。通常通过JSX创建。
Arrays and fragments。让您从渲染中返回多个元素。有关更多详细信息，请参阅片段文档。
Portals。
字符串和数字。它们在DOM中呈现为文本节点。
布尔或null。什么都没有。
该render()函数应该无状态的，这意味着它不会修改组件状态，每次调用时都返回相同的结果，并且它不直接与浏览器交互。
如果您需要与浏览器进行交互，请执行componentDidMount()或其他生命周期方法。保持render()纯粹使组件更容易思考。
如果shouldComponentUpdate()返回false，则render()不会被调用
componentDidMount()
componentDidMount()在安装组件（插入树中）后立即调用。需要DOM节点的初始化应该放在这里。如果需要从远程端点加载数据，这是实例化网络请求的好地方。
此方法是设置任何订阅的好地方。如果您这样做，请不要忘记取消订阅componentWillUnmount()。
您可以在componentDidMount()立即使用this.setState()。它将触发额外的渲染，但它将在浏览器更新屏幕之前发生。这保证即使render()在这种情况下将被调用两次，用户也不会看到中间状态。请谨慎使用此模式，因为它通常会导致性能问题。在大多数情况下，您应该能够分配初始状态constructor()。但是，当您需要在渲染依赖于其大小或位置的东西之前测量DOM节点时，可能需要对模态和工具提示等情况进行处理。
这些方法被认为是遗留的,应该在新代码中避免它们：
UNSAFE_componentWillMount()
更新
props or state 的更改可能导致更新。重新渲染组件时，将按以下顺序调用这些方法：
static getDerivedStateFromProps()
render()
getSnapshotBeforeUpdate()
getSnapshotBeforeUpdate(prevProps, prevState)