如何在React中组织代码以复用逻辑

我们知道组件和自顶向下的单向数据流帮我们将大型 UI 组织成小的、独立的、可复用的部分。然而，由于逻辑是有状态的，不能提取到函数或其他组件，我们通常无法进一步分解复杂组件。

这些情况非常常见，包括动画、表单处理、异步请求数据等，以及我们希望从组件中完成的许多其他事情。 当我们试图单独使用组件来解决这些用例时，我们通常会得到:

• 难以重构和测试的大型组件（我们已经制造了很多这种组件）
• 不同组件和生命周期方法之间的重复逻辑（各种场景都很常见）
• 发明了很多复杂的模式，比如 Mixins、 Render porp 和 高阶组件（HOC）

Mixins

主要应用在ES6普及之前，在还使用React.createClass时是非常常见的一种方式，例如：

var LogMixin = {
    log: function() {
        console.log('log');
    },
    componentDidMount: function() {
        console.log('in');
    },
    componentWillUnmount: function() {
        console.log('out');
    }
};

var User = React.createClass({
    mixins: [LogMixin],
    render: function() {
        return (<div>...</div>)
    }
});

var Goods = React.createClass({
    mixins: [LogMixin],
    render: function() {
        return (<div>...</div>)
    }
});

通过 Mixins，User 和 Goods 都实现了逻辑复用

• ES6 class，规范不支持 mixins。
• 不够直接，mixins 改变了 state，因此也就很难知道一些 state 是从哪里来的，尤其是当不止存在一个 mixins 时，可能还会相互依赖，相互耦合，及不利于代码维护。
• 命名冲突，不同的 mixins 中的方法可能会相互冲突、相互覆盖。

HOC