React顶层API

1.React.Children相关

1. React.Children.map(props.children, mapFunc)

1）该方法用于在props.children不透明的情况下，安全的遍历组件children。

2）该方法可以平铺嵌套数组的返回值。

import React from 'react';
import ReactDOM from 'react-dom';

function User(props) {
    // props.children取值有三种：
    // 1.无子节点-undefined
    // 2.一个文本/元素-字符串或者对象
    // 3.多个节点-数组
    // 所以使用map可能会有问题，但是React.Children.map解决了这个问题
    return (
        <>
            {
                React.Children.map(props.children, (item,index) => <div key={index}>{item}</div>)
            }
        </>
    )
}

ReactDOM.render(
    <User>
        1
    </User>, window.root)

2. React.Children.forEach(props.children, forEachFn)

遍历，但是不会返回一个数组

3 .React.Children.count(props.children)

返回子组件的个数

4. React.Children.only(children)

判断是否只有一个元素；如果是返回该元素；否则抛出异常。

5. React.Children.toArray(children)

以数组形式扁平展开，并返回。

2.React.Fragment

用于class组件返回多个并列的元素。不想额外添加div等。

render() {
    return (
        <React.Fragment>
            <div>1</div>
             <div>2</div>
        </React.Fragment>
    )
}

还可以用简写形式<></>;或者[,,,,]

3. React.Profiler(V16.9.0)

用于测试React组件渲染的时间和“代价”。

有两个属性：

1. id 指定组件的名称

2. onRender()方法，挂载完的回调函数。

function onRenderCallback(
  id, // 发生提交的 Profiler 树的 “id”
  phase, // "mount" （如果组件树刚加载） 或者 "update" （如果它重渲染了）之一
  actualDuration, // 本次更新 committed 花费的渲染时间
  baseDuration, // 估计不使用 memoization 的情况下渲染整颗子树需要的时间
  startTime, // 本次更新中 React 开始渲染的时间
  commitTime, // 本次更新中 React committed 的时间
  interactions // 属于本次更新的 interactions 的集合
) {
  // 合计或记录渲染时间。。。
}

使用示例：

<Profiler id="Navigation" onRender={onRenderCallback}>
　　<Navigation {...props} />
</Profiler>

4. React.StrictMode(V16.3.0)

用于在开发环境下，进行如下检查：

1. 识别过时的Ref 字符串API的使用

2.识别过时的ContextAPI 的使用

3.警告非安全生命周期的使用

4.警告废弃的findReactDOMNode(）的使用

5.检查一些副作用

代码示例：

      <React.StrictMode>
          <ComponentOne />
          <ComponentTwo />
      </React.StrictMode>

5. React.memo(V16.6)

高阶组件，将函数组件作为参数传入，返回一个集成PureComponent的类组件。

function memo(WrappedComponent) {
  return class extends React.PureComponent {
    render() {
      return (
        <WrappedComponent {...this.props} />
      )
    }
  }
}

6. React.cloneElement

语法：

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

相当于复制element元素后，再给其添加props和children。

<element.type {...element.props} {...props}>
  {children}
</element.type>

7. React.isValidElement(obj)

判断一个对象是否是React元素。

React.isValidElement(<App/>) //true

8. React.createRef和React.forwardRef(V16.3.0)

React.createRef()用于生成ref对象，作为ref属性的值传递。

React.forwardRef((props,ref) => ())用于ref转发。

9. React.Suspense和React.lazy()(V16.6.0)

注意：React.lazy()需要支持Promise。

React.Suspense用于React.lazy()加载的组件外围，用于指定加载指示器。

防止某些组件尚未具备渲染条件。