突破想象，解锁Hooks的全新视角——组合和HOC模式下的逻辑视图分离新创意

2023-11-28 03:37:34

前言

对于了解JSX本质的同学来说，你们应该都知道它只是一种语法糖，会被babel处理成createElement的形式，最终再变成常规的js对象。因此，我们就可以在js逻辑层面对elem进行操作。

组合模式

组合模式是一种将组件组合成树状结构的模式，这种模式的好处是代码的可读性和可维护性都很高，而且组件之间的高内聚低耦合便于复用。

实例

const MyComponent = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        增加
      </button>
      <span>{count}</span>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <MyComponent />
      <MyComponent />
    </div>
  );
};

在这个例子中，我们定义了MyComponent组件，它是一个简单的计数器组件，包含一个按钮和一个span标签，按钮用于增加计数器，span标签用于显示计数器的当前值。

然后，我们在App组件中使用了MyComponent组件两次，这样就创建了一个包含两个计数器的应用程序。

HOC模式

HOC模式是一种用于对组件进行包装的高阶组件模式，这种模式的好处是能够将组件的公共逻辑提取出来，从而提高代码的复用性。

实例

const withCounter = (Component) => {
  return (props) => {
    const [count, setCount] = useState(0);
    return (
      <div>
        <Component {...props} count={count} setCount={setCount} />
        <span>{count}</span>
      </div>
    );
  };
};

const MyComponent = (props) => {
  return (
    <button onClick={() => props.setCount(props.count + 1)}>
      增加
    </button>
  );
};

const App = () => {
  return (
    <div>
      <withCounter MyComponent />
      <withCounter MyComponent />
    </div>
  );
};