【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带来的危害

（编辑：湖南网）

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