201-React顶级API
一、概述
React是React库的入口点。如果您从<script>标记加载React，则这些顶级API可在React全局中使用。如果你使用npm的ES6，你可以写：import React from 'react'，如果你使用npm的ES5，你可以写：var React = require('react').
二、简介
2.1、Components
React组件让你可以将UI分成独立的，可重用的部分，并且可以独立思考每个部分。 React组件可以通过继承React.Component或React.PureComponent来定义。
2.2、创建React元素
建议使用JSX来描述你的用户界面应该是什么样子。每个JSX元素只是用于调用React.createElement（）的语法糖。如果您使用JSX，通常不会直接调用以下方法。
2.3、转换元素
React提供了几个用于操作元素的API：
2.4、片段
React还提供了一个组件，用于在没有包装的情况下呈现多个元素。
2.5、Refs
三、参考使用
3.1、React.Component
class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}3.2、React.PureComponent
几乎与React.Component一致，区别是React.Component没有实现shouldComponentUpdate()，React.PureComponent用浅道具和状态比较来实现它。
如果您的React组件的render（）函数在给定相同的道具和状态的情况下呈现相同的结果，则可以使用React.PureComponent在某些情况下提高性能。
注意：React.PureComponent的shouldComponentUpdate（）仅浅显地比较对象。如果这些包含复杂的数据结构，则可能会对更深的差异产生假阴性结果。只有在您期望拥有简单的道具和状态时才可以扩展PureComponent，或者在知道深层数据结构发生变化时使用forceUpdate（）。或者，考虑使用不可变对象以便快速比较嵌套数据。 此外，React.PureComponent的shouldComponentUpdate（）会跳过整个组件子树的prop更新。确保所有儿童组件都是“纯”的。
3.3、createElement()
React.createElement( type, [props], [...children] )
3.4、cloneElement()
React.cloneElement( element, [props], [...children] )
createFactory()
React.createFactory(type)返回一个生成给定类型的React元素的函数。与React.createElement（）类似，type参数可以是标记名称字符串（例如'div'或'span'），React组件类型（类或函数）或React片段类型。这个帮助器被认为是遗留的，我们鼓励您直接使用JSX或直接使用React.createElement（）。
3.5、isValidElement()
React.isValidElement(object)验证对象是一个React元素。返回true或false3.6、React.Children
React.Children提供了用于处理this.props.children不透明数据结构的实用程序。
React.Children.map
React.Children.map(children, function[(thisArg)])：调用此设置为thisArg的子项中包含的每个直接子项的函数。如果children是keyed片段或数组，它将被遍历：该函数永远不会传递容器对象。如果children为null或未定义，则返回null或undefined，而不是数组。
React.Children.forEach
React.Children.forEach(children, function[(thisArg)])：像React.Children.map（）一样，但不返回数组。
React.Children.count
React.Children.count(children)：返回子组件的总数，等于调用传递给map或forEach的回调次数。
React.Children.only
React.Children.only(children)：验证孩子只有一个孩子（一个React元素）并返回它。否则，此方法会引发错误。
React.Children.toArray
React.Children.toArray(children)：将子不透明数据结构作为平面数组返回给每个孩子。如果你想在你的渲染方法中操作子集合，这很有用，特别是如果你想在传递它之前重新排序或者分割this.props.children。
3.7、React.Fragment
React.Fragment组件允许您在render（）方法中返回多个元素而不创建额外的DOM元素：
render() {
return (
<React.Fragment>
Some text.
<h2>A heading</h2>
</React.Fragment>
);
}3.8、React.createRef
React.createRef创建一个可以通过ref属性附加到React元素的引用。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
render() {
return <input type="text" ref={this.inputRef} />;
}
componentDidMount() {
this.inputRef.current.focus();
}
}3.9、React.forwardRef
React.forwardRef创建一个React组件，它将它接收的ref属性转发给树中下面的另一个组件。这种技术并不常见，但在两种情况下特别有用：
React.forwardRef接受渲染函数作为参数。 React将使用props和ref作为两个参数来调用这个函数。这个函数应该返回一个React节点。
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;