一、简介

React库提供了如下API，可间接调用。

二、创立元素
1、createElement()

  • 性能：创立 React 元素。

    // 函数原型React.createElement(    type,    [props],    [...children])

  • 两种创立元素的形式：

    • 应用JSX来创立元素，不须要调用createElement()，预处理器babel会解决

      // 应用jsx创立元素和组件class Hello extends React.Component {    render() {        return <div>Hello {this.props.toWhat}</div>;    }}ReactDOM.render(    <Hello toWhat="World" />,    document.getElementById('root'));

    • 不应用JSX来创立元素，就须要调用createElement()

      // 不应用jsx创立元素和组件class Hello extends React.Component {    render() {        return React.createElement('div', null, `Hello ${this.props.toWhat}`);    }}ReactDOM.render(    React.createElement(Hello, { toWhat: 'World' }, null),    document.getElementById('root'));
三、元素操作API
1、cloneElement()

  • 性能：复制生成一个新元素。

    // 函数原型React.cloneElement(    element,    [config],    [...children])// config ：含新的 props，key 或 ref

  • 等同于jsx

    React.cloneElement()// 简直等同于上面jsx写法< element.type {...element.props } {...props }> { children }</element.type >
2、isValidElement()

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

React.isValidElement(object)
四、子元素操作API

React.Children性能：能够遍历拜访子元素，同时能够拜访到属性 this.props.children ，无法访问到的数据。

1、React.Children.map

  • 性能：遍历子元素，并返回一个数组。函数原型如下：

    React.Children.map(children, function)

  • 应用实例：遍历并复制子元素

    const Child = () => (    <div>child</div>)class App extends React.Component {    render() {        const template1 = React.Children.map(this.props.children, (child) => {            return React.cloneElement(child);        });        return template1;    }}
2、React.Children.forEach

  • 性能：与React.Children.map一样作用，区别是返回值不是数组。

    React.Children.forEach(children, function)
3、React.Children.count

  • 性能：返回 children 中的组件总数量，等同于通过 map 或 forEach 调用回调函数的次数。

    React.Children.count(children)
4、React.Children.only

  • 性能：验证 children 是否只有一个子节点(React元素)，如果有则返回它，否则此办法会抛出谬误。

    React.Children.only(children)
  • 留神点：React.Children.only() 不承受 React.Children.map() 的返回值，因为它是一个数组而并不是 React 元素。
五、组件相干API
1、React.Component

  • 性能：应用 ES6 classes 形式定义 React 组件的基类：

    class Greeting extends React.Component {    render() {        return <h1>Hello, {this.props.name}</h1>;    }}
2、React.PureComponent
  • 性能：与React.Component 一样，都能够继承他们来实现组件。
  • 区别：React.PureComponent 实现了 shouldComponentUpdate()，而 React.Component 没有。React.PureComponent 只有在 prop 和 state 数据变动时，才进行组件渲染，可用于组件性能优化。

  • 两点留神：

    • 确定 prop 和 state 数据是否变动时，会进行比拟操作，这个比拟操作只适宜简略数据结构，不适用于简单数据结构，请确保 prop 和state 对象不是简单数据结构。
    • 确保 子组件 也都继承 React.PureComponent。
3、React.memo
  • 性能：是一个高阶组件，能够包裹其余组件来进步性能。

  • 原理：React.memo 会监控组件的 props 属性的变动，只有变动才从新渲染，否则跳过渲染操作。

    const MyComponent = React.memo(function MyComponent(props) {    /* 应用 props 渲染 */});

  • 两点留神：

    • 如果 React.memo 组件中应用了 useState、useContext，那么state、context 数值扭转时，React.memo 组件也会从新渲染。

    • React.memo 无奈监控简单数据结构props的变动，须要自定义比拟函数来实现对简单数据结构的监控。

      function MyComponent(props) {    /* 应用 props 渲染 */}function areEqual(prevProps, nextProps) {    /*    如果把 nextProps 传入 render 办法的返回后果与    将 prevProps 传入 render 办法的返回后果统一则返回 true，    否则返回 false    */}export default React.memo(MyComponent, areEqual);
六、提早加载

渲染页面时，能够不加载未用到的组件。

1、React.lazy

  • 性能：提早加载未用到的组件，依赖 React.Suspense

    // 这个组件是动静加载的const SomeComponent = React.lazy(() => import('./SomeComponent'));
  • 留神：应用 React.lazy 的动静引入个性须要 JS 环境反对 Promise。在 IE11 及以下版本的浏览器中须要通过引入 polyfill 来应用该个性。
2、React.Suspense
  • 名称：指定加载指示器（loading indicator）

  • 性能：配合上 React.lazy 实现提早加载。

    // 该组件是动静加载的const OtherComponent = React.lazy(() => import('./OtherComponent'));function MyComponent() {    return (        // 显示 <Spinner> 组件直至 OtherComponent 加载实现        <React.Suspense fallback={<Spinner />}>            <div>                <OtherComponent />            </div>        </React.Suspense>    );}
七、其余API
1、React.Fragment
  • 性能：不额定创立 DOM 元素的状况下，让 render() 返回多个元素。应用详情，看这里
2、React.createRef
  • 性能：创立 ref 对象，指向组件，让其余组件不便拜访其外部数据和办法。应用详情，看这里
3、React.forwardRef
  • 性能：React.forwardRef 会创立一个React组件，新组件能够把传递进来的 ref 对象，转发给子元素。
  • 两种应用场景：转发 refs 到 DOM 组件 、在高阶组件中转发 refs。详情，看这里
八、参考文档：
  • React的顶层API有哪些？