React 应用程序的基本设计模式：升级您的组件游戏-js教程-PHP中文网

Essential Design Patterns for React Apps: Leveling Up Your Component Game

如果您已经进入 React 世界一段时间，您可能听说过“这只是 JavaScript”这句话。虽然这是事实，但这并不意味着我们不能从一些经过验证的模式中受益，使我们的 React 应用程序更易于维护、可重用并且使用起来更加愉快。让我们深入研究一些基本的设计模式，这些模式可以让你的 React 组件从“meh”到“marvelous”！

为什么设计模式在 React 中很重要

在我们开始之前，让我们先解决一下房间里的大象：为什么要费心设计模式呢？好吧，我的 React 爱好者同胞，设计模式就像编码世界的秘方。它们是针对常见问题的经过实战检验的解决方案，可以：

使您的代码更具可读性和可维护性
促进整个应用程序的可重用性
用优雅的解决方案解决复杂问题
帮助您更有效地与其他开发者交流想法

现在我们已经达成共识，让我们探索一些模式，让您的 React 组件比刚打蜡的跑车更加闪亮！

1. 组件组合模式

React 的组件模型本身就已经是一种强大的模式，但通过组合更进一步可以带来更灵活和可重用的代码。

// Instead of this:
const Button = ({ label, icon, onClick }) => (
  <button onClick={onClick}>
    {icon && <Icon name={icon} />}
    {label}
  </button>
);

// Consider this:
const Button = ({ children, onClick }) => (
  <button onClick={onClick}>{children}</button>
);

const IconButton = ({ icon, label }) => (
  <Button>
    <Icon name={icon} />
    {label}
  </Button>
);

登录后复制

为什么它很棒：

更灵活和可重用的组件
更容易定制和扩展
遵循单一责任原则

专业提示：将您的组件视为乐高积木。它们的模块化程度和可组合性越高，您可以构建的结构就越令人惊叹！

2. 容器/展示模式

此模式将组件的逻辑与其表示分离，使其更容易推理和测试。

// Container Component
const UserListContainer = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUsers().then(setUsers);
  }, []);

  return <UserList users={users} />;
};

// Presentational Component
const UserList = ({ users }) => (
  <ul>
    {users.map(user => (
      <li key={user.id}>{user.name}</li>
    ))}
  </ul>
);

登录后复制

为何如此震撼：

明确的关注点分离
更容易测试和维护
促进展示组件的可重用性

请记住：容器就像戏剧的后台工作人员，处理所有幕后工作，而演示组件则是演员，只专注于为观众提供好看的外观。

3. 高阶组件（HOC）模式

HOC 是接受组件并返回带有一些附加功能的新组件的函数。它们就像您的组件的电源！

const withLoader = (WrappedComponent) => {
  return ({ isLoading, ...props }) => {
    if (isLoading) {
      return <LoadingSpinner />;
    }
    return <WrappedComponent {...props} />;
  };
};

const EnhancedUserList = withLoader(UserList);

登录后复制

为什么这么酷：

允许跨不同组件重用代码
保持组件清洁和集中
可以组合进行多项增强

警告：虽然 HOC 很强大，但如果过度使用，它们可能会导致“包装地狱”。明智地使用它们！

4. 渲染道具模式

此模式涉及将函数作为道具传递给组件，让您可以更好地控制渲染的内容。

const MouseTracker = ({ render }) => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setPosition({ x: event.clientX, y: event.clientY });
  };

  return (
    <div onMouseMove={handleMouseMove}>
      {render(position)}
    </div>
  );
};

// Usage
<MouseTracker
  render={({ x, y }) => (
    <h1>The mouse is at ({x}, {y})</h1>
  )}
/>

登录后复制

为什么它很漂亮：

高度灵活且可重复使用
避免 HOC 问题，例如道具命名冲突
允许基于提供的函数进行动态渲染

有趣的事实：渲染道具模式非常灵活，它甚至可以实现我们讨论过的大多数其他模式！

5. 自定义 Hook 模式

钩子是 React 中的新成员，自定义钩子允许您将组件逻辑提取到可重用的函数中。

const useWindowSize = () => {
  const [size, setSize] = useState({ width: 0, height: 0 });

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

    window.addEventListener('resize', handleResize);
    handleResize(); // Set initial size

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

  return size;
};

// Usage
const MyComponent = () => {
  const { width, height } = useWindowSize();
  return <div>Window size: {width} x {height}</div>;
};

登录后复制

为何如此神奇：