浅谈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 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
Aug 15 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
实例分析js事件循环机制
Dec 13 Javascript
setTimeout时间设置为0详细解析
Mar 13 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
编写v-for循环的技巧汇总
Dec 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
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
四个PHP非常实用的功能
2015/09/29 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
Stop SQL Server
2007/06/21 Javascript
执行iframe中的javascript方法
2008/10/07 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
CSS3制作圆形滚动进度条动画的示例
2020/11/05 HTML / CSS
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
高中毕业生个人自我鉴定
2013/11/24 职场文书
2014年三八妇女节活动方案
2014/02/28 职场文书
数控专业毕业生自荐信范文
2014/03/04 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
党性心得体会
2014/09/03 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
英文产品推荐信
2015/03/27 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
Python绘制分类图的方法
2021/04/20 Python
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
JavaScript 定时器详情
2021/11/11 Javascript
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android