React面试题——React的生命周期

ゞ浴缸里的玫瑰 2022-10-27 01:35 179阅读 0赞

### react生命周期分为4个阶段： ###

挂载时（4个），更新时（5个），卸载时（1个），错误处理阶段（2个）。一共有12个钩子。

### 1.挂载时阶段（4个钩子）： ###

*  constructor()
    
    加载时调用一次，可以实现：初始化state,为事件处理函数绑定实例。

constructor(props) {
    	  super(props);
    	  // 不要在这里调用 this.setState()
    	  this.state = { counter: 0 };  //初始化state。
    	  this.handleClick = this.handleClick.bind(this); 
    	}

*  static getDerivedStateFromProps(props, state)
    
    在组件每次更新时会调用，让组件在props变化时更新state,每次接收新的props之后都会返回一个对象作为新的state，如果返回null，则不更新任何内容。
 *  render()
    
    类组件中唯一必须实现的方法，创建虚拟dom树，更新dom树都在此进行。
 *  componentDidMount()
    
    组件挂载之后调用，只调用一次。一般在这里请求数据。

### 2.更新时阶段（5个钩子）： ###

*  static getDerivedStateFromProps(props, state)
    
    在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

static getDerivedStateFromProps(nextProps, prevState) {
    	    const {type} = nextProps;
    	    // 当传入的type发生变化的时候，更新state
    	    if (type !== prevState.type) {
    	        return {
    	            type,
    	        };
    	    }
    	    // 否则，对于state不进行任何操作
    	    return null;
    	}

*  shouldComponentUpdate(nextProps, nextState)
    
    当 props 或 state 发生变化时，在渲染前调用，return true就会更新dom，return false能阻止更新。 仅作为[性能优化的方式][Link 1]而存在。
 *  render()
    
    render() 函数应该为纯函数，这意味着在不修改组件 state 的情况下，每次调用时都返回相同的结果，并且它不会直接与浏览器交互。保持 render() 为纯函数，可以使组件更容易思考。
 *  getSnapshotBeforeUpdate(prevProps, prevState)
    
    在最近一次的渲染提交到 DOM 节点之前调用，返回一个值，作为componentDidUpdate的第三个参数。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。
 *  componentDidUpdate(prevProps, prevState, snapshot)
    
    会在更新后会被立即调用，首次渲染不会执行此方法。 当组件更新后，可以在此处对 DOM 进行操作、 进行网络请求 。

### 3.卸载时阶段（1个钩子） ###

*  componentWillUnmount()
    
    在组件卸载及销毁之前直接调用， 在此方法中执行必要的清理操作，例如，清楚timer，取消网络请求等等。

### 4.错误处理阶段（2个钩子） ###

*  static getDerivedStateFromError(error)
    
    在渲染阶段调用，它将抛出的错误作为参数，并返回一个值来更新state，不允许执行副作用。
 *  componentDidCatch(error, info)
    
    在提交阶段被调用，用于记录错误，允许执行副作用。

**副作用：**（一个函数在执行过程中产生了外部可观察的变化，比如：修改全局变量，修改传参，console.log()等外部可观察它的变化。）

**注意：还有三个生命周期方法已经过时，在react17版本后会被淘汰，但现在仍然有效，分别是：UNSAFE\_componentWillMount()、UNSAFE\_componentWillReceiveProps(nextProps)、UNSAFE\_componentWillUpdate(nextProps, nextState)**

[Link 1]: https://react.docschina.org/docs/optimizing-performance.html