React.js 實戰 - 元件 & Props

JavaEdge發表於2019-02-15
ReactJS元件

0 聯絡我

React.js 實戰 - 元件 & Props

1.Java開發技術交流Q群

2.完整部落格連結

3.個人知乎

4.gayhub

元件可以將UI切分成一些獨立的、可複用的部件,這樣你就只需專注於構建每一個單獨的部件.

元件從概念上看就像是函式，它可以接收任意的輸入值（稱之為“props”），並返回一個需要在頁面上展示的React元素.

1 函式定義/類定義元件

定義一個元件最簡單的方式是使用JavaScript函式：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}複製程式碼

該函式是一個有效的React元件，它接收一個單一的“props”物件並返回了一個React元素.
我們之所以稱這種型別的元件為函式定義元件，是因為從字面上來看，它就是一個JavaScript函式.

你也可以使用 ES6 class 來定義一個元件:

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

上面兩個元件在React中是相同的.

我們將在[下一節]討論類的一些額外特性。在那之前，我們都將使用較為簡潔的函式定義元件。

2 元件渲染

在前面，我們遇到的React元素都只是DOM標籤：

const element = <div />;複製程式碼

然而，React元素也可以是使用者自定義的元件

const element = <Welcome name="Sara" />;複製程式碼

當React遇到的元素是使用者自定義的元件，它會將JSX屬性作為單個物件傳遞給該元件，這個物件稱之為“props”。

例如,這段程式碼會在頁面上渲染出”Hello,Sara”:


React.js 實戰 - 元件 & Props

我們來回顧一下在這個例子中發生了什麼：

  • 我們對<Welcome name="Sara" />元素呼叫了ReactDOM.render()方法
  • React將{name: 'Sara'}作為props傳入並呼叫Welcome元件
  • Welcome元件將<h1>Hello, Sara</h1>元素作為結果返回。
  • React DOM將DOM更新為<h1>Hello, Sara</h1>。

警告:
元件名稱必須以大寫字母開頭。
例如，<div /> 表示一個DOM標籤，但 <Welcome /> 表示一個元件，並且在使用該元件時你必須定義或引入它。

3 組合元件

元件可以在它的輸出中引用其它元件，這就可以讓我們用同一元件來抽象出任意層次的細節.
在React應用中，按鈕、表單、對話方塊、整個螢幕的內容等，這些通常都被表示為元件.

例如，我們可以建立一個App元件，用來多次渲染Welcome元件

React.js 實戰 - 元件 & Props

通常，一個新的React應用程式的頂部是一個App元件.
但是，如果要將React整合到現有應用程式中，則可以從下而上使用像Button這樣的小元件作為開始，並逐漸運用到檢視層的頂部.

元件的返回值只能有一個根元素。這也是我們要用一個<div>來包裹所有<Welcome />元素的原因。

4 提取元件

可以將元件切分為更小的元件

例如，來看看這個Comment元件

function formatDate(date) {
  return date.toLocaleDateString();
}

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

const comment = {
  date: new Date(),
  text: 'I hope you enjoy learning React!',
  author: {
    name: 'Hello Kitty',
    avatarUrl: 'http://placekitten.com/g/64/64'
  }
};
ReactDOM.render(
  <Comment
    date={comment.date}
    text={comment.text}
    author={comment.author} />,
  document.getElementById('root')
);複製程式碼
React.js 實戰 - 元件 & Props

這個元件接收author(物件)、text(字串)、以及date(Date物件)作為props，用來描述一個社交媒體網站上的評論.

這個元件由於巢狀，變得難以被修改，可複用的部分也難以被複用。所以讓我們從這個元件中提取出一些小元件。

首先，我們來提取Avatar元件

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

Avatar作為Comment的內部元件，不需要知道是否被渲染.
因此我們將author改為一個更通用的名字user。

我們建議從元件自身的角度來命名props，而不是根據使用元件的上下文命名。

現在我們可以對Comment元件做一些小小的調整：

相關文章