React從入門到精通系列之(21)React頂級API

張亞濤發表於2016-12-16
ReactAPI

二十一、React頂級API

全域性變數React是React庫的入口。如果你通過一個script標籤使用的React，那麼它的頂級API都會在全域性環境下一個名稱為React的變數上。如果你是通過npm使用的ES6，你可以這樣寫：import React from `react`;。你是通過npm使用的ES5，你可以這樣寫var React = require(`react`);。

總覽

Components

React元件可以讓你將UI部分獨立出來，成為可重用的部分。從而單獨考慮分離出來的每一部分功能。可以通過React.Component或者React.PureComponent來建立React元件。

  • React.Component

  • React.PureComponent

如果你不是用ES6的class功能,你可以使用以下代替:

  • React.createClass()

建立一個React元素

我們推薦使用JSX來定義UI。每個JSX元素都是React.createElement(component, props, children)的語法糖。使用JSX就意味著你不需要直接呼叫下面的方法:

  • React.createElement()

  • React.createFactory()

處理React元素

React同時還為處理元素提供了一些其他APIs:

  • React.cloneElement()

  • React.isValidElement()

  • React.Children

使用PropTypes進行型別檢測

你可以使用React.PropTypes為一個元件上的props進行型別檢測。

  • React.PropTypes

  • React.PropTypes.array

  • React.PropTypes.bool

  • React.PropType.func

  • React.PropTypes.number

  • React.PropTypes.object

  • React.PropTypes.string

  • React.PropTypes.symbol

  • React.PropTypes.node

  • React.PropTypes.element

  • React.PropTypes.instanceOf()

  • React.PropType.oneOf()

  • React.PropType.oneOfType()

  • React.PropType.arrayOf()

  • React.PropType.objectOf()

  • React.PropTypes.shape()

  • React.PropTypes.any

以上的驗查器預設都是可選的。你可以使用isRequired來標記一個必填屬性。如果使用者沒有根據指定型別傳入props或者壓根沒有傳入props的話則會給出一個錯誤提示。

外掛

如果你使用了react-with-addons.js,那麼React元件可以通過變數React.addons使用。

  • React.addons

使用方法

React.Component

React.Component是所有React元件的基類,當使用ES6 classes定義一個元件的用法如下:

class Greeting extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>
    }
}
ReactDOM.render(
    <Greeting name={"zhangyatao"}/>,
    document.getElementById(`root)
)

React.PureComponet

React.PureComponent表面上很像React.Component,但是它實現了shouldComponentUpdate()對props和state的進行淺比較。

如果你React元件的render()方法每次使用相同的props和state並且渲染出相同的結果。這種情況你可以使用React.PureComponent來提升效能。

提示

React.PureComponent的shouldComponentUpdate()僅會對物件進行淺比較,如果物件包含複雜的資料結構,對於深層次的差異有可能會產生false-negatives(假陰性,相當於醫院中的錯診)。

React.createClass()

React.createClass(specification)

如果你還沒有使用ES6,你可以使用React.createClass()來建立一個元件類。

var Greeting = React.createClass({
    setInitialState: function() {
        return {value: 0};
    },
    render: function() {
        return <h1>Hello, {this.props.name}</h1>;
    }
})

React.createElement()

React.ceateElement(
    type,
    [props],
    [...children]
)

通過傳入的型別和屬性以及子元素來建立並返回一個新的React元素。其中type引數可以傳入一個html標籤名稱字串(例如`div`或者`span`)，或者傳入一個React元件(一個類元件或功能性元件)。

React.DOM提供了DOM元件可以比較便捷地通過React.createElement()包裝的方法。例如，React.DOM.a(...)就是React.createElement(`a`,...)的便捷包裝。這種方法可以是歷史版本遺留產物，所以我們推薦你是用JSX或者使用React.createElement()來直接代替。

使用JSX寫的程式碼會被轉換為React.createElement()。如果你使用了JSX的話，通常不需要直接呼叫React.createElement()。

React.cloneElement()

React.cloneElement(
    element,
    [props],
    [...children]
)

傳入一個React元素進行克隆並返回一個新的React元素。

React.createFactory()

React.createFactory(type)

返回一個生成給定型別的React元素的函式。就像React.createElement()，其中type引數可以傳入一個html標籤名稱字串(例如`div`或者`span`)，或者傳入一個React元件型別(一個型別元件或功能性元件)。

這種方法可以是一個歷史版本遺留產物，我們推薦你是用JSX或者使用React.createElement()來直接代替。

使用JSX寫的程式碼會被轉換為React.createElement()。如果你使用了JSX的話，通常不需要直接呼叫React.createElement()。

React.isValidElement()

React.isValidElement(Object)

驗證一個物件是否是React元素，返回true或者false。

React.Children

React.children提供了處理this.props.children中那些不透明的資料結構的一些工具函式。

React.Children.map
React.Children.map(children, function[(thisArg))

React.Children.forEach

React.Children.forEach(children, function[(thisArg)])

和React.Children.map相同，只不過不會返回一個陣列。

React.Children.count

React.Children.count(children)

返回children中的元件總數。

React.Children.only
React.Children.only(children)

然會children中的只出現一次的子元素。否則丟擲。

React.Children.toArray
React.Children.toArray(children)

將子元素中的不透明資料結構作為一個一維陣列返回。如果你想在render方法中操作children集合，特別是如果你想在傳遞它之前重新排序或切割this.props.children，這歌方法將非常有用。

React.PropTypes

React.PropTypes是一系列型別驗證器的集合，可以與元件的propTypes物件一起使用，以驗證傳遞到元件的props。

React.PropTypes.array
React.PropTypes.array

驗證prop是一個陣列型別。

React.PropTypes.bool
React.PropTypes.bool

驗證prop是一個布林值。

React.PropTypes.func
React.PropTypes.func

驗證prop是一個函式。

React.PropTypes.number
React.PropTypes.number

驗證prop是一個數字。

React.PropTypes.object
React.PropTypes.object

驗證prop是一個物件。

React.PropTypes.string
React.PropTypes.string

驗證prop是一個字串。

React.PropTypes.symbol
React.PropTypes.symbol

驗證prop是一個symbol。

React.PropTypes.node
React.PropTypes.node

驗證prop是一個可以渲染的東西：數字，字串，元素 或者包含這些型別的陣列（或片段）。

React.PropTypes.element
React.PropTypes.element

驗證prop是一個React元素。

React.PropTypes.instanceOf()
React.PropTypes.instanceOf(class)

驗證prop是否是class的例項，使用Javascript中的instaceof操作符。

React.PropTypes.oneOf()
React.PropTypes.oneOf(arrayOfValues)

通過將其視為列舉來驗證prop是否受限於特定值。

MyComponent.propTypes = {
    optionalEnum: React.PropTypes.oneOf([`News`, `Photos`]);
}
React.PropTypes.oneOfType()
React.PropTypes.oneOfType()

驗證prop是可以是多種型別之一的物件。

MyComponent.propTypes = {
    optionalUnion: React.PropTypes.oneOfType([
        React.PropTypes.string,
        React.PropTypes.number,
        React.PropTypes.instanceOf(Message)
    ]),
}
React.PropTypes.arrayOf()
React.PropTypes.arrayOf(propType)

驗證porp是一個特定型別的陣列。

MyComponent.propTypes = {
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
}
React.PropTypes.objectOf()
React.PropTypes.objectOf(propType)

驗證prop是具有某個型別的屬性值的物件。

MyComponent.propTypes = {
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
}
React.PropTypes.shape()
React.PropTypes.shape(object)

驗證prop是採取特定形狀的物件。

MyComponent.propTypes = {
    optionalObjectWithShape: React.PropTypes.shape({
        color: React.PropTypes.string,
        fontSize: React.PropTypes.number
    }),
}
React.PropTypes.any
React.PropTypes.any

驗證prop具有任何資料型別的值。 通常後面是isRequired。

MyComponent.propTypes = {
    requiredAny: React.PropTypes.any.isRequired,
}
isRequired
propTypes.isRequired

您可以使用isRequired連結上述任何驗證器，以確保在未提供prop的情況下顯示警告。

MyComponent.propTypes = {
    requiredFunc: React.PropTypes.func.isRequired,
}

React.addons

React.addons

React.addons匯出一系列附加元件，只有在使用react-with-addons.js時才可用。

相關文章