React生命周期

React生命周期

class组件的生命周期

挂载

组件实例被创建并插入DOM中时，称为挂载，此阶段主要生命周期方法调用顺序如下：

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

更新

当组件的 props 或 state 发生变化时会触发更新。更新时主要生命周期方法调用顺序如下：

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

卸载

当组件从DOM中移除时会调用如下方法

• componentWillUnmount()

错误处理

当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用：

• static getDerivedStateFromError()
• componentDidCatch()

常用生命周期方法

constructor(props)

在React组件挂载之前，会调用该构造函数。

在构造函数中super(props)应该作为第一条语句调用，否则 this.props 将在构造函数中出现未定义的情况。

构造函数一般用于：

• 给组件初始化内部的 this.state 值。
• 为事件处理函数绑定this实例。

注意：

1、在构造函数中可直接给this.state赋初始值，不要调用setState()方法。

2、在其他非构造函数中只能通过this.setState()方法给state赋值。

3、避免将props的值复制给state，如下应该避免

constructor(props) {
	super(props);
	// 避免这样做
	this.state = { color: props.color };
}

可以直接使用this.props.prop。即使将props的值赋给state，更新prop也不会影响state。

render()

render()方法是class组件唯一必须实现的方法。

该方法返回如下类型之一：

• React元素，一般通过JSX创建，可以是HTML元素或自定义组件。
• 数组或fragments。使得 render 方法可以返回多个元素。
• Portals。可以渲染子节点到不同的 DOM 子树中。
• 字符串或数值类型。它们在 DOM 中会被渲染为文本节点
• 布尔类型或 null。什么都不渲染。

注意：如果 shouldComponentUpdate() 返回 false，则不会调用 render()

componentDidMount()

该方法会在组件挂载（插入DOM树中）完成后立即调用。可以在此进行网络请求或添加订阅等。

componentDidUpdate(prevProps, prevState, snapshot)

该方法会在更新后被立即调用。首次渲染不会执行此方法。

当组件更新后，可以在此处对 DOM 进行操作。也可在此通过比较变化前后的props决定是否进行网络请求，例如：

componentDidUpdate(prevProps) {
	if(this.props.userID !== prevProps.userID) {
		this.fetchData(this.props.userID);// 进行网络请求
	}
}

注意：

1、避免在 componentDidUpdate() 中直接调用 setState() 方法，可以将其包裹在一个条件语句中（如上例）调用，可以避免导致死循环。

2、如果组件实现了 getSnapshotBeforeUpdate() 生命周期方法，则它的返回值将作为 componentDidUpdate() 的第三个参数 “snapshot” 参数传递。否则此参数将为 undefined。

3、如果 shouldComponentUpdate() 返回值为 false，则不会调用 componentDidUpdate()。

componentWillUnmount()

该方法会在组件卸载及销毁之前被调用。可在此进行清除timer、取消网络请求或取消订阅等操作。

在此方法中调用setState()将没有任何意义，因为该组件不会再更新而重新渲染。组件实例卸载后，将永远不会再挂载它。

不常用生命周期方法

shouldComponentUpdate(nextProps, nextState)

React组件默认state每次变化时都会重新渲染。当props或state发生变化时，shouldComponentUpdate()会在渲染执行之前被调用。返回值默认为 true。首次渲染或使用 forceUpdate() 时不会调用该方法。

此方法仅作为性能优化的方式而存在。应该考虑使用内置的 PureComponent组件，而不是手动编写 shouldComponentUpdate()。

static getDerivedStateFromProps(props, state)

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

getSnapshotBeforeUpdate(prevProps, prevState)

该方法在最近一次渲染输出（提交到 DOM 节点）之前调用。使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate()。

此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等。

应返回 snapshot 的值（或 null）。

static getDerivedStateFromError(error)

此生命周期会在后代组件抛出错误后被调用。 它将抛出的错误作为参数，并返回一个值以更新 state。

该方法会在渲染阶段调用，因此不允许出现副作用。如遇此类情况，请改用 componentDidCatch()。

componentDidCatch(error, info)

此生命周期在后代组件抛出错误后被调用。 它接收两个参数：

1. error —— 抛出的错误。
2. info —— 带有 componentStack key 的对象，其中包含有关组件引发错误的栈信息。

componentDidCatch() 会在“提交”阶段被调用，因此允许执行副作用。 它应该用于记录错误之类的情况。