This is the 24th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

TIP 👉 A hero is a man who has great ambition, good policy in his belly, the opportunity to contain the universe and swallow the ambition of heaven and earth. — Romance of The Three Kingdoms

preface

React Advanced components

High order component

Basic concepts of higher order functions

  • Functions can be passed as arguments
  • The function can be output as a return value

Basic concepts of higher-order components

The essence is to use a function that takes the React component and returns a new component that, after passing through a function, becomes a component with new business logic

const NewComponent = higherOrderComponent(oldComponent)
Copy the code
  • A higher-order component is a function that takes a component as an argument and returns a new component
  • A higher-order component is a function, not a component

Asynchronous components

Traditional mode: Render component -> Request data -> Render component again.

Asynchronous mode: Request data -> Render components.

Open Suspense Mode

function Index(){ 
    const [ userInfo , setUserInfo ] = React.useState(0) 
    React.useEffect(() = >{ 
        /* Request data interaction */ 
        getUserInfo().then(res= >{ 
            setUserInfo(res) 
        }) 
    },[]) 
    return 
    <div> 
        <h1>{userInfo.name}</h1>; 
    </div> 
} 
export default function Home(){ return <div> <Index /> </div> }
Copy the code

Model a simple Suspense

export class Suspense extends React.Component{ 
    state={ isRender: true } 
    componentDidCatch(e){ 
    /* In asynchronous request, render fallback */ 
    this.setState({ isRender:false }) 
    const { p } = e Promise.resolve(p).then(() = >{ 
        /* Render the real component after the data request */ 
        this.setState({ isRender:true})})}render(){ 
        const { isRender } = this.state 
        const { children , fallback } = this.props 
        return isRender ? children : fallback 
    } 
}
Copy the code

React.lazy is basically used

const LazyComponent = React.lazy(() = >import('./text'))
Copy the code
const LazyComponent = React.lazy(() = > import('./test.js')) 
export default function Index(){ 
    return <Suspense fallback={<div>loading...</div>} > <LazyComponent /> </Suspense> 
}
Copy the code

What does Suspense solve?

  • Suspense makes data capture libraries tightly integrated with React. Suspense will be a natural thing to use in React if a data request library implements support for Suspense.
  • Suspense is free to show loading effects in requests. Allows you to have more active control over view loading.
  • Suspense makes data to render more fluid and flexible. We don’t have to ask for data at componentDidMount and trigger render again. Suspense works out all at once.

“Feel free to discuss in the comments section.”

Hope to finish watching friends can give a thumbs-up, encourage once