组件逻辑复用与扩展：React Hooks 实战指南

见解分享

2024-01-12 18:44:43

React Hooks：组件逻辑复用的终极指南

组件逻辑复用：为何如此重要？

在 React 开发中，组件逻辑复用对于提升代码可维护性、促进代码共享以及简化复杂应用程序的构建至关重要。通过复用代码，您可以避免重复，让您的代码库更加精简和可管理。

五种复用组件逻辑的有效方案

1. 高阶组件 (HOC)

HOC 将一个组件包装在另一个组件中，允许您增强或修改组件的行为。这是一种提取公共逻辑并将其抽象到独立组件中的强大技术。

代码示例：

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

  useEffect(() => {
    // 模拟异步数据获取
    setTimeout(() => {
      setIsLoading(false);
    }, 1000);
  }, []);

  return (
    <Component {...props} isLoading={isLoading} />
  );
};

2. Render Props

Render props 是一种将渲染函数作为 props 传递给子组件的技术。子组件可以使用该函数渲染其自身。这允许高度可定制的逻辑复用。

代码示例：

const CounterContext = createContext();

const CounterProvider = ({ children }) => {
  const [count, setCount] = useState(0);

  return (
    <CounterContext.Provider value={{ count, setCount }}>
      {children}
    </CounterContext.Provider>
  );
};

const useCounter = () => {
  const context = useContext(CounterContext);

  return [context.count, context.setCount];
};

3. 自定义 Hooks

自定义 Hooks 允许您在组件外部定义和复用状态逻辑。通过自定义 Hooks，您可以将共享逻辑封装到独立函数中，并在多个组件中使用。

代码示例：

const useTitle = (title) => {
  useEffect(() => {
    document.title = title;
  }, [title]);
};

4. Context API

Context API 允许组件在整个组件树中共享数据，而无需显式传递 props。这对于管理共享状态和减少 props 嵌套非常有用。

代码示例：

const MyContext = createContext(null);

const MyProvider = ({ children }) => {
  const [state, setState] = useState(0);

  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
};

const useMyContext = () => {
  const context = useContext(MyContext);

  return context.state;
};

5. 组件组合

组件组合是一种通过将较小的组件组合成更大、更复杂的组件来复用逻辑的技术。这允许您构建模块化且可维护的应用程序。

代码示例：

const Button = (props) => {
  return (
    <button {...props}>
      {props.children}
    </button>
  );
};

const IconButton = ({ icon, onClick }) => {
  return (
    <Button onClick={onClick}>
      <img src={icon} alt="icon" />
    </Button>
  );
};

const SaveButton = () => {
  return (
    <IconButton icon="save.png" onClick={() => { /* do something */ }} />
  );
};