React.js 實戰 - 組件 & Props

0 聯繫我

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」:

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

• 咱們對<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應用程序的頂部是一個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')
);複製代碼

這個組件接收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組件作一些小小的調整：