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

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能阻止更新。 仅作为性能优化的方式而存在。

• 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)