React API

createElement()

创基并返回指定类型的 React元素。其中类型参数既可以是DOM标签字符串，也可以是React组件类型,或是React fragment类型

1	React.createElement(type,[props],[...children])

JSX 编写的代码将会被转换成使用 React.createElement() 的形式。

cloneElement()

以 element 元素为样板克隆并返回新的React元素，返回元素的props将新的props与原始的prosp浅合并。新的子元素取代现有的子元素，原始元素的 key 和 ref 将被保留

通过 ref 获取子节点时，将不会意外地从祖先节点上窃取它。相同的 ref 将添加到克隆后的新元素中。

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

isValidElement()

验证对象是否为React元素，返回值为 true or false

React.children

提供用于处理 this.props.children 不透明数据结构的方用方法。

React.Children.map

在每个直接子节点上调用一个函数，并将 this(执行期上下文) 设置为 thisArg。
如果Children 是一个数值，它将被遍历并为数组中的每个子节点调用该函数。
如果子节点为null 或 undefined,则返回对应的 null 或 undefined。

1 2	React.Children.map(children,function[(thisArg)])

如果children 是一个Frgment对象，它将被视为单一子节点的情况处理，不被遍历

React.Children.forEach

和 React.Children.map 类似，但是不会返回数组
1
2
React.Children.forEach(children,function[(thisArg)] )

React.Children.count

返回 children 中组件总数
1
2
React.Children.count(children)

React.Children.only

验证children是否只有一个React元素，有则返回它，无则抛出错误

1 2	React.Children.only(children)

**此方法不接受React.Children.map的返回值，因为它是一个数组

React.Children.toArray

将children 这个复杂的数据结构以数组的形式扁平展开并返回，且为每个子节点分配一个key.想要在渲染函数中操作子节点的集合时，非常实用
1
2
React.Children.toArray(children)

注意：此方法在拉平展开节点列表时，更改key值以保留嵌套数组的语言。即 toArray 会为返回数组中的每个key添加前缀，使每个元素key的范围都限定在此函数入参数组的对象内

React.Fragment

React.Fragment 能在不额外创建DOM元素情况下，让 render方法返回多个元素


render(){
    return (
        <React.Fragment>
          <ChildA />
          <ChildB />
          <ChildC />
        </React.Fragment>
    )
}
// 简写
render(){
    return (
        <>
          <ChildA />
          <ChildB />
          <ChildC />
        </>
    )
}

更多信息

React.createRef

创建一个能通过 ref 属性附加到 React元素的 ref

class Example extends React.Componet {
    constructor(props){
        this.inputRef = React.createRef();
    }
    reder(){
        return <input type="text" ref= {this.inputRef} />；
    }

    componentDidMount(){
        this.inputRef.current.focus()
    }
}

React.forwardRef

React.forwardRef 会创建一个React组件，能将其接受的ref 属性转发到其组件树下的另一个组件中。

转发refs到DOM组件

在高阶组件中转发 refs

React.forwardRef接受渲染函数作为参数。使用props和ref z作为参数调用此函数，返回 React节点

const Example = 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>;

React.lazy

React.lazy()允许你定义一个动态加载组件。有助于减少 bundle的体积，并提高首屏加载效率

此特性需要支持 promise

1	const component = React.lazy(()=> import('./component')) // 动态加载

参考文章

React.Suspense

React.Suspense 可以指定加载指示器（loading indicator），以防其组件树中的某些子组件尚未具备渲染条件。目前，懒加载组件是 <React.Suspense> 支持的唯一用例：

// 该组件是动态加载的
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    // 显示 <Spinner> 组件直至 OtherComponent 加载完成
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

请注意，lazy 组件可以位于 Suspense 组件树的深处——它不必包装树中的每一个延迟加载组件。最佳实践是将 <Suspense> 置于你想展示加载指示器（loading indicator）的位置，而 lazy() 则可被放置于任何你想要做代码分割的地方。

虽然目前尚未支持其它特性，但未来我们计划让 Suspense 支持包括数据获取在内的更多场景。可以在roadmap 中了解相关信息。

React.lazy() 和 <React.Suspense> 尚未在 ReactDOMServer 中支持。这是已知问题，将会在未来解决。