浅谈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 相关文章推荐
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
Javascript面向对象扩展库代码分享
Mar 27 Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 Javascript
利用cookie记住背景颜色示例代码
Nov 04 Javascript
JS折半插入排序算法实例
Dec 02 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
vue写一个组件
Apr 09 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
基于vue实现圆形菜单栏组件
Jul 05 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 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
桌面中心(一)创建数据库
2006/10/09 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
php实现小程序支付完整版
2018/10/09 PHP
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
javascript一些实用技巧小结
2011/03/18 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
2019/05/08 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
Python 变量类型及命名规则介绍
2013/06/08 Python
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
python构建深度神经网络(续)
2018/03/10 Python
Python实现购物车购物小程序
2018/04/18 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
2014年度工作总结报告
2014/12/15 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis