这几个React冷门API你知道吗？

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情

1.Portal

Portals提供了一个能在父组件DOM结构层级外的DOM节点渲染组件方法，常用模态框等渲染在根节点root之外的需求 ReactDOM.createPortal(child,container) 参数1为要渲染的组件，参数2为渲染的DOM节点，是一个DOM元素。 如图，普通组件都渲染在index.html的root内

import React, { Component } from 'react'
import {createPortal} from 'react-dom'
export default class member extends Component {
  render() {
    return createPortal( 
      <div>Modal</div>
    ,document.body)
  }
}

2.Lazy和Suspense

(1).React.lazy定义 能够像渲染常规组件一样处理动态引入的组件 (2)实现原理：当webpack解析到该语法是，会自动的进行代码分割（code splitting）,分割成一个个文件，当使用到该组件时才会被异步加载 (3)方案 在React.lazy和常用第三方包react-loadable,都是使用该原理，配合webpack进行代码打包拆分达到异步加载，这样首屏渲染速度将大大提高。由于React.lazy不支持服务端渲染，因此react-loadable是不错的选择 （4）如何使用 Suspense将会在组件加载的空档期执行fallback中的内容

import React, { Component , Suspense} from 'react'
const MyComponent =React.lazy(()=>import('./components/MyComponent))
export default class member extends Component {
  render() {
  state={
      isShow:false
  }
    return (
        <div>
        <Suspense fallback={<div>加载中。。。</div>}
           {isShow?<MyComponent />:''} 
          </Suspense>
        </div>
    )
  }
}

3.forwardRef

引用传递（Ref forwarding）是一种通过组件向子组件自动传递引用ref的技术，对于重复使用的组件，可能会用到，例如某些input组件需要控制focus，由于该input已经被包裹在组件中，需要使用引用传递透过该组件获取input的引用，可以透传多层

import React, { Component, createRef, forwardRef} from 'react'
export default class member extends Component {
  myRef=React.createRef()
  render() {
    return (
        <div>
               <Child ref={this.myRef}/>
        </div>
    )
  }
}
const Child= forwardRef((props,ref)=>{
    return <div>
        <input ref={ref} />
    </div> 
})

4.memo

组件仅在它的props发生改变的时候进行重新渲染，通常来时在组件树中React组件，只有有变化就会渲染流程，但是React.memo(),可以让仅某些组件渲染。
与PureComponent区别:
PureComponent只能用于class组件，memo用于function组件
用法：

import {memo} from 'react
const child=memo(()=>{
    return <div>
                memo组件
        </div>
})