react 高级用法

·  阅读 281
react 高级用法

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

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

image.png

前言

React高阶组件

高阶组件

高阶函数的基本概念

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

高阶组件的基本概念

image.png

本质是利用一个函数,该函数接受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解决,一气呵成。

「欢迎在评论区讨论」

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

分类:
前端
标签: