React學習分享（二）

各位好，上一篇文章我們介紹了React基礎元素的使用和JSX等一些知識,現在我們繼續來學習React。

元件

元件的概念想必大家都已經明白，就是一些常用功能的模組化，可以大大提高專案構建速度。並且元件將UI分割成獨立的、可重用的部分，並將問題集中到一個地方。
從概念上來講，React的元件有些像JS的Function，舉個例子：

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

看起來和函式一模一樣。下面我們用ES6的Class來建立元件：

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

將兩個元件渲染在頁面之後，在視覺效果上完全一樣，但是後者具有更多的特性，我們後面再詳細討論。
注意：元件名稱一定要以大寫字母開頭。

渲染元件

在上一篇文章中，我們介紹了React element可以代表一個標籤：

const element = <h1>Hello, world</h1>;

其實她也可以代表一個元件：

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

const element = <Welcome name="Sara" />;

ReactDOM.render(
  element,
  document.getElementById('root')
);

類似的，我們使用 ReactDOM.render(）將其渲染在頁面上。
你可以在CodePen上嘗試一下，會在頁面列印出“Hello,Sara”。

組裝元件

元件的輸出能夠巢狀別的元件，這給了我們相當靈活的編碼空間，你可隨意的設計和抽象你的頁面元件結構。
我們舉個簡單的例子：

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

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

你可以在CodePen上嘗試一下，會在頁面列印出
Hello,Sara
Hello,Cahal
Hello,Edite

提取元件

不要害怕細化你的程式碼，通常有效的提取能夠大大提高程式碼的可閱讀行和可維護性。舉個例子：

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

這是一個使用者評論的元件，其實這麼分也能用，但是還是有點麻煩，現在我們再來細化一下：

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

這樣看起來是不是更加清晰明瞭？

下一節，我們講的是元件的狀態和生命週期，這是重中之重，所以我打算單獨作為一節來將。

好的，先寫這麼多。如果對你的學習有用，請關注我~~