Components基本定義

Components是react組成的最基本元素，每一個Compontant負責一個UI控制，若在其他頁面有重複用到該元件的話，只需要引用該元件即可使用其功能。

Function Component 與 Class Component

撰寫Javascript的function便可簡單建立一個componment，下面用function及ES6 class的寫法當作範例:

function Welcome(props){
    return <h1>Hello,{props.name}</h1>;
}
const element=<Welcome name="小羽" />

// ES6 class的寫法
class Welcome2 extends React.Component{
render(){
    return <h1>Hello,{this.props.namne}</h1>;
}
}

// 將Resct元素渲染到HTML架構
ReactDOM.render(element,document.getElementById('app'))

當React看到由使用者定義component時，它將 JSX 屬性(範例的name)和children作為單一物件傳遞給該 component。該物件在react稱為「props」。

需注意的是，Components定義的function開頭英文必須是大寫，<Welcome/>會被視為Component，若改成小寫的<welcome/>的話，則會被當作HTML的標籤。

複合式Components

Components裡面可以包覆多個component，將整個畫面的元素都透過Component渲染到瀏覽器上。

    // function component
    function Welcome(props){
        return <h1>Hello,{props.name}</h1>;
    }
    const element=<Welcome name="小羽" />
    // name為
    
    // ES6 class的寫法
    class Welcome2 extends React.Component{
    render(){
        return <div>
            <Welcome name="小羽" />
            <Welcome name="小資" />
            <Welcome name="小雨" />
            </div>;
    }
    }
    
    // 將Resct元素渲染到HTML架構，注意和上面定義的變數element不同是，ReactDOM.render()第一個變數需放入react元素，以標籤的形式包覆
    ReactDOM.render(<Welcome2 />,document.getElementById('app'))

抽離式Components

將Component拆成更小的Component，主要目的為將其中一些邏輯判斷從中抽出，若其他頁面有用到的話便可直接引用，下面為官網的範例:

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

從中可以觀察到該component為作者照片、作者姓名、發布內容、發布日期組成，現在逐一把作者照片及姓名逐一拆出。

function Avastar(props){
    return  <img className="Avatar"
          src={props.user.avatarUrl}
          alt={props.user.name}
        />;
}

props的命名方式建議從建立該Component的UI邏輯去考慮，方便未來再其他頁面反覆使用時好理解其用途；範例中便將author改成user。
簡化後:

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={props.author} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

抽離User Info

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

最終簡化後結果:

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

可以看到程式碼變的簡化後，易讀性增加的同時，拆出來的使用者資訊(<UserInfo/>)Component還可在其他頁面反覆使用，讓程式更好管理、維護。