React 代码共享最佳实践方式

任何一个项目发展到一定复杂性的时候，必然会面临逻辑复用的问题。在React中实现逻辑复用通常有以下几种方式：Mixin、高阶组件(HOC)、修饰器(decorator)、Render Props、Hook。本文主要就以上几种方式的优缺点作分析，帮助开发者针对业务场景作出更适合的方式。

Mixin

这或许是刚从Vue转向React的开发者第一个能够想到的方法。Mixin一直被广泛用于各种面向对象的语言中，其作用是为单继承语言创造一种类似多重继承的效果。虽然现在React已将其放弃中，但Mixin的确曾是React实现代码共享的一种设计模式。

广义的 mixin 方法，就是用赋值的方式将 mixin 对象中的方法都挂载到原对象上，来实现对象的混入，类似 ES6 中的 Object.assign()的作用。原理如下：

const mixin = function (obj, mixins) {
  const newObj = obj
  newObj.prototype = Object.create(obj.prototype)

  for (let prop in mixins) {
    // 遍历mixins的属性
    if (mixins.hasOwnPrototype(prop)) {
      // 判断是否为mixin的自身属性
      newObj.prototype[prop] = mixins[prop]; // 赋值
    }
  }
  return newObj
};

在 React 中使用 Mixin

假设在我们的项目中，多个组件都需要设置默认的name属性，使用mixin可以使我们不必在不同的组件里写多个同样的getDefaultProps方法，我们可以定义一个mixin：

const DefaultNameMixin = {
  getDefaultProps: function () {
    return {
      name: "Joy"
    }
  }
}

为了使用mixin，需要在组件中加入mixins属性，然后把我们写好的mixin包裹成一个数组，将它作为mixins的属性值：

const ComponentOne = React.createClass({
  mixins: [DefaultNameMixin]
  render: function () {
    return <h2>Hello {this.props.name}</h2>
  }
})

写好的mixin可以在其他组件里重复使用。

由于mixins属性值是一个数组，意味着我们可以同一个组件里调用多个mixin。在上述例子中稍作更改得到：

const DefaultFriendMixin = {
  getDefaultProps: function () {
    return {
      friend: "Yummy"
    }
  }
}

const ComponentOne = React.createClass({
  mixins: [DefaultNameMixin, DefaultFriendMixin]
  render: function () {
    return (
      <div>
        <h2>Hello {this.props.name}</h2>
        <h2>This is my friend {this.props.friend}</h2>
      </div>
    )
  }
})

我们甚至可以在一个mixin里包含其他的mixin。

比如写一个新的mixin``DefaultProps包含以上的DefaultNameMixin和DefaultFriendMixin：

const DefaultPropsMixin = {
  mixi

发布于 2021-05-11 19:51

小程序运营