用好 Render Props：简洁，清晰，搞定复用

前端

2023-09-14 18:37:38

高阶组件和 Render Props：React 中的代码复用利器

简介

在 React 生态系统中，高阶组件（HOC）和 Render Props 都是常见的代码复用模式。它们使你能够为现有组件添加新功能，而无需修改其底层代码。本文将深入探讨这些模式，重点介绍它们的优点和局限性，并提供实际示例。

高阶组件（HOC）

什么是高阶组件？

高阶组件是一种将一个组件作为参数接收并返回一个新组件的函数。新组件具有增强功能，通常继承了原始组件的 props。

HOC 的优点

代码复用：允许在不修改原始组件的情况下添加新功能。
可组合性：可以组合多个 HOC 来创建复杂的组件。
减少重复代码：避免在多个组件中复制相同的逻辑。

HOC 的示例

const withLoading = (Component) => (props) => {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 500);
  }, []);

  return isLoading ? <div>Loading...</div> : <Component {...props} />;
};

此 HOC 用于将加载指示器添加到任何组件中，无需修改组件本身。

Render Props

什么是 Render Props？

Render Props 是一种传递函数作为 prop 的技术，该函数被组件用来渲染其内容。这使你可以将渲染逻辑从组件本身中分离出来。

Render Props 的优点

代码复用：允许在不修改原始组件的情况下添加渲染逻辑。
灵活性：提供完全控制渲染内容，允许创建高度动态和可定制的组件。
可测试性：将渲染逻辑与组件逻辑分离，使测试变得更容易。

Render Props 的示例

const MyComponent = (props) => {
  return props.render({ count: 10 });
};

const App = () => {
  return (
    <MyComponent
      render={({ count }) => (
        <h1>The count is: {count}</h1>
      )}
    />
  );
};