React中的延迟加载与高级组件模式

// Counter.js
import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  const increment = () => setCount(prevCount => prevCount + 1);
  const decrement = () => setCount(prevCount => prevCount - 1);
  return (
    

      -
      {count}
      +
    

  );
};

export default Counter;

// App.js
import React, { lazy, Suspense } from 'react';

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

const App = () => {
  return (
    

      Loading...
}>
        
      
    

这里，Counter组件只有在首次渲染时才会被加载，同时，Suspense组件用于在加载过程中显示一个加载指示器。

自定义Hook：封装复用逻辑

自定义Hook是React提供的另一种强大的工具，用于提取组件间的公共逻辑。例如，如果需要获取窗口尺寸，可以通过创建一个useWindowSize自定义Hook来实现：

import { useState, useEffect } from 'react';

function useWindowSize() {
  const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });

  useEffect(() => {
    const handleResize = () => {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

此Hook可以在任何需要获取窗口尺寸的地方复用，无需重复编写相同的逻辑。

高阶组件（HOC）：增强组件功能

高阶组件是一种高级模式，用于共享组件之间的逻辑。HOC本身不是React API的一部分，而是一种基于React的组合特性实现的模式。例如，withRouter和connect就是两个常见的HOC例子。

下面是一个简单的HOC示例，该HOC为任何给定的组件自动添加导航栏、侧边栏和页脚：

const withLayout = (WrappedComponent) => (props) => (
  <>
    
    
    
    

使用这个HOC，你可以轻松地为多个页面添加统一的布局结构，如下所示：

const Home = () => (
  Welcome to the Home Page!
);

export default withLayout(Home);