react 高级用法

这是我参与11月更文挑战的第24天，活动详情查看：2021最后一次更文挑战

TIP 👉 英雄者，胸怀大志，腹有良策，有包藏宇宙之机，吞吐天地之志者也。——《三国演义》

前言

React高阶组件

高阶组件

高阶函数的基本概念

• 函数可以作为参数被传递
• 函数可以作为返回值输出

高阶组件的基本概念

本质是利用一个函数，该函数接受react组件，并返回一个新的组件，一个组件经过一个函数以后成为了一个具有新的业务逻辑的组件

const NewComponent = higherOrderComponent(oldComponent)

• 高阶组件就是接受一个组件作为参数并返回一个新组件的函数
• 高阶组件是一个函数，并不是组件

异步组件

传统模式：渲染组件-> 请求数据 -> 再渲染组件。

异步模式：请求数据-> 渲染组件。

开启Suspense模式

function Index(){ 
    const [ userInfo , setUserInfo ] = React.useState(0) 
    React.useEffect(()=>{ 
        /* 请求数据交互 */ 
        getUserInfo().then(res=>{ 
            setUserInfo(res) 
        }) 
    },[]) 
    return 
    <div> 
        <h1>{userInfo.name}</h1>; 
    </div> 
} 
export default function Home(){ return <div> <Index /> </div> }

模拟一个简单的Suspense

export class Suspense extends React.Component{ 
    state={ isRender: true } 
    componentDidCatch(e){ 
    /* 异步请求中，渲染 fallback */ 
    this.setState({ isRender:false }) 
    const { p } = e Promise.resolve(p).then(()=>{ 
        /* 数据请求后，渲染真实组件 */ 
        this.setState({ isRender:true }) }) 
    } 
    render(){ 
        const { isRender } = this.state 
        const { children , fallback } = this.props 
        return isRender ? children : fallback 
    } 
}

React.lazy基本使用

const LazyComponent = React.lazy(()=>import('./text'))

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

Suspense能解决什么？

• Suspense让数据获取库与 React 紧密整合。如果一个数据请求库实现了对 Suspense 的支持，那么，在 React 中使用 Suspense 将会是自然不过的事。
• Suspense能够自由的展现，请求中的加载效果。能让视图加载有更主动的控制权。
• Suspense能够让请求数据到渲染更流畅灵活，我们不用在componentDidMount请求数据，再次触发render，一切交给Suspense解决，一气呵成。

「欢迎在评论区讨论」

希望看完的朋友可以给个赞，鼓励一下