[官網學 React] Docs：Components and Props
網址（英文）：https://reactjs.org/docs/components-and-props.html
網址（中文）：https://zh-hant.reactjs.org/docs/components-and-props.html
組件（components）讓我們能將 UI 拆分成各自獨立、可再利用的小塊，還能各自獨立的思考和設計。
概念上組件像 JavaScript 的函式，它們接收任意輸入值（組件稱輸入物件為 props），並可回傳用來描述顯現在螢幕畫面的 React 元素。
＊props：指屬性 properties
Function Component 與 Class Component
定義組件最簡單的方法就是寫成 JavaScript 函式：
這個 Function Component 範例接受一個 props 物件，回傳一個 React element。
也可以使用 ES6 Class 來定義 component：
這個 Class Component 和上面的 Function Component 是做相同的事。
渲染一個 Component
當 React 看到一個元素的 tag 是使用者自己定義的組件時（例如 Welcome），它會將 JSX attribute（JSX 屬性，例如 name=’Sara’）和 children 當成物件（稱作 props）傳給這個使用者自定義的組件。
以上方例子說明：
- 首先呼叫帶有
<Welcome name="Sara" />元素的ReactDOM.render() - 接著 React 會呼叫
Welcome組件，並傳入 props物件{name: 'Sara'} Welcome組件回傳<h1>Hello, Sara</h1>元素- 最後 React 有效地更新 DOM 以符合
<h1>Hello, Sara</h1>
＊永遠要用大寫命名組件名，因為 React 會將小寫開頭認為是 DOM 的標籤，例如看到 <div /> 就是 HTML 的 div 標籤。但 <Welcome /> 則是一個 component，且需在作用域中使用 Welcome。
組合 Component
組件可以被其他組件使用，這讓我們能在任意層級使用相同的組件。
按鈕、表單、對話框、一個畫面，這些在 React 應用程式都普遍被表示成組件。
大部分 React apps 在最頂層會有一個 APP 組件，不過官網說如果你是將 React 組進現有的應用程式中，你可能會從底層開始加一個小組件（例如 button），然後逐步地往上面的層級實作。
分離 Component
將 component 分成更多小 component。
會想將一些 component 中的部分分離出的原因：
- component 可能因為太多的巢狀關係而難以更動
- 難以複用獨立的部分
官網建議分離出的單純組件可以從組件自己的視角為 props 命名，而非以它在父層以上的使用情境，這樣能讓這個組件更靈活地被運用。
將組件拆分出更多小區塊看起來像繁重的工作，但擁有可重複運用的組件對大型應用程式將有很大助益。
依據經驗法則，官網說當你 UI 的某個部份經常被重複使用（例如 button），或某個區塊夠複雜，這些部分都是適合被拆分出去獨立的組件。
Props 是唯讀的
在組件內無法修改傳入的 props。
下一篇介紹到的 state 讓 React 組件能隨時依據使用者的操作、網路的回覆和任何可能狀況，修改它們的輸出。