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()加载的组件外围，用于指定加载指示器。

巴特西