浅谈React中组件间抽象


Posted in Javascript onJanuary 27, 2018

关于今天要学习的组件间抽象其实我这小白看了几次还没弄明白,这次决定一探究竟。在组件构建中,通常有一类功能需要被不同的组件公用,此时就涉及抽象的概念,在React中我们主要了解mixin和高阶组件。

mixin

mixin的特性广泛存在于各个面向对象语言中,在ruby中,include关键词就是mixin,是将一个模块混入到另外一个模块中,或者是类中。

封装mixin方法

const mixin = function(obj, mixins) {
 const newObj = obj
 newObj.prototype = Object.create(obj.prototype)

 for(let props in mixins) {
  newObj.prototype[props] = mixins[props]
 }

 return newObj
}

const BigMixin = {
 fly: () => {
  console.log('i can fly')
 }
}

const Big = function() {
 console.log('new big')
}

const FlyBig = mixin(Big , BigMixin)

const flyBig = new FlyBig()
FlyBig.fly() //'i can fly'

对于广义的mixin方法,就是用赋值的方式将mixin对象里的方法都挂载到原对象上去,来实现对对象的混入。

React中的mixin

React在使用createClass构建组件时提供了mixin属性,如官方的PureRenderMixin:

import React from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'
React.createClass({
  mixins: [PureRenderMixin]
  
  render() {
    return <div>foo</foo>
  }
})

在createClass对象参数中传入数组mixins,里面封装了我们所需要的模块,mixins数组也可以增加多个mixin,其每一个mixin方法之间的有重合,对于普通方法和生命周期方法是有所区分的。

在不同的mixin里实现两个名字一样的普通方法,在React中是不会被覆盖的,会在控制台中报一个ReactClassInterface里的错误,指出你尝试在组件中多次定义一个方法。**因此在React中是不允许出现崇明普通方法的mixins,如果是React生命周期定义的方法,则会将各个模块的生命周期方法叠加在一起顺序执行**。

我们看到使用createClass的mixin为组价做了两件事情:

1. 工具方法:为组件共享了一些工具类方法,可以在各个组件中使用。

2. 生命周期继承:props和state合并,mixin能够合并生命周期方法,如果有很多mixin来定义componentDidMount这个周期,

那么React会非常智能的将他们合并一起执行。

ES6 CLASS和decorator

现在我们比较推崇使用es6 class方法去构建组件,但是它并不支持mixin。官方文档中也没有给出很好的办法。

decorator是ES 7 中定义的特性,和Java中的注解相似。decorator是运用在运行时的方法,在redux或者其他应用层框架中,越来越多的使用decorator实现对组件的装饰。

core-decorator库为开发者提供了一些实用的decorator,其中实现了我们正想要的@mixin。它将每个mixin对象的方法都叠加到target对象的原型上以达到mixin的目的。

import React, { Component } from 'react'
import { mixin } from 'core-decorator'

const PuerRender = {
  setTheme()
}

const Them = {
  setTheme()
}

@mixin(PuerRender, Them)
class MyComponent extends Component {
  render() {...}
}

如上decorator只是作用在类上面的,还有作用在方法上面的,它可以控制方法的自有属性。

注意:react 0.14开始剥离mixin

mixin的问题

破坏了原有组件的封装

mixin方法可以混入方法给组件带来新的特性,也会带来新的props和state,这意味着有些不可见的状态需要我们去维护。mixin也有可能存在相互依赖,这样形式依赖链,相互之间会影响。

  1. 命名冲突
  2. 增加复杂性

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 继承详解(四)
Jul 13 Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
Vue.js基础知识小结
Jan 13 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
uni app仿微信顶部导航条功能
Sep 17 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 #Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 #Javascript
使用D3.js创建物流地图的示例代码
Jan 27 #Javascript
javascript获取图片的top N主色值方法详解
Jan 26 #Javascript
Vue中render方法的使用详解
Jan 26 #Javascript
Angular利用trackBy提升性能的方法
Jan 26 #Javascript
微信小程序版翻牌小游戏
Jan 26 #Javascript
You might like
php新建文件自动编号的思路与实现
2011/06/27 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
python抖音表白程序源代码
2019/04/07 Python
python numpy中cumsum的用法详解
2019/10/17 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
Python实现仿射密码的思路详解
2020/04/23 Python
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
致标枪运动员广播稿
2014/02/06 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
2014年新教师工作总结
2014/11/08 职场文书
党员剖析材料范文
2014/12/18 职场文书
出国导师推荐信
2015/03/25 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python