react延迟加载

本文主要是介绍react延迟加载，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1. 延迟加载---延迟对象或资源的加载或初始化，到真正需要它们的时候才加载出来

React很容易实现延迟加载。你需要做的就是使用React.lazy包动态导入语句import()

  Counter.js文件的加载在App.js中延迟加载此counter

// Counter.js
import { useState } from 'React'

const Counter = () => {
  const [count, setCount] = useState('');

  const increment = () => setCount(count => count + 1);
  const decrement = () => setCount(count => count - 1);

  return (
    <div>
      <button onClick={decrement}> - <button>
      <span> {count} <span>
      <button onClick={increment}> + <button>
    </div>
  );
};

在App.js中延迟加载此counter 

// App.js
import { lazy } from 'React'

const Counter = lazy(() => import('./Counter'));

const App = () => {
  return (
    <div>
    <Suspense fallback={<Loader />}>
        <Counter />
    </Suspense>
    </div>
  );
};

Counter仅在需要时才会延迟加载，并且在加载时显示Loader组件 

 2. 自定义钩子 

假设你需要访问窗口尺寸，那么可以创建一个useWindowSize钩子来解决问题

import { useState, useEffect } from 'react'

function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: 0,
    height: 0,
  })

  useEffect(() => {
    const handler = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      })
    }

    handler()
    window.addEventListener('resize', handler)

    // Remove event listener on cleanup
    return () => {
      window.removeEventListener('resize', handler)
    }
  }, [])

  return windowSize
}

HOC是React用于重用组件逻辑（组件的重组）的高级技术，它允许你接受组件并返回包含HOC的功能或数据的新组件 

withRouter()或connect()是一些常见HOC示例  

让我们来创建withLayout HOC，它接受Element并自动添加Navbar、Sidebar和Footer

withLayout函数 

const withLayout = (Element) => {
    return (props) => (
        <>
            <Navbar />
            <Sidebar/>
            <Element {...props} />
            <Footer />
        </>
    );
}

 使用HOC

const Home = () => {
    return (
        <h1>
            I am Home!
        </h1>
    )
}

export default withLayout(Home)

这篇关于react延迟加载的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！