谈逻辑组合与复用的演进史，是组件之间更好的桥梁

2023-09-06 09:07:31

当我们在使用Vue或者React等前端框架构建复杂的应用时，我们通常需要在组件之间共享一些逻辑，例如，验证表单输入、控制组件之间的通信、管理状态等等。为了满足这些需求，前端框架中提供了各种各样的组合和复用模式，这些模式可以帮助我们组织代码、共享代码逻辑，使代码更易于维护。

演进史

让我们回顾一下这些模式的历史，从最初的 Mixins 到 HOC，再到 Render Props，最后是最新推出的 Hooks。

Mixins

Mixins 是最早出现的一种组合和复用模式，它允许你在多个组件中共享代码。这可以通过使用 JavaScript 的原型继承或 ES6 的类来实现。

// ES6 类
class MyMixin {
  // 共享的方法
  sharedMethod() {
    // ...
  }
}

// 使用 Mixin 的组件
class MyComponent extends MyMixin {
  // ...
}

HOCs

高阶组件 (HOC) 是一种函数，它接受一个组件作为参数，并返回一个新的组件。这个新的组件将继承原组件的所有功能，同时还会添加一些额外的功能。

// HOC
const withHoc = (Component) => {
  return (props) => {
    // ...
    return <Component {...props} />;
  };
};

// 使用 HOC 的组件
const MyComponent = withHoc(MyComponent);

Render Props

Render Props 是一种允许你在组件之间传递渲染函数的模式。这可以让你在不创建新组件的情况下，重用组件的渲染逻辑。

// 渲染 Props 组件
const MyRenderPropsComponent = (props) => {
  return props.render({ ...props });
};

// 使用 Render Props 的组件
const MyComponent = () => {
  return (
    <MyRenderPropsComponent
      render={(props) => {
        // ...
        return <div>{props.data}</div>;
      }}
    />
  );
};

Hooks

Hooks 是 React 16.8 中引入的一种新的组合和复用模式。它们允许你在函数组件中使用状态和生命周期方法，而无需使用类。

// 使用 Hooks 的组件
const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // ...
  }, []);

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