ReactJS - 组件生命周期

上一页
下一页

在 React 中，组件的生命周期表示组件在其存在期间的不同阶段。React 提供回调函数，以便在 React 生命周期每个阶段都附加功能。在本章中，让我们学习 React 组件的生命周期（以及相关的 API）。

生命周期 API

每个 React 组件都有三个不同的阶段。

  • 挂载 − 挂载表示在给定的 DOM 节点中渲染 React 组件。

  • 更新 − 更新表示在状态更改/更新期间在给定的 DOM 节点中重新渲染 React 组件。

  • 卸载 − 卸载表示删除 React 组件。

React 提供了一系列生命周期事件（或回调 API），用于附加功能，这些功能将在组件的不同阶段执行。生命周期的可视化以及生命周期事件（API）调用的顺序如下所示。

Life Cycle

constructor() − 在 React 组件的初始构造阶段调用。用于设置组件的初始状态和属性。

render() − 在组件构造完成后调用。它在虚拟 DOM 实例中渲染组件。这在 DOM 树中指定为组件的挂载。

componentDidMount() − 在组件在 DOM 树中初始挂载后调用。这是调用 API 端点和执行网络请求的好地方。在我们的时钟组件中，可以在这里设置 setInterval 函数以每秒更新状态（当前日期和时间）。

componentDidMount() { 
   this.timeFn = setInterval( () => this.setTime(), 1000); 
}

componentDidUpdate() − 类似于 ComponentDidMount()，但在更新阶段调用。在此阶段可以执行网络请求，但仅当组件的当前属性和先前属性之间存在差异时。

API 的签名如下所示：

componentDidUpdate(prevProps, prevState, snapshot)

  • prevProps − 组件的先前属性。

  • prevState − 组件的先前状态。

  • snapshot − 当前渲染的内容。

componentWillUnmount() − 在组件从 DOM 中卸载后调用。这是清理对象的好地方。在我们的时钟示例中，我们可以在此阶段停止更新日期和时间。

componentDidMount() { 
   this.timeFn = setInterval( () => this.setTime(), 1000); 
}

shouldComponentUpdate() − 在更新阶段调用。用于指定组件是否应该更新。如果它返回 false，则更新将不会发生。

签名如下所示：

shouldComponentUpdate(nextProps, nextState)

  • nextProps − 组件即将到来的属性

  • nextState − 组件即将到来的状态

getDerivedStateFromProps − 在初始和更新阶段以及 render() 方法之前调用。它返回新的状态对象。在属性更改导致状态更改的情况下，它很少使用。它主要用于动画上下文中，其中需要组件的各种状态才能执行平滑动画。

API 的签名如下所示：

static getDerivedStateFromProps(props, state)

  • props − 组件的当前属性

  • state − 组件的当前状态

这是一个静态方法，无法访问 this 对象。

getSnapshotBeforeUpdate − 在渲染的内容提交到 DOM 树之前调用。它主要用于获取有关新内容的一些信息。此方法返回的数据将传递给 ComponentDidUpdate() 方法。例如，它用于维护新生成内容中的用户滚动位置。它返回用户滚动位置。此滚动位置由 componentDidUpdate() 用于设置实际 DOM 中输出的滚动位置。

API 的签名如下所示：

getSnapshotBeforeUpdate(prevProps, prevState)

  • prevProps − 组件的先前属性。

  • prevState − 组件的先前状态。

生命周期 API 的工作示例

让我们在我们的 react-clock-app 应用程序中使用生命周期 API。

步骤 1 − 在您喜欢的编辑器中打开 react-clock-hook-app。

打开 src/components/Clock.js 文件并开始编辑。

步骤 2 − 从构造函数中删除 setInterval() 方法。

constructor(props) { 
   super(props); 
   this.state = { 
      date: new Date() 
   } 
}

步骤 3 − 添加 componentDidMount() 方法并调用 setInterval() 以每秒更新日期和时间。此外，存储引用以稍后停止更新日期和时间。

componentDidMount() { 
   this.setTimeRef = setInterval(() => this.setTime(), 1000); 
}

添加 componentWillUnmount() 方法并调用 clearInterval() 以停止日期和时间更新调用。

componentWillUnmount() { 
   clearInterval(this.setTimeRef) 
}

现在，我们已经更新了 Clock 组件，并且组件的完整源代码如下所示：

import React from 'react';

class Clock extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         date: new Date()
      }      
   }
   componentDidMount() {
      this.setTimeRef = setInterval(() => this.setTime(), 1000); 
   }
   componentWillUnmount() {
      clearInterval(this.setTimeRef)
   }
   setTime() {
      this.setState((state, props) => {
         console.log(state.date);
         return {
            date: new Date()
         }
      })
   }
   render() {
      return (
         <div>
            <p>The current time is {this.state.date.toString()}</p>
         </div>
      );
   }
}
export default Clock;

接下来，打开 index.js 并使用 setTimeout 在 5 秒后从 DOM 中删除时钟。

import React from 'react';
import ReactDOM from 'react-dom';
import Clock from './components/Clock';

ReactDOM.render(
   <React.StrictMode>
      <Clock />
   </React.StrictMode>,
   document.getElementById('root')
);
setTimeout(() => {
   ReactDOM.render(
      <React.StrictMode>
         <div><p>Clock is removed from the DOM.</p></div>
      </React.StrictMode>,
      document.getElementById('root')
   );
}, 5000);

使用 npm 命令提供应用程序。

npm start

打开浏览器并在地址栏中输入 https://:3000 并按 Enter 键。

时钟将显示 5 秒，然后将从 DOM 中删除。通过检查控制台日志，我们可以发现清理代码已正确执行。

Interface DOM

在 Expense Manager 应用中的生命周期 API

让我们在 Expense Manager 中添加生命周期 API，并在每次调用 API 时记录它。这将深入了解组件的生命周期。

步骤 1 − 在您喜欢的编辑器中打开 expense-manager 应用程序。

接下来，使用以下方法更新 ExpenseEntryItemList 组件。

componentDidMount() {
   console.log("ExpenseEntryItemList :: Initialize :: componentDidMount :: Component mounted");
}
shouldComponentUpdate(nextProps, nextState) {
   console.log("ExpenseEntryItemList :: Update :: shouldComponentUpdate invoked :: Before update");
   return true;
}
static getDerivedStateFromProps(props, state) {
   console.log("ExpenseEntryItemList :: Initialize / Update :: getDerivedStateFromProps :: Before update");
   return null;
}
getSnapshotBeforeUpdate(prevProps, prevState) {
   console.log("ExpenseEntryItemList :: Update :: getSnapshotBeforeUpdate :: Before update");
   return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
   console.log("ExpenseEntryItemList :: Update :: componentDidUpdate :: Component updated");
}
componentWillUnmount() {
   console.log("ExpenseEntryItemList :: Remove :: componentWillUnmount :: Component unmounted");
}

步骤 2 − 使用 npm 命令提供应用程序。

npm start

打开浏览器并在地址栏中输入 https://:3000 并按 Enter 键。

接下来，检查控制台日志。它将在初始化阶段显示生命周期 API，如下所示。

ExpenseEntryItemList :: Initialize / Update :: getDerivedStateFromProps :: Before update 
ExpenseEntryItemList :: Initialize :: componentDidMount :: Component mounted

删除一个项目，然后检查控制台日志。它将在更新阶段显示生命周期 API，如下所示。

ExpenseEntryItemList :: Initialize / Update :: getDerivedStateFromProps :: Before update 
ExpenseEntryItemList.js:109 ExpenseEntryItemList :: Update :: shouldComponentUpdate invoked :: Before update 
ExpenseEntryItemList.js:121 ExpenseEntryItemList :: Update :: getSnapshotBeforeUpdate :: Before update 
ExpenseEntryItemList.js:127 ExpenseEntryItemList :: Update :: componentDidUpdate :: Component updated

最后，删除所有生命周期 API，因为它可能会影响应用程序性能。仅当情况需要时才应使用生命周期 API。

打印页面
上一页
下一页
广告

© . All rights reserved.