React Mixin

为什么使用 Mixin ？

React为了将同样的功能添加到多个组件当中，你需要将这些通用的功能包装成一个mixin，然后导入到你的模块中。可以说，相比继承而已，React更喜欢这种组合的方式。

写一个简单的 Mixin

现在假设我们在写一个app，我们知道在某些情况下我们需要在好几个组件当中设置默认的name属性。
现在，我们不再是像以前一样在每个组件中写多个同样的getDefaultProps方法，我们可以像下面一样定义一个mixin：

var DefaultNameMixin = {getDefaultProps: function () {return {name: "Skippy"};}
};

它没什么特殊的，就是一个简单的对象而已。

加入到 React 组件中

为了使用mixin，我们只需要简单得在组件中加入mixins属性，然后把刚才我们写的mixin包裹成一个数组，将它作为该属性的值即可：

var ComponentOne = React.createClass({mixins: [DefaultNameMixin],render: function() {return <h2>Hello {this.props.name}</h2>;
    }
});React.renderComponent(<ComponentOne />, document.body);

重复使用

就像你想象的那样，我们可以在任何其他组件中包含我们的mixin：

var ComponentTwo = React.createClass({mixins: [DefaultNameMixin],render: function () {return (<div><h4>{this.props.name}</h4><p>Favorite food: {this.props.food}</p></div>
        );}
});

生命周期方法会被重复调用！

如果你的mixin当中包含生命周期方法，不要焦急，你仍然可以在你的组件中使用这些方法，而且它们都会被调用：

两个getDefaultProps方法都将被调用，所以我们可以得到默认为Skippy的name属性和默认为Pancakes的food属性。任何一个生命周期方法或属性都会被顺利地重复调用，但是下面的情况除外：

render：包含多个render方法是不行的。React 会跑出异常：
displayName：你多次的对它进行设置是没有问题的，但是，最终的结果只以最后一次设置为准。

需要指出的是，mixin是可以包含在其他的mixin中的：

var UselessMixin = {componentDidMount: function () {console.log("asdas");}
};var LolMixin = {mixins: [UselessMixin]
};var PantsOpinion = React.createClass({mixins: [LolMixin],render: function () {return (<p>I dislike pants</p>);
   }
});React.renderComponent(<PantsOpinion />, document.body);

程序会在控制台打印出asdas。

包含多个 Mixins

我们的mixins要包裹在数组当中，提醒了我们可以在组件中包含多个mixins：

var DefaultNameMixin = {getDefaultProps: function () {return {name: "Lizie"};}
};var DefaultFoodMixin = {getDefaultProps: function () {return {food: "Pancakes"};}
};var ComponentTwo = React.createClass({mixins: [DefaultNameMixin, DefaultFoodMixin],render: function () {return (<div><h4>{this.props.name}</h4><p>Favorite food: {this.props.food}</p></div>
        );}
});

注意事项

这里有几件事需要引起我们的注意，当我们使用mixins的时候。幸运地是，这些看起来并不是什么大问题，下面是我们在实践当中发现的一些问题：

设置相同的 Prop 和 State

如果你尝试在不同的地方定义相同的属性时会异常：

设置相同的方法

在不同的mixin中定义相同的方法，或者mixin和组件中包含了相同的方法时，会抛出异常：

var LogOnMountMixin = {componentDidMount: function () {console.log("mixin mount method");this.logBlah()},// add a logBlah method here...logBlah: function () {console.log("blah");}
};var MoreLogOnMountMixin = {componentDidMount: function () {console.log("another mixin mount method");},// ... and again here.logBlah: function () {console.log("something other than blah");}
};

异常信息同多次定义rander方法时抛出的异常一样：

多个生命周期方法的调用顺序

如果我们的组件和mixin中都包含了相同的生命周期方法的话会怎样呢？

我们的mixin方法首先会被调用，然后再是组件的中方法被调用。

那当我们的组件中包含多个mixin，而这些mixin中又包含相同的生命周期方法时，调用顺序又是如何？

它们会根据mixins中的顺序从左到右的进行调用。

实例代码：

var LogOnMountMixin = {componentDidMount: function () {console.log("mixin mount method");}
};var MoreLogOnMountMixin = {componentDidMount: function () {console.log("another mixin mount method");}
};
var ComponentOne = React.createClass({mixins: [MoreLogOnMountMixin, LogOnMountMixin],componentDidMount: function () {console.log("component one mount method");},...var ComponentTwo = React.createClass({mixins: [LogOnMountMixin, MoreLogOnMountMixin],componentDidMount: function () {console.log("component two mount method");},...

控制台将输出：

another mixin mount method
mixin mount method
component one mount methodmixin mount method
another mixin mount method
component two mount method

总结

Mixin 使你React程序变得更为可重用，It's a Good Thing.

转载于:https://www.cnblogs.com/theWayToAce/p/7761652.html

React Mixin相关推荐

ES6+REACT+MIXIN
ES6+REACT+MIXIN 文件结构 Action.js Home.jsx index.js store.js Home.jsx import React from 'react' import ...
React创建组件的三种方式及其区别
React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的ext ...
一文详解 React 组件类型
本文的目标是让开发者清晰地了解 React 组件类型,哪些在现代 React 应用中依然在使用,以及为何一些类型现在不再使用了. 作者 | Robin Wieruch 译者 | 弯月责编 | 屠敏 ...
「首席架构师推荐」React生态系统大集合
关于React生态系统的一系列令人敬畏的事情. React React一般资源 React社区 React在线游乐场 React教程 React通用教程 React钩子 React和TypeScrip ...
Vue3.0 组合式 API 分析与实践
本文带大家深入理解组合式 API 的设计详情,同时加入我们的实践经验总结. 01 背景 Vue3.x 版本的出现带来了许多令人眼前一亮的新特性,其中组合式 API(Composition API),一 ...
一个优秀的前端都应该阅读这些文章
前言的确,有些标题党了.起因是微信群里,有哥们问我,你是怎么学习前端的呢?能不能共享一下学习方法.一句话也挺触动我的,我真的不算是什么大佬,对于学习前端知识,我也不能说是掌握了什么捷径.当然,我个人 ...
好文推荐--自己反复学习用
什么是闭包? 瀑布流实现方式 21 个 React 性能优化技巧性能!!让你的 React 组件跑得再快一点算法导论------渐近记号Θ.Ο.o.Ω.ω详解探究JS V8引擎下的"数 ...
基于Mixin Network的PHP比特币开发教程之一：创建机器人
英文原文 Mixin Network 是一个免费的极速的端对端加密数字货币交易系统. 在本章中,你可以按教程在Mixin Messenger中创建一个bot来接收用户消息, 学到如何给机器人转比特币 ...
基于 react, redux 最佳实践构建的 2048
前段时间 React license 的问题闹的沸沸扬扬,搞得 React 社区人心惶惶,好在最终 React 团队听取了社区意见把 license 换成了 MIT.不管 React license ...
React源码分析与实现(一)：组件的初始化与渲染
原文链接地址:github.com/Nealyang 转载请注明出处前言战战兢兢写下开篇...也感谢小蘑菇大神以及网上各路大神的博客资料参考~ 阅读源码的方式有很多种,广度优先法.调用栈调试法等等 ...