React Components and Props

 Component 使你可以將 UI 拆分成獨立且可複用的程式碼，並且專注於各別程式碼的思考。本章節旨在介紹 component 的相關概念，你也可以在此參閱詳細的 API 文件。

概念上來說，component 就像是 JavaScript 的 function，它接收任意的參數（稱之為「props」）並且回傳描述畫面的 React element。

component 有兩種, 分別為Function Component 與 Class Component

Function Component:

此 function 是一個符合規範的 React component，因為它接受一個「props」（指屬性 properties）物件並回傳一個 React element。我們稱之為 function component，因為它本身就是一個 JavaScript function。

這段程式碼會在頁面上 render 出「Hi, Hello World」

function SaySomething(props) {

  return <h1>Hi, {props.text}</h1>;

}

const App = () => {

  const element = <SaySomething text="Hello World" />;

  return <div>{element}</div>;

};

Class Component:

同樣的，你也可以使用 ES6 Class 來定義 component：

import React from "react";

class SaySomething extends React.Component {

  render(props) {

    return (

      <div>

        <h1>Hi, {this.props.text}</h1>

      </div>

    );

  }

}

export default SaySomething;

Render 一個 Component

React element 也可以是使用者自定義的 component：

當 React 看到由使用者定義 component 的 element 時，它將 JSX 屬性和 children 作為 single object 傳遞給該 component。我們稱這個 object 為「props」。

舉例來說，這段程式碼會在頁面上 render 出「Hihihi」：

Index.js

ReactDOM.render(

  <React.StrictMode>

    <App />

    <SaySomething text="Hihihi" />

  </React.StrictMode>,

  document.getElementById("root")

);

結果:

讓我們來複習一下這個例子發生了什麼事：

1. 我們對 <SaySomething text="Hihihi" /> 這個 element 呼叫了 ReactDOM.render()。
2. React 以 {text="Hihihi"} 作為 props 傳入 SaySomething component 並呼叫。
3. SaySomething component 回傳了 <h1>Hi, Hihihi</h1> 這個 element 作為返回值。
4. React DOM 有效的將 DOM 更新為 <h1>Hi, Hihihi</h1>。

抽離 Component

在一開始，將 component 抽離出來可能是一件繁重的工作，但是在較大的應用程式中，建構可複用的 component 是非常值得。以經驗來說，如果一個 UI 中有一部分會被重複使用很多次（Button、Panel、Avatar），或者它足夠複雜（App、FeedStory、Comment），則可以將它提取到獨立的 component。

總之就是使用多個獨立的component 來組合成一個大的component, 增加可重用性

Props 是唯讀的

不管你使用 function 或是 class 來宣告 component，都絕不能修改自己的 props。

React 是很彈性的，但有一條嚴格的規定：

所有的 React component 都必須像 Pure function 一般保護他的 props