React 是目前前端开发中非常流行的框架之一，它的生命周期函数是 React 组件中最重要的一部分。生命周期函数指的是组件在不同阶段会自动调用的函数，它们是 React 组件的核心，可以用来控制组件的行为和状态。
在本文中，我们将深入探索 React 生命周期函数的使用和注意事项，并提供有用的示例代码和指导意义，帮助读者更好地理解和应用这些函数。
React 生命周期函数概述
React 生命周期函数可以分为三个阶段：组件挂载阶段、组件更新阶段和组件卸载阶段。每个阶段都有对应的生命周期函数，可以在这些函数中执行一些特定的操作。
以下是 React 生命周期函数的列表：
constructor(props)：组件创建时调用，用于初始化组件的状态和绑定事件处理程序。getDerivedStateFromProps(nextProps, prevState)：组件创建时和更新时调用，用于根据新的属性计算新的状态。shouldComponentUpdate(nextProps, nextState)：组件更新时调用，用于控制组件是否重新渲染。render()：组件创建和更新时都会调用，用于渲染组件的 UI。getSnapshotBeforeUpdate(prevProps, prevState)：组件更新前调用，用于获取当前的 DOM 状态。componentDidMount()：组件挂载后调用，用于执行一些副作用操作，比如发送网络请求或添加事件监听器。componentDidUpdate(prevProps, prevState, snapshot)：组件更新后调用，用于执行一些副作用操作，比如更新 DOM 或发送网络请求。componentWillUnmount()：组件卸载前调用，用于清理组件的副作用操作，比如取消定时器或移除事件监听器。
组件挂载阶段
组件挂载阶段是指组件被添加到 DOM 中的过程。在这个阶段，React 会依次调用以下生命周期函数：
constructor(props)：组件创建时调用，用于初始化组件的状态和绑定事件处理程序。getDerivedStateFromProps(nextProps, prevState)：组件创建时和更新时调用，用于根据新的属性计算新的状态。render()：组件创建时和更新时都会调用，用于渲染组件的 UI。componentDidMount()：组件挂载后调用，用于执行一些副作用操作，比如发送网络请求或添加事件监听器。
其中，constructor(props) 是组件创建时调用的第一个函数，它可以用于初始化组件的状态和绑定事件处理程序。示例代码如下：
// www.javascriptcn.com code example
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState((prevState) => ({
count: prevState.count + 1
}));
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.handleClick}>Click me</button>
</div>
);
}
}在上面的代码中，我们使用 constructor(props) 函数初始化了组件的状态，并将事件处理程序绑定到了组件实例上。
接下来，getDerivedStateFromProps(nextProps, prevState) 函数会根据新的属性计算新的状态。这个函数通常用于在组件创建时初始化状态，或者在组件更新时根据新的属性更新状态。示例代码如下：
// www.javascriptcn.com code example
class MyComponent extends React.Component {
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.count !== prevState.count) {
return { count: nextProps.count };
}
return null;
}
constructor(props) {
super(props);
this.state = {
count: props.count
};
}
render() {
return <p>Count: {this.state.count}</p>;
}
}在上面的代码中，我们使用 getDerivedStateFromProps(nextProps, prevState) 函数根据新的属性计算了新的状态，并将其存储在组件的状态中。
最后，render() 函数会根据组件的状态和属性渲染组件的 UI。示例代码如下：
// www.javascriptcn.com code example
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: props.count
};
}
render() {
return <p>Count: {this.state.count}</p>;
}
}在上面的代码中，我们使用 render() 函数渲染了一个简单的计数器组件，它会根据组件的状态显示当前的计数值。
最后，componentDidMount() 函数会在组件挂载后调用，用于执行一些副作用操作，比如发送网络请求或添加事件监听器。示例代码如下：
// www.javascriptcn.com code example
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null
};
}
componentDidMount() {
fetch('/api/data')
.then(response => response.json())
.then(data => this.setState({ data }));
}
render() {
return <p>Data: {this.state.data}</p>;
}
}在上面的代码中，我们使用 componentDidMount() 函数发送了一个网络请求，并将返回的数据存储在组件的状态中。
组件更新阶段
组件更新阶段是指组件的状态或属性发生变化时的过程。在这个阶段，React 会依次调用以下生命周期函数：
getDerivedStateFromProps(nextProps, prevState)：组件创建时和更新时调用，用于根据新的属性计算新的状态。shouldComponentUpdate(nextProps, nextState)：组件更新时调用，用于控制组件是否重新渲染。render()：组件创建时和更新时都会调用，用于渲染组件的 UI。getSnapshotBeforeUpdate(prevProps, prevState)：组件更新前调用，用于获取当前的 DOM 状态。componentDidUpdate(prevProps, prevState, snapshot)：组件更新后调用，用于执行一些副作用操作，比如更新 DOM 或发送网络请求。
其中，getDerivedStateFromProps(nextProps, prevState) 函数在组件更新时根据新的属性计算新的状态。示例代码如下：
// www.javascriptcn.com code example
class MyComponent extends React.Component {
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.count !== prevState.count) {
return { count: nextProps.count };
}
return null;
}
constructor(props) {
super(props);
this.state = {
count: props.count
};
}
render() {
return <p>Count: {this.state.count}</p>;
}
}在上面的代码中，我们使用 getDerivedStateFromProps(nextProps, prevState) 函数根据新的属性计算了新的状态，并将其存储在组件的状态中。
接下来，shouldComponentUpdate(nextProps, nextState) 函数会根据新的属性和状态判断是否需要重新渲染组件。这个函数通常用于优化组件性能，避免不必要的重新渲染。示例代码如下：
// www.javascriptcn.com code example
class MyComponent extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
if (nextProps.count !== this.props.count) {
return true;
}
if (nextState.data !== this.state.data) {
return true;
}
return false;
}
render() {
return (
<div>
<p>Count: {this.props.count}</p>
<p>Data: {this.state.data}</p>
</div>
);
}
}在上面的代码中，我们使用 shouldComponentUpdate(nextProps, nextState) 函数判断了组件是否需要重新渲染，如果新的属性或状态与旧的不同，则返回 true，否则返回 false。
接下来，render() 函数会根据组件的状态和属性渲染组件的 UI。示例代码如下：
// www.javascriptcn.com code example
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: props.count
};
}
render() {
return <p>Count: {this.state.count}</p>;
}
}在上面的代码中，我们使用 render() 函数渲染了一个简单的计数器组件，它会根据组件的状态显示当前的计数值。
最后，getSnapshotBeforeUpdate(prevProps, prevState) 函数会在组件更新前调用，用于获取当前的 DOM 状态。这个函数通常用于在组件更新前备份一些重要的 DOM 状态，以便在 componentDidUpdate() 函数中使用。示例代码如下：
// www.javascriptcn.com code example
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
getSnapshotBeforeUpdate(prevProps, prevState) {
if (prevProps.visible !== this.props.visible) {
return this.myRef.current.getBoundingClientRect().height;
}
return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (snapshot !== null) {
// 备份的 DOM 高度
}
}
render() {
return (
<div ref={this.myRef}>
{this.props.visible ? <p>Hello, world!</p> : null}
</div>
);
}
}在上面的代码中，我们使用 getSnapshotBeforeUpdate(prevProps, prevState) 函数备份了一个 DOM 元素的高度，并在 componentDidUpdate() 函数中使用了这个备份值。
组件卸载阶段
组件卸载阶段是指组件从 DOM 中移除的过程。在这个阶段，React 会依次调用以下生命周期函数：
componentWillUnmount()：组件卸载前调用，用于清理组件的副作用操作，比如取消定时器或移除事件监听器。
componentWillUnmount() 函数在组件卸载前调用，用于清理组件的副作用操作，比如取消定时器或移除事件监听器。示例代码如下：
// www.javascriptcn.com code example
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.intervalId = setInterval(() => {
// ...
}, 1000);
}
componentWillUnmount() {
clearInterval(this.intervalId);
}
render() {
return <p>Hello, world!</p>;
}
}在上面的代码中，我们使用 componentWillUnmount() 函数清理了一个定时器，以避免在组件卸载后继续执行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d9157ca941bf713408ed3e