ReactJS - 使用 React Hooks 的组件生命周期

React Hooks 提供了一个特殊的 Hook，useEffect()，用于在组件的生命周期中执行某些功能。useEffect() 将componentDidMount、componentDidUpdate 和componentWillUnmount 生命周期合并到单个 API 中。

useEffect() API 的签名如下：

useEffect(
   <executeFn>, 
   <values>
);

这里，

executeFn - 在发生效果时执行的函数，并带有可选的返回函数。返回函数将在需要清理时执行（类似于componentWillUnmount）。
values - 效果依赖的值数组。React Hooks 仅在值更改时执行executeFn。这将减少不必要的executeFn 调用。

让我们在我们的 react-clock-hook-app 应用程序中添加useEffect() Hooks。

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

接下来，打开 src/components/Clock.js 文件并开始编辑。

接下来，导入useEffect API。

import React, { useState, useEffect } from 'react';

接下来，使用函数调用useEffect，以使用setInterval 每秒设置日期和时间，并返回一个函数以使用clearInterval 停止更新日期和时间。

useEffect(
   () => {
      let setTime = () => {
         console.log("setTime is called");
         setCurrentDateTime(new Date());
      }
      let interval = setInterval(setTime, 1000);
      return () => {
         clearInterval(interval);
      }
   },
   []
);

这里，

创建了一个函数setTime，用于将当前时间设置为组件的状态。
调用了setInterval JavaScript API 以每秒执行setTime，并将setInterval 的引用存储在interval 变量中。
创建了一个返回函数，该函数调用clearInterval API 通过传递interval 引用来停止每秒执行setTime。

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

import React, { useState, useEffect } from 'react';

function Clock() {
   const [currentDateTime, setCurrentDateTime] = useState(new Date());
   useEffect(
      () => {
         let setTime = () => {
            console.log("setTime is called");
            setCurrentDateTime(new Date());
         }
         let interval = setInterval(setTime, 1000);
         return () => {
            clearInterval(interval);
         }
      },
      []
   );
   return (
      <div>
         <p>The current time is {currentDateTime.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://127.0.0.1:3000 并按 Enter。

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

React children 属性，也称为包含

React 允许在组件内部包含任意子用户界面内容。可以通过this.props.children 访问组件的子元素。在组件内部添加子元素称为包含。包含用于组件的某些部分本质上是动态的情况。

例如，富文本消息框在被调用之前可能不知道其内容。让我们在本节中创建一个RichTextMessage 组件来展示 React children 属性的功能。

首先，使用Create React App 或Rollup bundler 创建一个新的 React 应用程序react-message-app，方法是按照创建 React 应用程序章节中的说明进行操作。

接下来，在您喜欢的编辑器中打开应用程序。

接下来，在应用程序的根目录下创建src 文件夹。

接下来，在src 文件夹下创建components 文件夹。

接下来，在src/components 文件夹下创建一个文件RichTextMessage.js 并开始编辑。

接下来，导入React 库。

import React from 'react';

接下来，创建一个类RichTextMessage 并使用 props 调用构造函数。

class RichTextMessage extends React.Component {
   constructor(props) { 
      super(props); 
   } 
}

接下来，添加render() 方法并显示组件的用户界面及其子元素

render() { 
   return ( 
      <div>{this.props.children}</div> 
   ) 
}

这里，

props.children 返回组件的子元素。
将子元素包装在div 标签内。

最后，导出组件。

export default RichTextMessage;

下面给出了RichTextMessage 组件的完整源代码：

import React from 'react';

class RichTextMessage extends React.Component {
   constructor(props) {
      super(props);
   }
   render() {
      return (
         <div>{this.props.children}</div>
      )
   }
}
export default RichTextMessage;

接下来，在src 文件夹下创建一个文件index.js 并使用RichTextMessage 组件。

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

ReactDOM.render(
   <React.StrictMode>
      <RichTextMessage>
         <h1>Containment is really a cool feature.</h1>
      </RichTextMessage>
   </React.StrictMode>,
   document.getElementById('root')
);

最后，在根文件夹下创建一个public 文件夹，并在其中创建index.html 文件。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>React App</title>
   </head>
   <body>
      <div id="root"></div>
      <script type="text/JavaScript" src="./index.js"></script>
   </body>
</html>

接下来，使用 npm 命令启动应用程序。

npm start

接下来，打开浏览器并在地址栏中输入https://127.0.0.1:3000 并按 Enter。

浏览器发出用 div 标签包装的组件子元素，如下所示：

<div id="root">
   <div>
      <div>
         <h1>Containment is really a cool feature.</h1>
      </div>
   </div>
</div>

接下来，更改index.js 中RichTextMessage 组件的子属性。

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

ReactDOM.render(
  <React.StrictMode>
         <RichTextMessage>
            <h1>Containment is really an excellent feature.</h1>
         </RichTextMessage>
   </React.StrictMode>,
   document.getElementById('root')
);

现在，浏览器更新组件的子内容并发出如下所示：

<div id="root">
    <div>
        <div>
            <h1>Containment is really an excellent feature.</h1>
        </div>
    </div>
</div>

简而言之，包含是一个将任意用户界面内容传递给组件的优秀功能。

打印页面