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>;
  }
}