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

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

內(nèi)容摘要

• 定義組件兩種方式：類繼承組件、函數(shù)式組件。
• 類繼承組件有更豐富的特性，函數(shù)式組件書寫更簡潔，執(zhí)行效率更高。
• 組件名稱首字母要大寫。
• 屬性是一個組件的外部輸入。
• 屬性值可以通過 {} 設(shè)置任意的 JS 表達(dá)式。
• 屬性是只讀的。
• 屬性可以設(shè)置默認(rèn)值。
• 屬性可以設(shè)置類型，開發(fā)階段 React 會對屬性進(jìn)行類型檢查。
• 為組件所有屬性設(shè)置類型檢查是個好習(xí)慣，有助于協(xié)作開發(fā)。

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

定義組件的幾種姿勢

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

1. 類繼承

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

React 提供了 Component 和 PureComponent 兩個父類，他們之間有一點點區(qū)別，我們在之后的文章中會詳細(xì)介紹，現(xiàn)在你可以將他們同等看待，暫且無須理會。

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

import React, {Component} from 'react';class HelloMessage extends Component {render() {return <div>Hello world.</div>;} }

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

ReactDOM.render(<HelloMessage />, document.querySelector('#root'));

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

import React, {Component} from 'react';class HelloMessageList extends React.Component {render() {return (<div><HelloMessage /><HelloMessage /><HelloMessage /></div>)} }

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

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

2. 函數(shù)式組件

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

import React from 'react';function HelloMessage() {return <div>Hello world.</div>; }// 或者：const HelloMessage = () => <div>Hello world.</div>;

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

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

類繼承 vs 函數(shù)式組件

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

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

• 內(nèi)部狀態(tài)：state
• 生命周期函數(shù)

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

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

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

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

function helloMessage() {return <div>Hello world.</div> }const HelloMessage = helloMessage;ReactDOM.render(<HelloMessage />, mountNode);

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

屬性

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

屬性是組件的輸入

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

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

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

import React, {Component} from 'react';class HelloMessage extends Component {render() {return <div>Hello {this.props.name}.</div>;} }

函數(shù)式：

import React from 'react';function HelloMessage(props) {return <div>Hello {props.name}.</div>; }// 或者：const HelloMessage = props => <div>Hello {props.name}.</div>;

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

import React, {Component} from 'react'; import ReactDOM from 'react-dom';class HelloMessageList extends Component {render() {return (<div><HelloMessage name="Lucy" /><HelloMessage name="Tom" /><HelloMessage name="Jack" /></div>)} }ReactDOM.render(<HelloMessageList />, document.querySelector('#root'));

這樣頁面上會展示出：

Hello Lucy. Hello Tom. Hello Jack.

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

屬性必須為只讀的

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

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

默認(rèn)屬性

通常情況下，我們需要為組件的屬性設(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 屬性時，默認(rèn)展示 Hello World.，也就是說 name 屬性的默認(rèn)值是 World。

一種很容易想到的做法：

<div>Hello {this.props.name || 'World'}.</div>

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

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

import React, {Component} from 'react';class HelloMessage extends Component {render() {return <div>Hello {this.props.name}.</div>;} } HelloMessage.defaultProps = {name: 'World' }

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

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

屬性的類型及校驗

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

import React, {Component} from 'react'; import PropTypes from 'prop-types';class HelloMessage extends Component {render() {return <div>Hello {this.props.name}.</div>;} } HelloMessage.defaultProps = {name: 'World' } HelloMessage.propTypes = {name: PropTypes.string }

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

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

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

• PropTypes.array
• PropTypes.bool
• PropTypes.func
• PropTypes.number
• PropTypes.object
• PropTypes.string
• PropTypes.symbol
• PropTypes.element 元素，其實就是 JSX 表達(dá)式，上一篇文章有說過 JSX 是 React.createElement 的語法糖，一個 JSX 表達(dá)式實際上會生成一個 JS 對象，在 React 中稱之為元素（Element）。
• PropTypes.node 所有可以被渲染的數(shù)據(jù)類型，包括：數(shù)值, 字符串, 元素或者這些類型的數(shù)組。
• PropTypes.instanceOf(Message) 某個類的實例
• PropTypes.oneOf(['News', 'Photos']) 枚舉，屬性值必須為其中的某一個值。
• PropTypes.oneOfType([PropTypes.string, PropTypes.number]) 類型枚舉，屬性必須為其中某一個類型。
• PropTypes.arrayOf(PropTypes.number) 屬性為一個數(shù)組，且數(shù)組中的元素必須符合指定類型。
• PropTypes.objectOf(PropTypes.number) 屬性為一個對象，且對象中的各個字段的值必須符合指定類型。
• PropTypes.any 任何類型

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

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

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

設(shè)置組件的屬性值

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

return (<Username="Tom" // 字符串a(chǎn)ge={18} // 數(shù)值isActivated={true} // 布爾值interests={['basketball', 'music']} // 數(shù)組address={{ city: 'Beijing', road: 'BeiWuHuan' }} // 對象/> )

展開操作符

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

const userInfo = {name: 'Tom',age: 18,isActivated: true,interests: ['basketball', 'music'],address: { city: 'Beijing', road: 'BeiWuHuan' } } return <User {...userInfo} />

值為 true 的屬性的簡寫

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

<inputdisabled // 禁用該輸入框type="text" />

children 屬性

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

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

<UserList><User name="Tom" /><User name="Lucy" /> </UserList>

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

<User name="Tom" /> <User name="Lucy" />

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

總結(jié)

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

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

總結(jié)

以上是生活随笔為你收集整理的玩转 React（四）- 创造一个新的 HTML 标签的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。