React 代码复用：基于 mixin、高阶组件和 render props

2023-09-22 10:23:55

React 中的组件是主要的代码复用单元，但是如何共享组件的状态或行为给其他需要相同功能的组件呢？本文将介绍三种不同的方法：Mixin、高阶组件和 Render Props，帮助你理解和实现 React 中的代码复用。

Mixin

Mixin 是一个 JavaScript 对象，它包含了可以被其他组件复用的方法、属性和生命周期函数。为了使用 Mixin，你可以在组件的原型上调用 Object.assign() 方法，将 Mixin 的属性和方法混合到组件中。

// 定义一个 Mixin
const mixin = {
  // 添加一个方法
  sayHello() {
    console.log('Hello!');
  },
  // 添加一个属性
  name: 'John Doe'
};

// 使用 Mixin
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // 将 Mixin 的属性和方法混合到组件中
    Object.assign(this, mixin);
  }

  render() {
    return <h1>{this.name}</h1>;
  }
}

高阶组件

高阶组件是一种函数，它接收一个组件作为参数，并返回一个新的组件。新的组件具有原有组件的所有功能，还可能具有额外的功能。

// 定义一个高阶组件
const withDisplayName = (WrappedComponent) => {
  return class extends React.Component {
    render() {
      // 渲染原有组件，并传入额外的属性
      return <WrappedComponent {...this.props} displayName="John Doe" />;
    }
  };
};

// 使用高阶组件
const MyComponent = withDisplayName(MyComponent);

Render Props

Render Props 是一种设计模式，它允许组件将渲染逻辑委托给父组件。父组件通过传递一个函数给子组件，子组件使用这个函数来渲染自身。

// 定义一个父组件
class ParentComponent extends React.Component {
  render() {
    // 定义一个渲染函数
    const renderChild = (name) => {
      return <h1>{name}</h1>;
    };

    // 将渲染函数传递给子组件
    return <ChildComponent render={renderChild} />;
  }
}

// 定义一个子组件
class ChildComponent extends React.Component {
  render() {
    // 使用父组件传递的渲染函数渲染自身
    return this.props.render(this.props.name);
  }
}

比较

方法	优点	缺点
Mixin	简单易用	容易导致代码混乱和冲突
高阶组件	更加灵活和可控	需要编写更多的代码
Render Props	更加灵活和可控	需要编写更多的代码，且可能会导致难以理解的代码