让函数组件起飞，解开Hooks约定的束缚

2023-11-13 11:10:11

React的Hooks是一个强大的工具，可以简化函数组件的开发。但是，Hooks也有一些限制，比如必须在顶层作用域调用。这可能会导致一些问题，例如难以在条件判断或循环语句中使用Hooks。

幸运的是，有一些设计模式可以帮助我们打破这些限制。在本文中，我们将探讨三种这样的设计模式：

容器模式
按条件执行Hooks的实现方式
利用render props模式复用UI逻辑

容器模式

容器模式是一种将函数组件包装在另一个组件中的设计模式。这允许我们在父组件中使用Hooks，然后将这些Hooks传递给子组件。

例如，我们可以在一个组件中使用useState Hook来管理状态，然后将这个组件作为另一个组件的父组件。这样，子组件就可以访问父组件中的状态。

// 父组件
const ParentComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <ChildComponent count={count} />
    </div>
  );
};

// 子组件
const ChildComponent = ({ count }) => {
  return (
    <div>
      <h1>{count}</h1>
    </div>
  );
};

按条件执行Hooks的实现方式

我们可以使用自定义Hooks来实现按条件执行Hooks。自定义Hooks是一种创建自己Hooks的方法，可以重用逻辑。

例如，我们可以创建一个名为useConditionalHook的自定义Hook，它接收一个条件函数和一个Hook函数作为参数。如果条件函数返回true，则调用Hook函数。否则，不调用Hook函数。

// useConditionalHook.js
import { useState, useEffect } from 'react';

const useConditionalHook = (condition, hook) => {
  if (condition()) {
    return hook();
  } else {
    return null;
  }
};

// 使用useConditionalHook.js
const Component = () => {
  const [count, setCount] = useState(0);

  useConditionalHook(
    () => count > 0,
    () => useEffect(() => {
      console.log(`Count is ${count}`);
    }, [count])
  );

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
};

利用render props模式复用UI逻辑

render props模式是一种通过将UI逻辑作为参数传递给子组件的方式来复用UI逻辑的设计模式。这允许我们在不同的组件中使用相同的UI逻辑，而无需重复编写代码。

例如，我们可以创建一个名为MyButton的组件，它接收一个render prop作为参数。render prop是一个函数，它接收一个props对象作为参数，并返回一个React元素。

// MyButton.js
const MyButton = ({ render }) => {
  return (
    <button onClick={render}>
      {render({})}
    </button>
  );
};

// 使用MyButton.js
const Component = () => {
  return (
    <MyButton
      render={(props) => (
        <span>
          {props.count}
        </span>
      )}
    />
  );
};