React生命周期生命周期概览生命周期状态一个组件的生命周期可以分为三种状态：Mounting：插入到真实的DOM中Updating：正在重新渲染Unmounting：从中移除真正的DOMcomponentWillMount在渲染之前调用，在客户端和服务器上都是如此。生命周期介绍componentDidMount：第一次渲染后调用，只在客户端调用。之后组件就生成了对应的DOM结构，可以通过this.getDOMNode()访问。如果你想和其他JavaScript框架一起使用，你可以在这个方法中调用setTimeout、setInterval或者发送AJAX请求（防止异步操作阻塞UI）。componentWillReceiveProps在组件接收到新的道具（更新）时被调用。初始化渲染时不会调用此方法。shouldComponentUpdate返回一个布尔值。当组件接收到新的道具或状态时调用。在初始化期间或使用forceUpdate时不调用。当您确定不需要更新组件时可以使用。当组件接收到新的道具或状态但尚未呈现时调用componentWillUpdate。在初始化期间不会被调用。组件更新完成后立即调用componentDidUpdate。在初始化期间不会被调用。componentWillUnmount在组件从DOM中移除之前立即被调用。代码显示classContentextendsReact.Component{componentWillMount(){console.log('ComponentWILLMOUNT!')}componentDidMount(){console.log('ComponentDIDMOUNT!')}componentWillReceiveProps(newProps){console.log('组件将接收PROPS!')}shouldComponentUpdate(newProps,newState){returntrue;}componentWillUpdate(nextProps,nextState){console.log('组件将更新！');}componentDidUpdate(prevProps,prevState){console.log('ComponentDIDUPDATE!')}componentWillUnmount(){console.log('ComponentWILLUNMOUNT!')}React16.3lifecyclemount当一个组件的实例被创建并且插入到DOM中，这些方法按以下顺序调用：constructor()在挂载之前调用React组件的构造函数。当实现React.Component子类的构造函数时，super(props)应该在任何其他语句之前被调用。否则，this.props将在构造函数中未定义，这可能会导致错误。通常，在React中，构造函数仅用于两个目的：通过分配对象来初始化本地状态this.state。将事件处理程序方法绑定到实例。不应将setState()调用到constructor()。相反，如果您的组件需要使用本地状态，请直接在构造函数中指定初始状态this.state。构造函数是唯一直接分配his.state的地方。在所有其他方法中，需要使用this.setState()。staticgetDerivedStateFromProps()getDerivedStateFromProps在调用render方法之前调用，无论是在初始安装时还是在后续更新时。它应该返回一个具有更新状态的对象，或者返回null以不更新任何状态。render()render()方法是类组件中唯一必需的方法。调用时，它应该检查this.props和this.state返回以下类型之一：React元素。通常通过JSX创建。数组和片段。允许您从渲染中返回多个元素。有关详细信息，请参阅片段文档。门户网站。字符串和数字。它们在DOM中呈现为文本节点。布尔值或空值。什么都没有。render()函数应该是无状态的，这意味着它不会修改组件状态，每次调用都会返回相同的结果，并且不会直接与浏览器交互。如果您需要与浏览器交互，请执行componentDidMount()或其他生命周期方法。保持render()纯粹使组件更容易思考。如果shouldComponentUpdate()返回false，render()将不会被调用需要DOM节点的初始化应该放在这里。如果您需要从远程端点加载数据，这是实例化网络请求的好地方。此方法是设置任何订阅的好地方。如果这样做，请不要忘记在componentWillUnmount()中取消订阅。您可以在componentDidMount()中立即使用this.setState()。它会触发额外的渲染，但会在浏览器更新屏幕之前发生。这保证即使在这种情况下render()将被调用两次，用户也不会看到中间状态。请谨慎使用此模式，因为它通常会导致性能问题。在大多数情况下，您应该能够分配初始状态constructor()。但是，当您需要在渲染取决于其大小或位置的内容之前测量DOM节点时，您可能需要针对模式和工具提示等情况执行此操作。这些方法被认为是遗留的，应该在新代码中避免使用它们：UNSAFE_componentWillMount()更新props或state更改可能会导致更新。当一个组件被重新渲染时，这些方法会按以下顺序被调用：的DOM。它使组件可以在DOM发生变化之前从DOM中捕获一些信息（例如滚动位置）。此生命周期返回的任何值都将作为参数传递给componentDidUpdate()。这种用例并不常见，但它可以出现在UI中，例如需要以特殊方式处理滚动位置的聊天线程。官网的例子classScrollingListextendsReact.Component{constructor(props){super(props);this.listRef=React.createRef();}getSnapshotBeforeUpdate(prevProps,prevState){//我们要向列表中添加新项目吗？//捕获滚动位置，以便稍后调整滚动。如果(prevProps.list.length
