React/組件

組件容許你將 UI 拆分爲獨立可複用的代碼片斷，並對每一個片斷進行獨立構思。因此當在動手寫代碼以前，要分析UI，如何劃分組件是一個須要在動手以前想清楚的問題，最重要的就是獨立以及可複用。獨立表明不會影響到其餘組件，可複用表明省去了不少重複工做量，因此這兩部分在劃分組件的時候要重點思考。

組件，從概念上相似於 JavaScript 函數。它接受任意的入參（即 「props」），並返回用於描述頁面展現內容的 React 元素。

React組件分爲class組件和函數組件

函數組件

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

該函數是一個有效的 React 組件，由於它接收惟一帶有數據的 「props」（表明屬性）對象與並返回一個 React 元素。這類組件被稱爲「函數組件」，由於它本質上就是 JavaScript 函數。　　

Class組件

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