15321250321
010-86462584

JS開發手機APP

2022-06-02

JS開發手機中 Js 組件的類型

1. 功能組件

只需編寫 Javascript 函數即可創建功能組件。具體來說，函數式組件是那些接受 Props 并返回 JSX 的函數。功能組件可能會也可能不會以參數的形式接收數據。此外，功能組件沒有生命周期方法或狀態，但是可以通過簡單地實現 React Hooks 來添加它們。功能組件總是易于調試、閱讀和測試。

// Functional Component Exampleimport React from 'react';const HelloWorld = () => {
   return (
      <div>
         <p>Hello Emizen!</p>
      </div>
   )}export default HelloEmizen;

在上面的代碼圖中，它是一個簡單的組件，帶有常量變量“Hello Emizen”。常量變量被分配給返回 JSX 的箭頭函數。功能組件不需要是箭頭函數，也可以使用常規 JavaScript 函數簡單地聲明。同時，Props 也可以傳入函數中，用于渲染 JSX 代碼中的數據。

2.類組件

Class 組件是所有類型中使用最多的組件。原因是類組件具有執行功能組件的每個功能的能力，同時還具有一些附加功能。它還可以有效地利用 React 的主要功能、道具、狀態和生命周期方法。但是，類組件與功能組件相比相對更復雜。數據可以很容易地從一個類組件傳遞到另一個類組件。

// 類組件示例import React from 'react';class HelloWorld extends React.Component {
   使成為（） {
      返回 （
         <div>
            <p>你好艾米森！</p>
         </div>
      )
   }}導出默認的HelloEmizen；

在上面的例子中可以觀察到 class 組件使用了extends React.Componentafter class Hello Emizen。然后，它還需要render()返回 JSX 代碼的方法。在類組件中，可以聲明一個狀態，將其設置為 JavaScript 對象，并用于props在生命周期方法中處于初始階段和更改狀態。它將需要 React Hooks 通過功能組件執行這些操作。

3.純組件

純組件是人們可以編寫的最簡單、最快速的組件。由于純組件不會修改或依賴其范圍之外的不同變量的狀態，因此它們可以輕松替換簡單的功能組件。僅返回渲染函數的組件最適合純組件。Pure 組件的最大用例是提供優化。

React.Component和的最大區別在于React.PureComponent，純組件對狀態變化的比較淺。純組件自動管理shouldComponentUpdate().

React 組件主要在以下情況下重新渲染：

setState()叫做
forceUpdate()叫做
props值已更新

4. 高階組件

也稱為 HOC 的高階組件不太像 React 組件，而更像是一種模式，這是 React 組合特性的結果。HOC 的主要用例是與其他組件共享邏輯。

// HOC Exampleimport React from 'react';import MyComponent from './components/MyComponent';class HelloEmizen extends React.Component {
   render() {
      return(
         <div>
            {this.props.myArray.map((element) => (
               <MyComponent data={element} key={element.key} />
            ))}
         </div>
      )
   }}export default HelloEmizen;

上面的代碼圖像有一個簡單的組件來描述更高級別的組件。這里的關鍵代碼是this.props.myArray.map((element) => (<MyComponent />)。此函數返回組件。組件的數量僅取決于數組中稱為 HOC 的元素數量。該函數從 state 中獲取一個數組，從而通過將每個元素轉換為 React 組件來映射數組中的每個元素。

以下是高階組件的簡單概要：