前言大家都知道React是框架的重点和难点。了解react的生命周期可以让你的代码更完美，工作更高效。下面我们将一步步带你全面理解React生命周期和生命周期函数的概念。就是通过构建可重用的组件来构建用户界面，并通过状态来渲染相应的界面。每个组件都有自己的生命周期，规定了在哪个阶段需要改变组件的状态和方法，生命周期的钩子函数比较流行。也就是说，在某个时刻，函数生命周期的三个阶段会被自动调用并执行Mounting：插入真实DOM（加载阶段）Updating：被重新渲染（更新阶段）Unmounting：移出真实DOM（卸载阶段）的React生命周期分类Mountconstructor()render()componentDidMount()UpdategetDerivedStateFromProps()shouldComponentUpdate()getSnapshotBeforeUpdate()render()componentDidUpdate()UnmountcomponentWillUnmount()生命周期图生命周期执行次数通过上图，我们很容易得到以下结论Mountconstructor()只执行一次render()执行多次Mount加载过程的条件执行构造函数解释分析constructor()在加载时调用一次，可以初始化状态，接受两个参数：props和context使用实例设置初始化状态和绑定类方法render解释分析render()mount渲染组件使用example以属性和状态为输入，返回（需要渲染）元素componentDidMount()解释分析componentDidMount()组件的第一次渲染已经完成，此时Dom节点已经生成，可以调用ajax在这里请求并在分组后返回数据setState该组件将被重新渲染。使用示例发起异步请求以从API获取数据。Update更新过程getDerivedStateFromProps解释分析getDerivedStateFromProps(nextProps,prevState)根据当前props更新组件状态。每次render都会调用这个方法使用例子来触发一些回调，比如动画或者页面跳转等。,returnfalse可以阻止更新，主要针对性能优化（部分更新）实例性能优化（部分更新）getSnapshotBeforeUpdate解释分析可以在变化发生之前从DOM中捕获一些信息。这个生命周期的任何返回值都会作为参数传递给componentDidUpdate()使用例子如果你想获取聊天窗口的滚动位置，可以使用这个方法来获取信息componentDidUpdate的解释和分析就在这里进行。componentDidUpdate(prevProps,prevState)会在更新后立即调用（dom已经更新），第一次渲染不会执行该方法。可以在此处获得使用示例。componentWillUnmount解释与分析componentWillUnmount()在组件即将从界面中移除时调用。在这个函数中，可以做一些组件相关的清理工作。示例取消定时器、网络请求等使用setState()componentDidMount()使用getDerivedStateFromProps()使用shouldComponentUpdate()不要使用getSnapshotBeforeUpdate()不要使用componentDidUpdate()使用componentWillUnmount()最后不要使用如果这样如果文章对你有帮助，请为本文点个赞??????欢迎大家加入，一起学习前端，一起进步！
