ReactJS - 元件

上一頁
下一頁

React 元件是 React 應用的構建塊。本章我們將學習如何建立一個新的 React 元件以及 React 元件的特性。

React 元件代表網頁中一小塊使用者介面。React 元件的主要工作是渲染其使用者介面，並在其內部狀態發生更改時更新它。除了渲染 UI 外，它還管理屬於其使用者介面的事件。總而言之，React 元件提供以下功能：

  • 使用者介面的初始渲染。
  • 事件的管理和處理。
  • 每當內部狀態更改時更新使用者介面。

React 元件使用三個概念來實現這些功能：

  • 屬性 - 使元件能夠接收輸入。

  • 事件 - 使元件能夠管理 DOM 事件和終端使用者互動。

  • 狀態 - 使元件保持狀態。有狀態元件會根據其狀態更新其 UI。

React 中有兩種型別的元件：

  • 函式元件

  • 類元件

函式元件

函式元件實際上定義為 JavaScript 函式。此 React 元件接受單個物件引數並返回一個 React 元素。請注意，React 中的元素不是元件，但元件由多個元素組成。以下是 React 中函式元件的語法：

function function_name(argument_name) {
   function_body;
}

類元件

類似地，類元件是由多個函式組成的基本類。React 的所有類元件都是React.Component類的子類，因此類元件必須始終擴充套件它。以下是基本語法：

class class_name extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

讓我們在接下來的章節中逐一學習所有概念。

建立 React 元件

React 庫有兩種元件型別。這些型別根據其建立方式進行分類。

  • 函式元件 - 使用純 JavaScript 函式。
  • ES6 類元件 - 使用 ES6 類。

函式元件和類元件之間的核心區別在於：

  • 函式元件本質上非常簡潔。其唯一要求是返回一個React 元素。

function Hello() { 
   return '<div>Hello</div>' 
}

可以使用 ES6 類元件完成相同的功能，只需編寫少量額外的程式碼。

class ExpenseEntryItem extends React.Component {         
   render() { 
      return ( 
         <div>Hello</div> 
      ); 
   }
}

  • 類元件開箱即用地支援狀態管理，而函式元件不支援狀態管理。但是，React 為函式元件提供了一個鉤子useState()來維護其狀態。

  • 類元件具有生命週期，並可以透過專用的回撥 api 訪問每個生命週期事件。函式元件沒有生命週期。同樣，React 為函式元件提供了一個鉤子useEffect()來訪問元件的不同階段。

建立類元件

讓我們建立一個新的 React 元件（在我們的 expense-manager 應用中），ExpenseEntryItem 來展示一個支出條目。支出條目包括名稱、金額、日期和類別。支出條目的物件表示如下：

{ 
   'name': 'Mango juice', 
   'amount': 30.00, 
   'spend_date': '2020-10-10' 
   'category': 'Food', 
}

在您喜歡的編輯器中開啟expense-manager應用程式。

接下來，在src/components資料夾下建立一個檔案ExpenseEntryItem.css來為我們的元件設定樣式。

接下來，透過擴充套件React.Component，在src/components資料夾下建立一個檔案ExpenseEntryItem.js。

import React from 'react'; 
import './ExpenseEntryItem.css'; 
class ExpenseEntryItem extends React.Component { 
}

接下來，在ExpenseEntryItem類中建立一個方法render。

class ExpenseEntryItem extends React.Component { 
   render() { 
   } 
}

接下來，使用 JSX 建立使用者介面並從render方法返回它。

class ExpenseEntryItem extends React.Component {
   render() {
      return (
         <div>
            <div><b>Item:</b> <em>Mango Juice</em></div>
            <div><b>Amount:</b> <em>30.00</em></div>
            <div><b>Spend Date:</b> <em>2020-10-10</em></div>
            <div><b>Category:</b> <em>Food</em></div>
         </div>
      );
   }
}

接下來，將元件指定為預設匯出類。

import React from 'react';
import './ExpenseEntryItem.css';

class ExpenseEntryItem extends React.Component {
   render() {
      return (
         <div>
            <div><b>Item:</b> <em>Mango Juice</em></div>
            <div><b>Amount:</b> <em>30.00</em></div>
            <div><b>Spend Date:</b> <em>2020-10-10</em></div>
            <div><b>Category:</b> <em>Food</em></div>
         </div>
      );
   }
}
export default ExpenseEntryItem;

現在，我們成功建立了我們的第一個 React 元件。讓我們在index.js中使用我們新建立的元件。

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

ReactDOM.render(
   <React.StrictMode>
      <ExpenseEntryItem />
   </React.StrictMode>,
   document.getElementById('root')
);

示例

可以使用 CDN 在網頁中完成相同的功能，如下所示：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <title>React application :: ExpenseEntryItem component</title>
   </head>
   <body>
      <div id="react-app"></div>
       
      <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel">
         class ExpenseEntryItem extends React.Component {
            render() {
               return (
                  <div>
                     <div><b>Item:</b> <em>Mango Juice</em></div>
                     <div><b>Amount:</b> <em>30.00</em></div>
                     <div><b>Spend Date:</b> <em>2020-10-10</em></div>
                     <div><b>Category:</b> <em>Food</em></div>
                  </div>
               );
            }
         }
         ReactDOM.render(
            <ExpenseEntryItem />,
            document.getElementById('react-app') );
      </script>
   </body>
</html>

接下來，使用 npm 命令啟動應用程式。

npm start

輸出

接下來，開啟瀏覽器，在位址列中輸入https://:3000，然後按 Enter 鍵。

Item: Mango Juice
Amount: 30.00
Spend Date: 2020-10-10
Category: Food

建立函式元件

React 元件也可以使用純 JavaScript 函式建立，但功能有限。基於函式的 React 元件不支援狀態管理和其他高階功能。它可以用於快速建立一個簡單的元件。

上面提到的ExpenseEntryItem可以用函式重寫，如下所示：

function ExpenseEntryItem() {
   return (
      <div>
         <div><b>Item:</b> <em>Mango Juice</em></div>
         <div><b>Amount:</b> <em>30.00</em></div>
         <div><b>Spend Date:</b> <em>2020-10-10</em></div>
         <div><b>Category:</b> <em>Food</em></div>
      </div>
   );
}

在這裡，我們只包含了渲染功能，這足以建立一個簡單的 React 元件。

元件拆分

即使 JavaScript 被認為更容易執行，但在許多情況下，由於大量類或相對簡單的專案的依賴關係，程式碼會變得複雜。對於更大的程式碼，瀏覽器中的載入時間會更長，從而降低其效能效率。這就是可以使用程式碼分割的地方。程式碼分割用於將元件或捆綁包分成較小的塊以提高效能。

程式碼分割只會載入瀏覽器當前需要的元件。此過程稱為延遲載入。這將大大提高應用程式的效能。必須注意的是，我們並不是試圖減少程式碼量，而只是試圖透過載入使用者可能永遠不需要的元件來減輕瀏覽器的負擔。讓我們來看一個示例程式碼。

示例

讓我們首先檢視一個示例應用程式的捆綁程式碼以執行任何操作。

// file name = app.js
import { sub } from './math.js';

console.log(sub(23, 14));
// file name = math.js
export function sub(a, b) {
  return a - b;
}

上面應用程式的捆綁包將如下所示：

function sub(a, b) {
  return a - b;
}
console.log(sub(23, 14));

現在，在您的應用程式中引入程式碼分割的最佳方法是使用動態匯入()。

// Before code-splitting
import { sub } from './math';

console.log(add(23, 14));

// After code-splitting
import("./math").then(math => {
  console.log(math.sub(23, 14));
});

當使用此語法（在 Webpack 等捆綁包中）時，程式碼分割將自動開始。但是，如果您使用的是 Create React App，則程式碼分割已為您配置好，您可以立即開始使用它。

列印頁面
上一頁
下一頁
廣告
© . All rights reserved.