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';
接下来，使用 setInterval 函数调用 useEffect 每秒设置日期和时间，并返回一个函数，使用 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 变量中。
创建一个返回函数，该函数通过传递 interval 引用 来调用 clearInterval api 以停止每秒执行 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
接下来，打开浏览器并在地址栏中输入 http://localhost:3000 并按回车键。
时钟将显示 5 秒，然后从 DOM 中删除。通过检查控制台日志，我们可以发现清理代码已正确执行。
React children 属性又名 Containment
React 允许将任意子用户界面内容包含在组件内。可以通过 this.props.children 访问组件的子项。在组件内添加子项称为 containment。 包含用于组件的某些部分本质上是动态的情况。
例如，富文本消息框可能直到被调用时才知道其内容。让我们创建 RichTextMessage 组件来展示本章中 React children 属性的功能。
首先，按照 创建 React 应用程序 一章中的说明，使用 Create React App 或 Rollup bundler 创建一个新的 React 应用程序 react-message-app。
接下来，在您最喜欢的编辑器中打开该应用程序。
接下来，在应用程序的根目录下创建 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
接下来，打开浏览器并在地址栏中输入 http://localhost:3000 并按 Enter。
浏览器发出包裹在 div 标签中的组件子项，如下所示 −
<div id="root">
<div>
<div>
<h1>Containment is really a cool feature.</h1>
</div>
</div>
</div>
接下来，更改 index.js 中 RichTextMessage 组件的 child 属性。
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>
简而言之，包含是将任意用户界面内容传递给组件的绝佳特性。
