Reactjs Mixins
抛砖引玉
实现一个日志功能。
- 组件在挂载前打印 Component will mount
- 组件挂载后打印 Component did mount
不能忍受的写法
var AComponent = React.createClass({componentWillMount: function () {console.log('Component will mount');},componentDidMount: function () {console.log('Component did mount');},render: function () {return (<div>AComponent</div>)}
});var BComponent = React.createClass({componentWillMount: function () {console.log('Component will mount');},componentDidMount: function () {console.log('Component did mount');},render: function () {return (<div>BComponent</div>)}
});
看到上面的代码,直接吐血而亡啊,写的是什么几把玩意儿。还好只写了两个组件,要是多个组件,相同的代码就会重复多遍。相信大家看到上面的代码也会发现一个致命的问题:可维护性太差差差!
改进
相信大家都不会写出上面的代码,如果真有人会那样写,请允许我呵呵你。一般都会抽出公共的部分。
var Log = {componentWillMount: function () {console.log('Component will mount');},componentDidMount: function () {console.log('Component did mount');}
};var AComponent = React.createClass({componentWillMount: function () {Log.componentWillMount();},componentDidMount: function () {Log.componentDidMount();},render: function () {return (<div>AComponent</div>)}
});var BComponent = React.createClass({componentWillMount: function () {Log.componentWillMount();},componentDidMount: function () {Log.componentDidMount();},render: function () {return (<div>BComponent</div>)}
});
看起来挺完美的,实际上还是有个问题:代码的耦合性太强!像这种日志功能应该同业务分离,不应该直接出现在业务代码中。如果做过Java开发,应该很容易想到一个概念:AOP—面向切面编程。
Mixins
利用React的Mixins,编写的代码就像这样的:
var LogMixin = {componentWillMount: function () {console.log('Component will mount');},componentDidMount: function () {console.log('Component did mount');}
};var AComponent = React.createClass({mixins: [LogMixin],render: function () {return (<div>AComponent</div>)}
});var BComponent = React.createClass({mixins: [LogMixin],render: function () {return (<div>BComponent</div>)}
});
Mixins有点类似AOP。所谓的mixins就是将组件里的方法抽出来。实际上Mixins里的this是指向组件的,使用了Mixins以后,组件也可以调用Mixins里的方法。
组件调用Mixins方法
var Mixin = {log:function(){console.log('Mixin log');}
};var Component = React.createClass({mixins: [Mixin],componentWillMount: function () {this.log();},render: function () { return (<div>Component</div>)}
});
控制台打印:
$ Mixin log
生命周期方法
Mixins里也可以编写组件生命周期的方法,需要注意的是:Mixins里的方法并不会覆盖组件的生命周期方法,会在先于组件生命周期方法执行。
var Mixin = {componentWillMount: function () {console.log('Mixin Will Mount');}
};var Component = React.createClass({mixins: [Mixin],componentWillMount: function () {console.log('Component Will Mount');},render: function () {return (<div>Component</div>)}
});
控制台打印:
$ Mixin Will Mount
$ Component Will Mount
使用多个Mixin
组件也可以使用多个Mixin
var AMixin = {componentWillMount: function () {console.log('AMixin Will Mount');}
};var BMixin = {componentWillMount: function () {console.log('BMixin Will Mount');}
};var Component = React.createClass({mixins: [AMixin,BMixin],componentWillMount: function () {console.log('Component Will Mount');},render: function () {return (<div>Component</div>)}
});
控制台打印:
$ AMixin Will Mount
$ BMixin Will Mount
$ Component Will Mount
数组引入的顺序,决定了Mxins里生命周期方法的执行顺序。
不允许重复
除了生命周期方法可以重复以外,其他的方法都不可以重复,否则会报错
情景1
var AMixin = {log: function () {console.log('AMixin Log');}
};var BMixin = {log: function () {console.log('BMixin Log');}
};var Component = React.createClass({mixins: [AMixin,BMixin],render: function () {return (<div>Component</div>)}
});
情景2
var Mixin = {log: function () {console.log('Mixin Log');}
};var Component = React.createClass({mixins: [Mixin],log:function(){console.log('Component Log');},render: function () {return (<div>Component</div>)}
});
以上两种情景,都会报错,控制信息如下,所以使用的时候要小心了
Reactjs Mixins相关推荐
- Reactjs 踏坑指南3:一些例子(未完成)
React 踏坑指南3: 准备工作 知识准备 Reactjs 踏坑指南1: 一些概念 Reactjs 踏坑指南2: JSX&&组件 文件引用 引用文件 文件基本结构 <!DOCT ...
- Reactjs 踏坑指南1: 一些概念
Reactjs 踏坑指南1: 知识点 什么是React 虚拟DOM JSX 组件 生命周期和状态 事件 单项数据流 Reactjs和Angularjs的对比 React简介 React是一个Faceb ...
- Vue mixins(混入) 附代码示例详解
mixins 我们称它为 "混入" : 官方的解释: 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使 ...
- riot.js教程【四】Mixins、HTML内嵌表达式
前文回顾 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法: riot.j ...
- 在小程序中实现 Mixins 方案
原文来自我的博客:jrainlau.github.io/#/article?n- 在原生开发小程序的过程中,发现有多个页面都使用了几乎完全一样的逻辑.由于小程序官方并没有提供 Mixins 这种代码复 ...
- Vue混入mixins
Vue官网上介绍: 混入(mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 虽然平 ...
- More than React(一)为什么ReactJS不适合复杂交互的前端项目?
<More than React>系列的文章会一共分为五篇和一则附录.本文是第一篇,介绍用 ReactJS开发时遇到的种种问题.后面四篇文章的每一篇将会分别详细讨论其中一个问题,以及Bin ...
- 使用vue的mixins混入实现对正在编辑的页面离开时提示
mixins.ts 1 import { Vue, Component, Watch } from "vue-property-decorator" 2 Component.reg ...
- django rest framework mixins小结
本篇对drf中的mixins进行简要的分析总结. from rest_framework import viewsets 在这个viewsets中,只有5类Minxin,他们与http方法对应如下: ...
最新文章
- Tom Clancy's Splinter Cell: Double Agent
- 自定义控件详解(三):Canvas效果变换
- [转] 2016前端开发技术巡礼
- 关于NLP相关技术全部在这里:预训练模型、图神经网络、模型压缩、知识图谱、信息抽取、序列模型、语法分析、文本处理...
- Java防止Xss注入json_浅谈 React 中的 XSS 攻击
- 机器学习(二十一)——Optimizer, 单分类SVM多分类SVM, 时间序列分析
- 如何暂停一个正在运行的线程?
- 《C和指针》——字符数组和字符串常量的区别
- Delphi 7连接MySql 5 5 15
- java 转为Calendar_在Java中将String转换为Calendar对象
- 鸿蒙硬件HI3861开发环境搭建-串口2测试
- 操作系统系统用c语言写,用C语言写关于操作系统的一个问题。
- 基于jsTree的无限级树JSON数据的转换
- 为何大数据分析那么重要
- linux 引导原理 pdf,linux深度开发原理.pdf
- php 输出数据库取出来的html源码 正常显示解决,替换显示数据库中的html代码
- Linux设置免密登录
- 当AI学会共情,港科大新研究赋予Chatbot同理心 | 一周AI最火论文
- 《勒索软件防护体系建设指南》发布|美创深度参编,入选代表性厂商
- 【常用命令】netstat -ano命令图文详细说明