React 組件指南
簡介
一個組件 可能是 React 中要理解的最重要的概念。它是核心構建塊之一 React 允許我們將 UI 拆分為獨立的、可重用的部分，從而使構建 UI 的任務變得更加容易。然後將所有這些獨立的組件組合成一個父組件，作為我們最終的用戶界面。
什麼是組件？
一個組件 是一個獨立的、可重用的代碼塊，它將用戶界面分成更小的部分，而不是在單個文件中構建整個 UI。按鈕、表單、對話框等都可以表示為組件。 React 組件接受任意輸入（“props” ) 並返回告訴應該在屏幕上呈現什麼的 React 元素或 JSX 代碼。
為了演示組件的工作原理，我們分解了一個示例 Todo 應用程序的 UI 分成單獨的組件：
此 Todo 應用程序由四個不同的組件組成 這有助於使代碼更易於理解和維護。在構建大型應用程序時，我們最終可能會使用許多組件，因此擁有結構良好且可讀性強的代碼至關重要。
注意： 廣泛接受的約定規定所有組件名稱必須 以大寫字母開頭。
React 中的組件類型
在 React 中，主要有兩種類型的組件 - 函數式 和類 組件。
功能組件
這是創建組件的最簡單方法 ，它是 React 中第一個也是推薦的組件類型。函數式組件基本上是一個 JavaScript/ES6 函數，它返回一種稱為 JSX 或 React 元素的特殊 JavaScript 語法。下面的函數是一個有效的函數組件，它接收 屬性對象 , 通常命名為 props .
function Introduction(props) {
return <h1>Hello, I am {props.name}</h1>;
}
或者，我們也可以使用 箭頭函數 創建一個函數式組件 符號：
const Introduction = (props) => {
return <h1>Hello, I am {props.name}</h1>;
}
注意： 本質上，這只是另一個 JavaScript 函數。它與其他常用函數的區別在於它的返回值 - JSX (JavaScript XML) 格式的代碼。
類組件
組件類 是一個擴展的 ES6 類 React 組件類，必須有 render() 返回 JSX 的方法。如果需要，它在構造函數中接受道具。
它是第二種組件，主要是因為 "state" 不能在舊版本的 React（16.8 之前）的功能組件中使用。因此，函數式組件只用於 UI 渲染，而類組件則用於數據管理和一些額外的操作，例如生命週期方法等。然而，隨著 React hooks 的引入 ，這已經改變了，我們現在也可以在函數組件中使用狀態了。
下面，是同一個Introduction 組件，但這次創建為類組件：
class Introduction extends React.Component {
render() {
return <h1>Hello, I am {this.props.name}</h1>;
}
}
注意： 現在我們已經創建了函數組件和類組件，比較兩者 - 您可以看到內容基本相同。
在 React 中使用組件
到目前為止，我們已經了解瞭如何創建函數式或類組件。現在，讓我們看看如何在父組件中使用這些組件。為了以後能夠使用組件（或在父組件中），我們必須先導出它，以便我們可以在其他地方導入它：
const Introduction = (props) => {
return <h1>Hello, I am {props.name}</h1>;
}
export default Introduction;
導入後，我們可以在parent中引用 組件（在這種情況下，App 組件）：
import Introduction from './Introduction';
const App = () => {
return (
<div className="App">
<Introduction name="John Doe" />
</div>
);
}
通過道具傳遞數據到組件
當我們使用 create-react-app 安裝 React 命令，我們會自動在 App.js 中得到一個功能組件 文件作為我們應用程序的起點。我們的大部分數據 很可能位於 App.js 當我們構建我們的應用程序時，我們無疑希望將這些數據傳遞給新組件（子組件）。 道具 ，代表“屬性”，用於完成此操作。
這是 React 中的一個重要概念，它允許組件相互通信。道具是只讀的 ，因此它們只能在一個方向（從父組件到子組件）傳輸數據。 props 不允許數據從 child 傳遞到 parent 或從組件傳遞到同一級別的組件。
現在讓我們創建一個 Button 組件，然後傳入不同按鈕的名稱作為道具：
const Button = (props) => {
return (
<div>
<button class="btn">{props.name}</button>
</div>
);
};
export default Button;
讓我們回到App.js 文件，看看我們如何使用 props 將數據傳遞給按鈕組件。我們需要做的就是在 Button 上定義一個 prop 組件並為其賦值：
免費電子書：Git Essentials
查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！
import Button from './Button';
const App = () => {
return (
<div className="App">
<h1>Hello World</h1>
<Button name="Login" />
<Button name="Logout" />
<Button name="Sign Up" />
</div>
);
};
export default App;
注意： 我們必須導入該組件才能在父組件中使用它。
Props 可用於傳遞任何類型的數據，包括數組和對象，因此它們的用途沒有限制。
將應用拆分為組件
在我們總結本指南之前，讓我們看一個 StudentInfo 的示例 包含學生詳細信息和分數詳細信息的組件。
const StudentInfo = (props) => {
return (
<div className="student">
<div className="student-info">
<img
className="Avatar"
src={props.student.image}
alt={props.student.name}
/>
<div className="student-name-info">
<p>{props.student.name}</p>
<p>{props.student.userName}</p>
</div>
</div>
<div className="score-details">
<div className="Comment-text">{props.score}</div>
<div className="Comment-date">{props.remark}</div>
</div>
</div>
);
};
export default StudentInfo;
這需要一個 student 包含大量信息（作為道具）的對象，並描述了一張學生卡，以在學生的分數和備註旁邊顯示學生的詳細信息。由於嵌套，這個組件很難改變，也很難重用它的各個部分。
讓我們從中提取一個組件，那就是 StudentInfo 部分：
const StudentInfo = (props) => {
return (
<div className="student-info">
<img
className="Avatar"
src={props.student.image}
alt={props.student.name}
/>
<div className="student-name-info">
<p>{props.student.name}</p>
<p>{props.student.userName}</p>
</div>
</div>
);
};
export default StudentInfo;
我們現在可以將父組件簡化為如下所示：
import StudentInfo from './StudentInfo';
const StudentInfo = (props) => {
return (
<div className="student">
<StudentInfo student="props.student" />
<div className="score-details">
<div className="Comment-text">{props.score}</div>
<div className="Comment-date">{props.remark}</div>
</div>
</div>
);
};
export default StudentInfo;
提取組件一開始可能看起來很無聊，但擁有一組可重用的組件對我們在大型應用程序中大有裨益。
結論
在本指南中，我們已經能夠了解組件在 React 中的工作方式、兩種類型的組件以及如何使用 props 將數據從一個組件傳遞到另一個組件。
