React 组件复用 — 历史悠久的权衡取舍

2023-11-12 13:47:58

React 组件复用是构建可维护、可扩展前端应用程序的关键。它允许我们跨多个组件共享逻辑和状态，从而减少重复代码并提高开发效率。

从 mixin 到高阶组件

在 React 出现早期，组件复用通常通过 mixin 来实现。Mixin 是一种特殊的 JavaScript 对象，它包含可以与其他组件共享的属性和方法。

const MyMixin = {
  // 属性
  myProp: 'foo',

  // 方法
  myMethod() {
    console.log('Hello, world!');
  }
};

class MyComponent extends React.Component {
  // ...

  // 使用 mixin
  componentDidMount() {
    this.myMethod();
  }
};

// 将 mixin 混入组件
Object.assign(MyComponent.prototype, MyMixin);

然而，mixin 很快暴露出一些问题。首先，它们难以维护。当需要更新 mixin 中的方法或属性时，我们必须手动更新所有使用该 mixin 的组件。其次，mixin 容易造成命名冲突。如果两个 mixin 使用相同的属性或方法名，可能会导致应用程序出现问题。

为了解决这些问题，React 引入了高阶组件 (HOC) 的概念。HOC 是一个函数，它接受一个组件作为参数，并返回一个新的组件。HOC 可以用来增强组件的功能，而无需修改其内部实现。

const withMyMixin = (Component) => {
  return class extends Component {
    // ...

    // 使用 mixin
    componentDidMount() {
      this.myMethod();
    }
  };
};

const MyComponent = withMyMixin(React.Component);