文档章节

reactJS -- 10 独立组件间共享Mixins

奋斗的小芋头
 奋斗的小芋头
发布于 2017/07/04 12:14
字数 365
阅读 16
收藏 0

一. 概述(ES6不支持,需要插件)

1.虽然组件的原则就是模块化,彼此之间相互独立,但是有时候不同的组件之间可能会共用一些功能,共享一部分代码。所以 React 提供了 mixins 这种方式来处理这种问题。

2.Mixin 就是用来定义一些方法,使用这个 mixin 的组件能够自由的使用这些方法(就像在组件中定义的一样),所以 mixin 相当于组件的一个扩展,在 mixin 中也能定义“生命周期”方法。

3.React 的 mixins 的强大之处在于,如果一个组件使用了多个 mixins,其中几个 mixins 定义了相同的“生命周期方法”,这些方法会在组件相应的方法执行完之后按 mixins 指定的数组顺序执行。

二.事例

使用需要引入插件: https://github.com/brigand/react-mixin

安装依赖包 :

npm install --save react-mixin@2

在所有组件间都可以调用同一个log 方法。

1.创建 Minxins.js 

const MixinLog{
  log(){
    console.log("abcd......");
  }
};
export default MixinLog; //暴露出来

2.在bodyindex 中引入 Minxins.js

import react-mixin from 'react-mixin';
import MixinLog from './Mixins.js';

3.将方法加入到BodyIndex类中

BodyIndex.propTypes = {
  userId : React.PropTypes.number.isRequired, //必须参数
}

BodyIndex.defaultProps = defaultProps; // 默认值

ReactMixin(BodyIndex.prototype, MixinLog);

4.调用生命周期函数

const MixinLog = {
  //调用生命周期函数
  componentDidMount(){
      console.log("componentDidMount.log");
  },
  log(){
    console.log("abcd......");
  }
};
export default MixinLog; //暴露出来

© 著作权归作者所有

奋斗的小芋头
粉丝 1
博文 161
码字总数 129345
作品 0
大连
私信 提问
一看就懂的ReactJs入门教程-精华版

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJs的风采吧~~ 文章有点...

方宏春
2018/06/20
0
0
React 与 Domcom 面对面 -- domcom 好在哪里?

在John Resig设计的jQuery独霸前端javascript多年之后,Google推出的重量级AngularJS给前端开发带来巨大的观念变化,给人耳目一新之感,同时也推动前端的观念、技术和框架领域进入快速迭代,...

局长
2016/08/27
2.8K
22
选择 Reac​​tJS 的五大理由

ReactJS是一个开源的JavaScript库,并且由Facebook和Instagram这样的顶尖IT企业以及开发者社区所维护。该框架广泛使用于为web应用程序开发用户界面的时候。这个特殊的框架被发明时带有这样一...

达尔文
2016/09/12
4.1K
32
ReactJs入门教程-精华版

一、ReactJS简介   React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西...

-鹏
2015/11/10
0
0
ReactJS 的 Hello world 示例程序

这篇文章提供了代码实例和在React.js(一个Facebook工程师开发的被用于构建用户界面的Javascript库)中高水平的概念.这些概念会被详细的发表在下面的文章里.在此,我必须提示如果你是一名Rea...

oschina
2014/08/14
9.8K
11

没有更多内容

加载失败,请刷新页面

加载更多

蚂蚁区块链BaaS:开放在云端,落地于实体

自 2018 年 6 月上线以来,蚂蚁区块链 BaaS 不断在技术上实现突破,形成自身独特的优势,并做为行业领军者在不同领域的几十个场景实现落地。在区块链的商用时代加速到来之际,通过开放自身的...

阿里云官方博客
34分钟前
3
0
Idea cannot access【好使】

Idea中无法访问类中public方法。。 解决: idea点击左下角电脑图标,打开右边栏各种功能键 右边栏Maven Projects中点一下刷新,就是那个两个蓝的箭头组成的环 ----------------------------...

Airship
34分钟前
3
0
Spark内置图像数据源初探

作者:林武康,花名知瑕, 阿里巴巴计算平台事业部EMR团队的高级开发工程师,Apache HUE Contributor, 参与了多个开源项目的研发工作,对于分布式系统设计应用有较丰富的经验,目前主要专注于...

阿里云云栖社区
35分钟前
1
0
【面试被虐】游戏中的敏感词过滤是如何实现的?

小秋今天去面试了,面试官问了一个与敏感词过滤算法相关的问题,然而小秋对敏感词过滤算法一点也没听说过。于是,有了以下事情的发生….. 面试官开怼 面试官:玩过王者荣耀吧?了解过敏感词过...

爱编程的浪子
37分钟前
4
0
springboot之maven属性引入

<plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-resources-plugin</artifactId><version>2.7</version><configuration><delimiters><delimite......

Online_Reus
38分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部