React顶层API

React.memo

官网-Reactmemo

• 一个高阶组件，实现的是PureComponent的功能

function MyComponent(props) {}
React.memo(MyComponent)

上面会对MyComponent传入的props进行浅比较（PureComponent干了同样的事）

function MyComponent(props){}
React.memo(
    MyComponent,
    function compareFunc(prevProps, nextProps) {
        // 这里对prevProps和nextProps进行比较
        // 返回 boolean
    }
)

memo接收第二个回调函数参数。重写了shouldComponentUpdate方法。但是：返回的true和false是相反的！！！

• 如果prevProps和nextProps，相等，不希望渲染，返回true。shouldComponentUpdate返回的是false。完全相反

forwardRef

官网-reactforwardref

• 转发refs到DOM组件，多用于钩子组件（并不是说只用于钩子组件）

function Func(props) {
    return <div></div>
}

如上面的Func函数组件，如果外部使用到这个组件，是没有办法获取到返回的ref的

React.forwardref(function Func(props, ref) {
    return <div ref={ref}></div>
})

• 高阶组件转发refs

lazy

官网-React.lazy

• 和Suspense组件，不支持浏览器渲染

可以动态加载数组，webpack实现代码分片

• 使用前

import OtherComponent from './OtherComponent';

• 使用后

const OtherComponent = React.lazy(() => import('./OtherComponent'));

注意：因为是一个异步加载的过程，应该在React.Suspense组件中使用，实现一个loading的过程

import React, { Suspense } from "react";
const OtherComponent = React.lazy(() => import("./otherComponent.js"))

function MyComponent() {
    return (
        <Suspense fallback={<div>加载中...</div>}>
            <OtherComponent/>
        </Suspense>
    )
}