元件與props (精讀React官方文檔—04)

這是我參與更文挑戰的第17天，活動詳情檢視：

更文挑戰

元件的概念

官方描述：元件允許你将 UI 拆分為獨立可複用的代碼片段，并對每個片段進行獨立構思。元件，從概念上類似于 JavaScript 函數。它接受任意的入參（即 “props”），并傳回用于描述頁面展示内容的 React 元素。

解讀

• 元件是獨立可複用的代碼片段，這種代碼片段接收props參數并傳回React元素。

函數元件與類元件

函數元件

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

• 函數元件的本質就是一個JS函數，它符合上文我們對元件的定義，接收一個props參數并傳回一個React元素。

類元件

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

渲染元件

• React元素不僅可以是DOM标簽還可以是自定義元件

const element = <div />;
const element = <Welcome name="Sara" />;
複制代碼      

• 元件名稱必須以大寫字母開頭。

組合元件

官方描述：元件可以在其輸出中引用其他元件。這就可以讓我們用同一元件來抽象出任意層次的細節。按鈕，表單，對話框，甚至整個螢幕的内容：在 React 應用程式中，這些通常都會以元件的形式表示。

解讀 官方對這一概念的描述可能較為晦澀難懂，實際上通俗的講，就是說一個元件中可以包含多個其他元件，我們看看官方給的例子就明白了。

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')
);
複制代碼      

• 一般情況下React應用的頂層元件為APP元件。

提取元件

官方描述：将元件拆分為更小的元件。

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>
  );
}
複制代碼      

• 上面的這個元件接收author,text,date等三個props,這個元件具有一定的嵌套關系，是以我們可以提取其中一部分的功能，然後建立新的元件。
• 提取Avator元件

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

• 官方給Avatar這個元件的屬性起名為user,意在告訴我們從元件自身的角度命名 props，而不是依賴于調用元件的上下文命名。
• 對Comment元件進行調整

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>
  );
}
複制代碼      

• 後面根據這種方法，依次提取其他可複用的元件。

Props的隻讀性

官方描述：所有 React 元件都必須像純函數一樣保護它們的 props 不被更改。

• 我們不能修改函數元件或類元件的props，應盡量編寫純函數，所謂純函數就是指同樣的輸入傳回同樣的結果，不産生副作用。
• 純函數執行個體

function sum(a, b) {
  return a + b;
}
複制代碼      

歡迎大家關注我的專欄，每日更新，一起學習React。