二十一、React顶级API
全局变量React@H_502_4@是React库的入口。如果你通过一个script标签使用的React，那么它的顶级API都会在全局环境下一个名称为React的变量上。如果你是通过npm使用的ES6，你可以这样写：import React from 'react';@H_502_4@。你是通过npm使用的ES5，你可以这样写var React = require('react');@H_502_4@。
总览
Components
React组件可以让你将UI部分独立出来，成为可重用的部分。从而单独考虑分离出来的每一部分功能。可以通过React.Component@H_502_4@或者React.PureComponent@H_502_4@来创建React组件。
如果你不是用ES6的class功能,你可以使用以下代替:
React.createClass()@H_502_4@
创建一个React元素
我们推荐使用JSX@H_502_4@来定义UI。每个JSX元素都是React.createElement(component,props,children)@H_502_4@的语法糖。使用JSX@H_502_4@就意味着你不需要直接调用下面的方法:
处理React元素
React@H_502_4@同时还为处理元素提供了一些其他APIs:
使用PropTypes进行类型检测
你可以使用React.PropTypes@H_502_4@为一个组件上的props进行类型检测。
React.PropTypes@H_502_4@React.PropTypes.array@H_502_4@React.PropTypes.bool@H_502_4@React.PropType.func@H_502_4@React.PropTypes.number@H_502_4@React.PropTypes.object@H_502_4@React.PropTypes.string@H_502_4@React.PropTypes.symbol@H_502_4@React.PropTypes.node@H_502_4@React.PropTypes.element@H_502_4@React.PropTypes.instanceOf()@H_502_4@React.PropType.oneOf()@H_502_4@React.PropType.oneOfType()@H_502_4@React.PropType.arrayOf()@H_502_4@React.PropType.objectOf()@H_502_4@React.PropTypes.shape()@H_502_4@React.PropTypes.any@H_502_4@
以上的验查器默认都是可选的。你可以使用isrequired@H_502_4@来标记一个必填属性。如果用户没有根据指定类型传入props或者压根没有传入props的话则会给出一个错误提示。
插件
如果你使用了react-with-addons.js@H_502_4@,那么React组件可以通过变量React.addons@H_502_4@使用。
React.addons@H_502_4@
使用方法
@H_403_226@React.ComponentReact.Component@H_502_4@是所有React组件的基类,当使用ES6 classes@H_502_4@定义一个组件的用法如下:
class Greeting extends React.Component {
render() {
return <h1>Hello,{this.props.name}</h1>
}
}
ReactDOM.render(
<Greeting name={"zhangyatao"}/>,document.getElementById('root)
)
@H_403_226@React.PureComponet
React.PureComponent@H_502_4@表面上很像React.Component@H_502_4@,但是它实现了shouldComponentUpdate()@H_502_4@对props和state的进行浅比较。
如果你React组件的render()@H_502_4@方法每次使用相同的props和state并且渲染出相同的结果。这种情况你可以使用React.PureComponent@H_502_4@来提升性能。
@H_403_226@提示
React.PureComponent@H_502_4@的shouldComponentUpdate()@H_502_4@仅会对对象进行浅比较,如果对象包含复杂的数据结构,对于深层次的差异有可能会产生false-negatives@H_502_4@(假阴性,相当于医院中的错诊)。
@H_403_226@React.createClass()
React.createClass(specification)
如果你还没有使用ES6,你可以使用React.createClass()@H_502_4@来创建一个组件类。
var Greeting = React.createClass({
setInitialState: function() {
return {value: 0};
},render: function() {
return <h1>Hello,{this.props.name}</h1>;
}
})
@H_403_226@React.createElement()
React.ceateElement(
type,[props],[...children]
)
通过传入的类型和属性以及子元素来创建并返回一个新的React元素@H_502_4@。其中type参数可以传入一个html标签名称字符串(例如'div'或者'span')，或者传入一个React组件@H_502_4@(一个类组件或功能性组件)。
React.DOM@H_502_4@提供了DOM组件可以比较便捷地通过React.createElement()@H_502_4@包装的方法。例如，React.DOM.a(...)@H_502_4@就是React.createElement('a',...)@H_502_4@的便捷包装。这种方法可以是历史版本遗留产物，所以我们推荐你是用JSX或者使用React.createElement()@H_502_4@来直接代替。
使用JSX写的代码会被转换为React.createElement()@H_502_4@。如果你使用了JSX的话，通常不需要直接调用React.createElement()@H_502_4@。
@H_403_226@React.cloneElement()
React.cloneElement(
element,[...children]
)
传入一个React元素进行克隆并返回一个新的React元素。
@H_403_226@React.createFactory()
React.createFactory(type)
返回一个生成给定类型的React元素的函数。就像React.createElement()@H_502_4@，其中type参数可以传入一个html标签名称字符串(例如'div'或者'span')，或者传入一个React组件@H_502_4@类型(一个类型组件或功能性组件)。
这种方法可以是一个历史版本遗留产物，我们推荐你是用JSX或者使用React.createElement()@H_502_4@来直接代替。
使用JSX写的代码会被转换为React.createElement()@H_502_4@。如果你使用了JSX的话，通常不需要直接调用React.createElement()@H_502_4@。
@H_403_226@React.isValidElement()
React.isValidElement(Object)
验证一个对象是否是React元素，返回true@H_502_4@或者false@H_502_4@。
@H_403_226@React.Children
React.children提供了处理this.props.children@H_502_4@中那些不透明的数据结构的一些工具函数。
React.Children.map
React.Children.map(children,function[(thisArg))@H_403_226@React.Children.forEach
React.Children.forEach(children,function[(thisArg)])
和React.Children.map@H_502_4@相同，只不过不会返回一个数组。
React.Children.count(children)
返回children中的组件总数。
React.Children.only
React.Children.only(children)
然会children中的只出现一次的子元素。否则抛出。
React.Children.toArray
React.Children.toArray(children)
将子元素中的不透明数据结构作为一个一维数组返回。如果你想在render@H_502_4@方法中操作children集合，特别是如果你想在传递它之前重新排序或切割this.props.children，这歌方法将非常有用。
@H_403_226@React.PropTypes
React.PropTypes@H_502_4@是一系列类型验证器的集合，可以与组件的propTypes@H_502_4@对象一起使用，以验证传递到组件的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@H_502_4@操作符。
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@H_502_4@。
MyComponent.propTypes = {
requiredAny: React.PropTypes.any.isrequired,}
isrequired
propTypes.isrequired
您可以使用isrequired链接上述任何验证器，以确保在未提供prop的情况下显示警告。
MyComponent.propTypes = {
requiredFunc: React.PropTypes.func.isrequired,}
@H_403_226@React.addons
React.addons
React.addons@H_502_4@导出一系列附加组件，只有在使用react-with-addons.js@H_502_4@时才可用。
