摘要：屬性是一個(gè)組件的外部輸入。只會(huì)在開發(fā)模式下進(jìn)行屬性類型檢查，當(dāng)代碼進(jìn)行生產(chǎn)發(fā)布后，為了減少額外的性能開銷，類型檢查將會(huì)被略過。某個(gè)類的實(shí)例枚舉，屬性值必須為其中的某一個(gè)值。屬性為一個(gè)數(shù)組，且數(shù)組中的元素必須符合指定類型。

在第二篇文章 《新型前端開發(fā)方式》 中有說到 React 有很爽的一點(diǎn)就是給我們一種創(chuàng)造 HTML 標(biāo)簽的能力，那么今天這篇文章就詳細(xì)講解下 React 是如何提供這種能力的，作為前端開發(fā)者如何來運(yùn)用這種能力。

在第三篇文章 《JavaScript代碼里寫HTML一樣可以很優(yōu)雅》 中介紹了 JavaScript 的擴(kuò)展語法 JSX，相信大家已經(jīng)知道了，所謂的創(chuàng)造新的 HTML 的能力，其實(shí)就是以極其類似 HTML 的 JSX 語法來使用基于 React 編寫的視圖層組件。所以說，要完成今天的任務(wù)，我們只需要搞清楚一個(gè)問題即可：如何基于 React 編寫視圖層組件。

定義組件兩種方式：類繼承組件、函數(shù)式組件。

類繼承組件有更豐富的特性，函數(shù)式組件書寫更簡(jiǎn)潔，執(zhí)行效率更高。

組件名稱首字母要大寫。

屬性是一個(gè)組件的外部輸入。

屬性值可以通過 {} 設(shè)置任意的 JS 表達(dá)式。

屬性是只讀的。

屬性可以設(shè)置默認(rèn)值。

屬性可以設(shè)置類型，開發(fā)階段 React 會(huì)對(duì)屬性進(jìn)行類型檢查。

為組件所有屬性設(shè)置類型檢查是個(gè)好習(xí)慣，有助于協(xié)作開發(fā)。

通過內(nèi)容摘要可以讓你快速了解本文內(nèi)容是否對(duì)你有用，從而決定是否繼續(xù)閱讀，節(jié)省你的時(shí)間也是一件很有意義的事情。

下面介紹一下在 React 中定義組件的幾種方式。

有過 Java 等面向?qū)ο箝_發(fā)經(jīng)驗(yàn)的同學(xué)一定很容易接受這種方式。ES6 為 JavaScript 增加了類和類繼承的特性。子類會(huì)繼承父類的“基因”（成員方法、屬性），如果父類是一個(gè)組件，那子類自然而然也是一個(gè)組件。

React 提供了 Component 和 PureComponent 兩個(gè)父類，他們之間有一點(diǎn)點(diǎn)區(qū)別，我們?cè)谥蟮奈恼轮袝?huì)詳細(xì)介紹，現(xiàn)在你可以將他們同等看待，暫且無須理會(huì)。

通過繼承自 React 提供的組件基類，我們可以這樣來創(chuàng)建一個(gè)組件：

import React, {Component} from "react";

class HelloMessage extends Component {
    render() {
        return 
Hello world.
;
    }
}

通過類繼承的方式創(chuàng)建一個(gè)組件，就是這么簡(jiǎn)單，只要繼承 Component 基類并實(shí)現(xiàn) render 方法即可。然后就可以把 HelloMessage 當(dāng)成一個(gè)新的“HTML 標(biāo)簽”來用了，如下你可以把它渲染到頁面上：

ReactDOM.render(, document.querySelector("#root"));

你也可以用它來裝配其它組件，如：

import React, {Component} from "react";

class HelloMessageList extends React.Component {
    render() {
        return (
            

                
                
                
            
        )
    }
}

當(dāng)然，例子沒有任何實(shí)際意義，只是為了演示組件的定義及其用法。

演示代碼：https://codepen.io/Sarike/pen...

顧名思義，函數(shù)式組件，就是以函數(shù)的形式來定義一個(gè)組件，如下所示：

import React from "react";

function HelloMessage() {
    return 
Hello world.
;
}

// 或者：

const HelloMessage = () => 
Hello world.
;

實(shí)際上就是只實(shí)現(xiàn)了類繼承方式中的 render 方法。

示例代碼：https://codepen.io/Sarike/pen...

這兩種定義組件的方式，在實(shí)際的開發(fā)中都經(jīng)常會(huì)被用到，對(duì)大部分人來說類繼承的方式用得頻率會(huì)更高一些。

類繼承的方式，相較于函數(shù)式組件，雖然寫起來略繁瑣，但是它擁有更多的特性：

內(nèi)部狀態(tài)：state

生命周期函數(shù)

函數(shù)式組件雖然沒有 state 和生命周期函數(shù)等特性，但是它有更簡(jiǎn)潔的書寫方式，另外還有更好的性能，不用處理一些復(fù)雜的特性，執(zhí)行效率當(dāng)然高了。

現(xiàn)在你可以無需關(guān)心 state 和生命周期函數(shù)的具體作用，下一篇文章我會(huì)詳細(xì)講解，等你看完下一篇文章之后，至于選擇哪種方式的問題就很好解決了。在開發(fā)一個(gè)組件的時(shí)候，我是這樣來做的：當(dāng)我一開始就知道這個(gè)組件會(huì)用到 state 或者生命周期函數(shù)時(shí)，毫無疑問直接使用類繼承的方式；如果一開始用不到這些特性也不確定未來會(huì)不會(huì)用到，那我就先用函數(shù)式組件，如果隨著業(yè)務(wù)的演進(jìn)，組件需要應(yīng)用這些特性的時(shí)候，我會(huì)再把它重構(gòu)成類繼承的方式。這個(gè)重構(gòu)非常簡(jiǎn)單，只需要將原來的函數(shù)變成組件類的 render 方法即可。

另外，還有一點(diǎn)需要注意，不管那種方式，組件的名稱首字母必須為大寫。嚴(yán)格來說，是 JSX 要求用戶自定義的組件名首字母必須為大寫，如果是小寫字母開頭，那么 React 會(huì)將其當(dāng)成內(nèi)置的組件直接將其渲染成一個(gè) html 標(biāo)簽，從而不會(huì)正確渲染用戶自定義的組件。

如果你非要將組件名稱以小寫字母開頭，那你在以 JSX 語法使用之前也必須將其賦值為一個(gè)大寫字母開頭的變量，如下所示：

function helloMessage() {
    return 
Hello world.
}

const HelloMessage = helloMessage;

ReactDOM.render(, mountNode);

但這有事何必呢，純粹是沒事兒找事兒，大家在實(shí)際項(xiàng)目開發(fā)時(shí)，直接將組件名以大寫字母開頭即可。

上面說完了在 React 中兩種定義組件的方式。在上面的例子中，我們定義的組件都是靜態(tài)的，然而在實(shí)際的開發(fā)中，視圖層組件往往會(huì)進(jìn)行頻繁更新，或者需要從后端 API 獲取動(dòng)態(tài)數(shù)據(jù)在組件中展示。這就需要組件擁有接收外部輸入的能力。

在第二篇文章 《新型前端開發(fā)方式》 中有說到 “視圖是數(shù)據(jù)的映射”，那么其中說的數(shù)據(jù)指的就是屬性。

如果把組件理解為一個(gè)函數(shù)，那么屬性就是這個(gè)函數(shù)的參數(shù)，函數(shù)的返回值就是呈現(xiàn)到頁面上的視圖。而且通過上面部分的學(xué)習(xí)，在 React 中組件確實(shí)可以以函數(shù)的形式來定義，而且函數(shù)的參數(shù)就是一個(gè)包含當(dāng)前組件接收到的所有屬性的對(duì)象。

如下所示帶有屬性 name 的組件定義：

import React, {Component} from "react";

class HelloMessage extends Component {
    render() {
        return 
Hello {this.props.name}.
;
    }
}

函數(shù)式：

import React from "react";

function HelloMessage(props) {
    return 
Hello {props.name}.
;
}

// 或者：

const HelloMessage = props => 
Hello {props.name}.
;

屬性的傳遞也跟 HTML 一樣（在本文的最后一部分會(huì)有各種類型屬性的詳細(xì)介紹），如下所示：

import React, {Component} from "react";
import ReactDOM from "react-dom";

class HelloMessageList extends Component {
    render() {
        return (
            

                
                
                
            
        )
    }
}

ReactDOM.render(, document.querySelector("#root"));

這樣頁面上會(huì)展示出：

Hello Lucy.
Hello Tom.
Hello Jack.

示例代碼：https://codepen.io/Sarike/pen...

屬性必須為只讀的，這一點(diǎn)非常重要，請(qǐng)嚴(yán)格遵守。對(duì)應(yīng)到上面說到的，如果把組件理解為一個(gè)函數(shù)，那么這個(gè)函數(shù)必須為一個(gè)純函數(shù)（Pure function），在純函數(shù)中不能修改其參數(shù)，確定的輸入必須有確定的輸出。

雖然有些時(shí)候，你修改了組件的屬性，貌似也能正常工作。沒錯(cuò)，因?yàn)?JavaScript 語言特性的原因，沒人能阻止你這么做。但是請(qǐng)先相信我，嚴(yán)格遵守這條規(guī)則不僅能讓你少踩很多坑，而且能讓你的應(yīng)用穩(wěn)定性更強(qiáng)、維護(hù)性更強(qiáng)。如果你直接修改組件的屬性，React 并不會(huì)感知到此修改，從而不會(huì)重新渲染組件，就導(dǎo)致了當(dāng)前組件的視圖展示與數(shù)據(jù)不一致，但這個(gè)被修改的屬性會(huì)隨著下一次組件的渲染被生效到視圖上，而且這次渲染的時(shí)機(jī)是不確定的，不難想象，如果一個(gè)規(guī)模較大的項(xiàng)目里充滿了這種不確定性是多么痛苦的一件事情。總之，如果你隨意修改組件的屬性，會(huì)很容易讓你的應(yīng)用充滿許多難以排查的 BUG。

通常情況下，我們需要為組件的屬性設(shè)為默認(rèn)值。就像 HTML 標(biāo)簽的屬性也有默認(rèn)值一樣，例如 form 標(biāo)簽的 method 屬性默認(rèn)值是 GET，input 標(biāo)簽的 type 屬性默認(rèn)值是 text 一樣。

還是上面 HelloMessage 組件，如果需求是當(dāng)不傳入 name 屬性時(shí)，默認(rèn)展示 Hello World.，也就是說 name 屬性的默認(rèn)值是 World。

一種很容易想到的做法：

Hello {this.props.name || "World"}.

這樣確實(shí)可以解決當(dāng)前這個(gè)需求，但是屬性可能還會(huì)是個(gè) Object，也可能是個(gè)函數(shù)，你當(dāng)然可以先判斷下這個(gè)屬性是否為 undefined 然后決定是否使用默認(rèn)值，但是這樣會(huì)讓代碼顯得很不優(yōu)雅，而且也會(huì)增加很多繁瑣的判斷邏輯。

因此，React 提供了相應(yīng)的機(jī)制可以設(shè)置組件屬性的默認(rèn)值，如下所示，你需要通過組件的靜態(tài)字段 defaultProps 來設(shè)置組件屬性的默認(rèn)值。如下所示：

import React, {Component} from "react";

class HelloMessage extends Component {
    render() {
        return 
Hello {this.props.name}.
;
    }
}
HelloMessage.defaultProps = {
    name: "World"
}

這樣就可以了， 這樣不為組件設(shè)置任何屬性，那么它就會(huì)在頁面上展示Hello World.。

示例代碼：https://codepen.io/Sarike/pen...

在開發(fā)較復(fù)雜的前端應(yīng)用時(shí)，我們經(jīng)常會(huì)遇到許多因?yàn)轭愋蜋z查導(dǎo)致的問題，例如上面的 HelloMessage 組件，我期望其 name 屬性只能是字符串類型的，你要是給我一個(gè) Object，我是沒法正確展示的。為了在開發(fā)過程中盡快的發(fā)現(xiàn)這類問題，React 為組件添加了類型檢查的機(jī)制，你需要給組件設(shè)置靜態(tài)字段 propTypes 來設(shè)置組件各個(gè)屬性的類型檢查器。

import React, {Component} from "react";
import PropTypes from "prop-types";

class HelloMessage extends Component {
    render() {
        return 
Hello {this.props.name}.
;
    }
}
HelloMessage.defaultProps = {
    name: "World"
}
HelloMessage.propTypes = {
    name: PropTypes.string
}

這樣在開發(fā)過程中 React 就能校驗(yàn)組件接收到的屬性值是否符合指定的類型，如果校驗(yàn)不通過，將會(huì)拋出警告。React 只會(huì)在開發(fā)模式下進(jìn)行屬性類型檢查，當(dāng)代碼進(jìn)行生產(chǎn)發(fā)布后，為了減少額外的性能開銷，類型檢查將會(huì)被略過。

其實(shí)，為每一個(gè)組件編寫完善的屬性類型是一個(gè)非常好的習(xí)慣，這不僅能及時(shí)發(fā)現(xiàn)問題，更重要的是配合幾句簡(jiǎn)單額注釋，這將成為該組件一份非常好的文檔，一個(gè)完善的組件應(yīng)該具有良好的封裝性和易復(fù)用性，在一個(gè)協(xié)作開發(fā)的項(xiàng)目中，其他開發(fā)者需要引用你開發(fā)的組件時(shí)，只需要看一下組件的屬性列表，大致就可以了解如何來使用這個(gè)組件，省去了很多不必要的溝通。

下面是 React 提供的可用的數(shù)據(jù)類型檢查器。

PropTypes.array

PropTypes.bool

PropTypes.func

PropTypes.number

PropTypes.object

PropTypes.string

PropTypes.symbol

PropTypes.element 元素，其實(shí)就是 JSX 表達(dá)式，上一篇文章有說過 JSX 是 React.createElement 的語法糖，一個(gè) JSX 表達(dá)式實(shí)際上會(huì)生成一個(gè) JS 對(duì)象，在 React 中稱之為元素（Element）。

PropTypes.node 所有可以被渲染的數(shù)據(jù)類型，包括：數(shù)值, 字符串, 元素或者這些類型的數(shù)組。

PropTypes.instanceOf(Message) 某個(gè)類的實(shí)例

PropTypes.oneOf(["News", "Photos"]) 枚舉，屬性值必須為其中的某一個(gè)值。

PropTypes.oneOfType([PropTypes.string, PropTypes.number]) 類型枚舉，屬性必須為其中某一個(gè)類型。

PropTypes.arrayOf(PropTypes.number) 屬性為一個(gè)數(shù)組，且數(shù)組中的元素必須符合指定類型。

PropTypes.objectOf(PropTypes.number) 屬性為一個(gè)對(duì)象，且對(duì)象中的各個(gè)字段的值必須符合指定類型。

PropTypes.any 任何類型

如果你想指定某些屬性為必需屬性，你可以鏈?zhǔn)秸{(diào)動(dòng)其 isRequired 來標(biāo)識(shí)某個(gè)屬性對(duì)于當(dāng)前組件來說是必需的。如果在使用組件時(shí)未指定則會(huì)拋出警告提醒。

另外你還可以通過一個(gè)函數(shù)自定義屬性驗(yàn)證器，如果驗(yàn)證不通過你需要返回一個(gè) Error 實(shí)例，如下所示：

function(props, propName, componentName) {
  if (!/matchme/.test(props[propName])) {
    return new Error(
      "Invalid prop `" + propName + "` supplied to" +
      " `" + componentName + "`. Validation failed."
    );
  }
}

上面咱們了解到組件的屬性有很多種類型，下面說一下各種類型的屬性是如何傳遞給組件的。其實(shí)很簡(jiǎn)單，屬性的值可以用一對(duì)大括號(hào) { } 來包圍，其中可以指定任意的 JavaScript 表達(dá)式。如下所示：

return (
    
)

你也可以用展開操作符 ... 將一個(gè)對(duì)象的所有字段展開，依次作為屬性傳遞給組件，上面的代碼等價(jià)于：

const userInfo = {
    name: "Tom",
    age: 18,
    isActivated: true,
    interests: ["basketball", "music"],
    address: { city: "Beijing", road: "BeiWuHuan" }
}
return 

如果是屬性類型為布爾值，且當(dāng)前屬性值為 true 可以只寫屬性名，如下所示：

用戶自定義的組件內(nèi)可以通過 this.props.children 來獲取一個(gè)特殊的屬性。該屬性與其它屬性的區(qū)別就是傳遞方式不同。

children 屬性的值是指一對(duì)閉合的 JSX 標(biāo)簽中間的內(nèi)容，如下所示：

那么在 UserList 內(nèi)部可以通過 this.props.children 來獲取下面這個(gè) JSX 片段：

該示例中，獲取到的實(shí)際上是一個(gè)包含兩個(gè) User 元素對(duì)象的數(shù)組。

本文主要介紹了在 React 中組件的定義方式，以及幾個(gè)關(guān)鍵的注意事項(xiàng)。另外介紹了組件屬性的作用、屬性默認(rèn)值、屬性類型校驗(yàn)以及如何為組件傳遞屬性。

希望內(nèi)容對(duì)大家有用，如有任何問題和建議可以給我留言，謝謝。