React 應用程式的基本設計模式：升級您的組件遊戲

發佈於2024-09-28

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 }) => (
  
);

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

const IconButton = ({ icon, label }) => (
  
);

为什么它很棒：

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

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

2. 容器/展示模式

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

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

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

  return ;
};

// Presentational Component
const UserList = ({ users }) => (

{user.name}

);

为何如此震撼：

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

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

3. 高阶组件（HOC）模式

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

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

const EnhancedUserList = withLoader(UserList);

为什么很酷：

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

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

4. 渲染道具模式

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

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

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

  return (
    
      {render(position)}
    
  );
};

// Usage
 (
    The mouse is at ({x}, {y})
  )}
/>

为什么它很漂亮：

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

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

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 Window size: {width} x {height};
};

为何如此神奇：