了解 React 中的元件層次結構：組織應用程式結構-js教程-PHP中文網

了解 React 中的元件層次結構：組織應用程式結構

DDD

發布： 2025-01-01 14:02:12

原創

1000 人瀏覽過

Understanding Component Hierarchy in React: Organizing Your Application Structure

React 中的元件層次結構：組織和建立您的應用程式

在 React 中，元件層次結構 是一種以父子關係建構元件的方式，其中父元件控制並將資料傳遞給子元件。這種層次結構有助於以可預測且有效率的方式組織 UI 和資料流。

1.什麼是元件層次結構？

元件層次結構是指定義 React 應用程式中元件之間的關係和互動的結構。組件以樹狀結構排列，其中：

根組件是起點，它包含各種子組件。
父元件包含其他元件作為子元件，形成層次結構。
Props 從父元件傳遞到子元件以共享資料和行為。

2. React 中的元件層次結構如何運作？

a.父組件和子組件

父元件保存狀態和邏輯，它們透過props將資料傳遞給子元件。
子元件接收資料作為道具並相應地渲染UI。

b.組件巢狀

組件可以相互嵌套。根元件通常包含最高等級的元件，而最高等級的元件則包含它們自己的子元件。這種嵌套允許模組化且可維護的程式碼。

範例：基本元件層次結構

import React from 'react';

// Child Component
const Header = () => {
  return <h1>Welcome to My App</h1>;
};

// Parent Component
const App = () => {
  return (
    <div>
      <Header /> {/* Child component inside Parent */}
      <p>This is the main content of the app.</p>
    </div>
  );
};

export default App;

登入後複製

在這個例子中，App是父元件，Header是子元件。 Header 元件嵌套在 App 內部。

3.元件層次結構中的資料流

a.單向資料綁定

React 遵循單向資料綁定，這表示資料透過 props 從父元件流向子元件。這確保了元件層次結構保持乾淨且易於管理。

b.狀態與道具

狀態：在元件本身內管理。通常，父元件會保存狀態並將其傳遞給子元件。
Props：用於將資料從父元件傳遞到子元件。子元件接收 props 並使用它們來渲染 UI，但它們不能直接修改 props。

範例：運作中的狀態和道具

import React from 'react';

// Child Component
const Header = () => {
  return <h1>Welcome to My App</h1>;
};

// Parent Component
const App = () => {
  return (
    <div>
      <Header /> {/* Child component inside Parent */}
      <p>This is the main content of the app.</p>
    </div>
  );
};

export default App;

登入後複製

在這裡，App 元件保存狀態訊息，並將其作為 prop 傳遞給 DisplayMessage 子元件。單擊按鈕時，父元件中的狀態發生變化，觸發重新渲染並更新子元件顯示的訊息。