React.memo

Website – Reactmemo

  • aHigh order componentAnd what it does isPureComponentThe function of the
function MyComponent(props) {}
React.memo(MyComponent)
Copy the code

This makes a shallow comparison of the props passed in by MyComponent (PureComponent does the same thing)

function MyComponent(props){}
React.memo(
    MyComponent,
    function compareFunc(prevProps, nextProps) {
        // Compare prevProps to nextProps
        / / returns a Boolean})Copy the code

Memo receives the second callback function argument. Override shouldComponentUpdate method. But: returns true and false are opposite!!

  • Return true if prevProps and nextProps, equal, do not want to render. ShouldComponentUpdate returns false. The opposite

forwardRef

Website – reactforwardref

  • Forwarding refs to DOM components, mostly for hook components (not just hook components)
function Func(props) {
    return <div></div>
}
Copy the code

The Func function component above has no way of retrieving the returned ref if it is used externally

React.forwardref(function Func(props, ref) {
    return <div ref={ref}></div>
})
Copy the code
  • Higher-order components forward refs

lazy

Website – the React. Lazy

  • Suspense components and Don’t support browser rendering

Arrays can be loaded dynamically, and WebPack implements code sharding

  • Before using
import OtherComponent from './OtherComponent';
Copy the code
  • After using
const OtherComponent = React.lazy(() = > import('./OtherComponent'));
Copy the code

Note: Since it is an asynchronous loading process, use it in React.Suspense components to implement a loading process

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

function MyComponent() {
    return (
        <Suspense fallback={<div>Loading in...</div>} ><OtherComponent/>
        </Suspense>)}Copy the code