React －－萬物皆可組件

一、React 組件是什麼？#

組件，從概念上類似於 javascript 函數，他接受任意入參（props），並返回作用於描述頁面展示內容的 React 元素。

組件允許你將 UI 拆分為獨立可複用的程式碼片段，並對每個片段進行獨立構思。

1. 創建一個組件#

// 函數組件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// class組件
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

2. 渲染組件#

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

ReactDOM.render(
  <Welcome />,
  document.getElementById('root')
);

3. 組件#

React 的基礎原則有三條，分別是：

React 界面完全由數據驅動
React 中一切都是組件
props 是 React 組件之間通訊的基本方式

給組件輸入一個參數，最終返回一個 React Element,React Element 就是在頁面上展示的內容，相當於一個 DOM 節點

React 一大核心就是－－萬物皆可組件

用戶界面就是組件
組件可以嵌套包裝組成複雜功能
組件可以用來實現副作用

一個複雜的界面可以分割很很多簡單的組件，每個簡單的組件又可以分割成很多小組件

有些類似於類和對象的概念

二、組件的劃分#

** 無狀態組件：** 無狀態組件 (Stateless Component) 是最基礎的組件形式，由於沒有狀態的影響所以就是純靜態展示的作用。基本組成結構就是屬性（props）加上一個渲染函數（render）。由於不涉及到狀態的更新，所以這種組件的複用性也最強。例如在各 UI 庫中開發的按鈕、輸入框、圖標等等。
** 有狀態組件：** 組件內部包含狀態（state）且狀態隨著事件或者外部的消息而發生改變的時候，這就構成了有狀態組件（Stateful Component）。有狀態組件通常會帶有生命週期 (lifecycle)，用以在不同的時刻觸發狀態的更新。在寫業務邏輯時常用到，不同場景所用的狀態和生命週期也會不同。
** 容器組件：** 為使組件的職責更加單一，耦合性進一步地降低，引入了容器組件 (Container Component) 的概念。重要負責對數據獲取以及處理的邏輯。下文的設計模式也會提到。
高階組件：“高階組件（HoC）” 也算是種組件設計模式。做為一個高階組件，可以在原有組件的基礎上，對其增加新的功能和行為。如打印日誌，獲取數據和校驗數據等和展示無關的邏輯的時候，抽象出一個高階組件，用以給基礎的組件增加這些功能，減少公共的代碼。
**Render Callback 組件：** 組件模式是在組件中使用渲染回調的方式，將組件中的渲染邏輯委託給其子組件。也是種重用組件邏輯的方式，也叫 render props 模式。

三、設計原則#

React 的組件其實是軟體設計中的模塊，其設計原則也需遵從通用的組件設計原則，簡單說來，就是要減少組件之間的耦合性（Coupling)，讓組件簡單，這樣才能讓整體系統易於理解、易於維護。

即，設計原則：

接口小，props 數量少；
劃分組件，充分利用組合（composition）；
把 state 往上層組件提取，讓下層組件只需要實現為純函數。

就像搭積木，複雜的應用和組件都是由簡單的界面和組件組成的。劃分組件也沒有絕對的方法，選擇在當下場景合適的方式劃分，充分利用組合即可。實際編寫代碼也是逐步精進的過程，努力做到：

功能正常；
代碼整潔；
高性能。