浅谈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 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
jQuery同步提交示例代码
Dec 12 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 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调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
php递归json类实例
2014/12/02 PHP
ThinkPHP路由详解
2015/07/27 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
浅析Python中yield关键词的作用与用法
2016/11/29 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
对python中return与yield的区别详解
2020/03/12 Python
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
总经理办公室主任岗位职责
2013/11/12 职场文书
毕业生个人求职信范例分享
2013/12/17 职场文书
父亲追悼会答谢词
2014/01/17 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
第二次离婚起诉书
2015/05/18 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL
python接口测试返回数据为字典取值方式
2022/02/12 Python
Go并发4种方法简明讲解
2022/04/06 Golang