浅谈React中组件逻辑复用的那些事儿

基本每个开发者都需要考虑逻辑复用的问题，否则你的项目中将充斥着大量的重复代码。那么 React 是怎么复用组件逻辑的呢？本文将一一介绍 React 复用组件逻辑的几种方法，希望你读完之后能够有所收获。如果你对这些内容已经非常清楚，那么略过本文即可。

我已尽量对文中的代码和内容进行了校验，但是因为自身知识水平限制，难免有错误，欢迎在评论区指正。

1. Mixins

Mixins 事实上是 React.createClass 的产物了。当然，如果你曾经在低版本的 react 中使用过 Mixins，例如 react-timer-mixin， react-addons-pure-render-mixin，那么你可能知道，在 React 的新版本中我们其实还是可以使用 mixin，虽然 React.createClass 已经被移除了，但是仍然可以使用第三方库 create-react-class，来继续使用 mixin。甚至，ES6 写法的组件，也同样有方式去使用 mixin。当然啦，这不是本文讨论的重点，就不多做介绍了，如果你维护的老项目在升级的过程中遇到这类问题，可以与我探讨。

新的项目中基本不会出现 Mixins，但是如果你们公司还有一些老项目要维护，其中可能就应用了 Mixins，因此稍微花点时间，了解下 Mixins 的使用方法和原理，还是有必要的。倘若你完全没有这方面的需求，那么跳过本节亦是可以的。

Mixins 的使用

React 15.3.0 版本中增加了 PureComponent。而在此之前，或者如果你使用的是 React.createClass 的方式创建组件，那么想要同样的功能，就是使用 react-addons-pure-render-mixin，例如:

//狼蚁网站SEO优化代码在新版React中可正常运行，因为现在已经无法使用 `React.createClass`，我就不使用 `React.createClass` 来写了。

const createReactClass = require('create-react-class');
const PureRenderMixin = require('react-addons-pure-render-mixin');

const MyDialog = createReactClass({
  displayName: 'MyDialog',
  mixins: [PureRenderMixin],
  //other code
  render() {
    return (
      <div>
        {/* other code *