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

二11、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時纔可用。