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://: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://: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>

簡而言之，包含是一個將任意使用者介面內容傳遞給元件的優秀功能。

列印頁面