浅谈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 相关文章推荐
jQuery的学习步骤
Feb 23 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 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里面的抽象类
2010/01/28 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
Python基础语法(Python基础知识点)
2016/02/28 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
python中doctest库实例用法
2020/12/31 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
运动会稿件100字
2014/02/21 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书
mysql查找连续出现n次以上的数字
2022/05/11 MySQL