说说React生命周期有哪些不同的阶段？每个阶段对应的方法是？

React的生命周期方法有很多，并且在不同的React版本中可能会有一些变化。为了更好地理解React的生命周期，我将它们按照React 16版本及其之后的版本进行整理，以帮助你更好地理解。在React 16版本及其之后，React的生命周期方法可分为三个阶段：挂载阶段、更新阶段和卸载阶段。以下是React 16版本及其之后的生命周期方法列表：<h4>创建阶段：</h4> &nbsp; &nbsp;1、constructor:用来定义状态，或者是用来存放一些this的方法； &nbsp; &nbsp;2、getDerivedStateFromProps():将来会使用的，需要返回一个新的对象作为新的state或者返回null表示state状态不需要更新 &nbsp; &nbsp;3、render()：类组件必须实现的方法，用于渲染DOM结构，可以访问组件state与prop属性 &nbsp; &nbsp;4、componentDidMount():用于执行一些数据获取，事件监听等操作<h4>更新阶段：</h4> &nbsp; &nbsp;1、getDerivedStateFromProps():将来会使用的，需要返回一个新的对象作为新的state或者返回null表示state状态不需要更新 &nbsp; &nbsp;2、shouldComponentUpdate：用于告知组件本身基于当前的props和state是否需要重新渲染组件，默认情况返回true &nbsp; &nbsp;3、render：类组件必须实现的方法，用于渲染DOM结构，可以访问组件state与prop属性 &nbsp; &nbsp;4、getSnapshotBeforeUpdate：该周期函数在render后执行，执行之时DOM元素还没有被更新，目的在于获取组件更新前的一些信息，比如组件的滚动位置之类的，在组件更新后可以根据这些信息恢复一些UI视觉上的状态 &nbsp; &nbsp;5、componentDidUpdate：可以根据前后的props和state的变化做相应的操作，如获取数据，修改DOM样式等<h4>卸载阶段：</h4> &nbsp; &nbsp;componentWillUnmount:此方法用于组件卸载前，清理一些注册是监听事件，或者取消订阅的网络请求等,一旦一个组件实例被卸载，其不会被再次挂载，而只可能是被重新创建 另外，React 16.3版本后引入了以下生命周期方法：static getDerivedStateFromError：在子组件渲染过程中，如果发生错误，会调用该方法，返回一个新的状态。componentDidCatch：在子组件渲染过程中，如果发生错误，会调用该方法，用于记录错误信息或上报错误。 需要注意的是，React 17版本之后，一些生命周期方法被标记为过时，并推荐使用其他替代方法来实现相应的功能。在使用React时，可以根据具体的需求和React版本来选择合适的生命周期方法。同时，React还提供了钩子函数的方式（如useEffect钩子）来完成与生命周期相关的操作，这也是React 16.8版本及其之后的新特性。

DreamCoders / CoderGuide

Content Risk Flag

Comments (0)

DreamCoders / CoderGuide .gitee-modal { width: 500px !important; }

Content Risk Flag