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来定义。

• React.Component
• React.PureComponent

2.2、创建React元素

　　建议使用JSX来描述你的用户界面应该是什么样子。每个JSX元素只是用于调用React.createElement（）的语法糖。如果您使用JSX，通常不会直接调用以下方法。

• createElement()
• createFactory()

2.3、转换元素

　　React提供了几个用于操作元素的API：

• cloneElement()
• isValidElement()
• React.Children

2.4、片段

　　React还提供了一个组件，用于在没有包装的情况下呈现多个元素。

• React.Fragment

2.5、Refs

• React.createRef
• React.forwardRef

三、参考使用

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或false

3.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属性转发给树中下面的另一个组件。这种技术并不常见，但在两种情况下特别有用：

• Forwarding refs to DOM components
• Forwarding refs in higher-order-components

　　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>;