【React深入】从Mixin到HOC再到Hook

导读

前端发展速度非常之快，页面和组件变得越来越复杂，如何更好的实现状态逻辑复用一直都是应用程序中重要的一部分，这直接关系着应用程序的质量以及维护的难易程度。

本文介绍了React采用的三种实现状态逻辑复用的技术，并分析了他们的实现原理、使用方法、实际应用以及如何选择使用他们。

本文略长，下面是本文的思维导图，您可以从头开始阅读，也可以选择感兴趣的部分阅读：

Mixin设计模式

Mixin（混入）是一种通过扩展收集功能的方式，它本质上是将一个对象的属性拷贝到另一个对象上面去，不过你可以拷贝任意多个对象的任意个方法到一个新对象上去，这是继承所不能实现的。它的出现主要就是为了解决代码复用问题。

很多开源库提供了Mixin的实现，如Underscore的_.extend方法、JQuery的extend方法。

使用_.extend方法实现代码复用：

var LogMixin = {  
  actionLog: function() {  
    console.log('action...');  
  },  
  requestLog: function() {  
    console.log('request...');  
  },  
};  
function User() {  /*..*/  }  
function Goods() {  /*..*/ }  
_.extend(User.prototype, LogMixin);  
_.extend(Goods.prototype, LogMixin);  
var user = new User();  
var good = new Goods();  
user.actionLog();  
good.requestLog(); 

我们可以尝试手动写一个简单的Mixin方法：

function setMixin(target, mixin) {  
  if (arguments[2]) {  
    for (var i = 2, len = arguments.length; i < len; i++) {  
      target.prototype[arguments[i]] = mixin.prototype[arguments[i]];  
    }  
  }  
  else {  
    for (var methodName in mixin.prototype) {  
      if (!Object.hasOwnProperty(target.prototype, methodName)) {  
        target.prototype[methodName] = mixin.prototype[methodName];  
      }  
    }  
  }  
}  
setMixin(User,LogMixin,'actionLog');  
setMixin(Goods,LogMixin,'requestLog'); 

您可以使用setMixin方法将任意对象的任意方法扩展到目标对象上。

React中应用Mixin

React也提供了Mixin的实现，如果完全不同的组件有相似的功能，我们可以引入来实现代码复用，当然只有在使用createClass来创建React组件时才可以使用，因为在React组件的es6写法中它已经被废弃掉了。

例如下面的例子，很多组件或页面都需要记录用户行为，性能指标等。如果我们在每个组件都引入写日志的逻辑，会产生大量重复代码，通过Mixin我们可以解决这一问题：

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>)  
  }  
}); 

Mixin带来的危害

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!