浅谈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 相关文章推荐
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
Javascript String对象扩展HTML编码和解码的方法
Jun 02 Javascript
分享20款好玩的jQuery游戏
Apr 17 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
countUp.js实现数字滚动效果
Oct 18 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
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
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
第六章 php目录与文件操作
2011/12/30 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
详解python中的闭包
2020/09/07 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
Java如何支持I18N?
2016/10/31 面试题
2014新课程改革心得体会
2014/03/10 职场文书
股东出资证明书范例
2014/10/04 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏