组件的原则就是模块化,彼此之间相互独立,但是有时候不同的组件之间可能会共用一些功能,共享一部分代码。所以 React 提供了 mixins 这种方式来处理这种问题。
Mixin 就是用来定义一些方法,使用这个 mixin 的组件能够自由的使用这些方法(就像在组件中定义的一样),所以 mixin 相当于组件的一个扩展,在 mixin 中也能定义“生命周期”方法。
var DefaultNameMixin = { getDefaultProps: function () { return { name: "Skippy", food: "Pancakes" }; } }; var ComponentOne = React.createClass({ mixins: [DefaultNameMixin], render: function () { return ( <div> <h4>{this.props.name}</h4> <p>Favorite food: {this.props.food}</p> </div> ) ; } }); ReactDOM.render(<ComponentOne/>, document.body);
Mixin定义的一些功能都是可以共享,如果当我们使用相同状态和属性时将会报错。
var DefaultNameMixin = { getDefaultProps: function () { return {name: "Skippy"}; } }; var ComponentTwo = React.createClass({ mixins: [DefaultNameMixin], getDefaultProps: function () { return { food: "Pancakes", name: "Lizy" }; }, render: function () { return ( <div> <h4>{this.props.name}</h4> <p>Favorite food: {this.props.food}</p> </div> ); } }); ReactDOM.render(<ComponentTwo/>, document.body);
console.log:
Uncaught Error: Invariant Violation: mergeObjectsWithNoDuplicateKeys(): Tried to merge two objects with the same key: name
当我们的component和mixin都含有生命周期方法时,我们的mixin方法始终会先执行.
var LogOnMountMixin = { componentDidMount: function () { console.log("mixin mount method"); } }; var ComponentOne = React.createClass({ mixins: [LogOnMountMixin], componentDidMount: function () {
mixin mount method component one mount method
console.log("component one mount method"); }, render: function() { return <h2>Hello {this.props.name}</h2>; } }); ReactDOM.render(<ComponentOne/>, document.body);
console.log:
mixin mount method component one mount method
当我们include多个mixin时,他们会从左到右执行.
var LogOnMountMixin = { componentDidMount: function () { console.log("mixin mount method"); } }; var MoreLogOnMountMixin = { componentDidMount: function () { console.log("another mixin mount method"); } }; var ComponentOne = React.createClass({ mixins: [MoreLogOnMountMixin, LogOnMountMixin], componentDidMount: function () { console.log("component one mount method"); }, ... var ComponentTwo = React.createClass({ mixins: [LogOnMountMixin, MoreLogOnMountMixin], componentDidMount: function () { console.log("component two mount method"); },
console.log:
another mixin mount method mixin mount method component one mount method mixin mount method another mixin mount method component two mount method
相关推荐
安装直接从npm安装模块: npm install react-timer-mixin例子var React = require ( 'react' ) ;var TimerMixin = require ( 'react-timer-mixin' ) ;var Component = React . createClass ( { mixins : [ Timer
React体 一个React组件,用于检测90年代视频游戏风格的作弊代码。
该存储库仍在开发中,...NPM 如果您有Node.js的需求,则可以通过npm安装此mixin,方法是: npm install react-onoutsideevent --save(或--save-dev取决于您的需求)。 然后,您可以在组件中使用它,如下所示: var Co
Wrapper 类,它为 React 0.13 的 ES6 Component 类添加了一个兼容层,以便在不更改太多代码的情况下更容易使用 ES6 的优点。 你想通过 React 0.13 的 Component 类使用 ES6 类吗? 你想保留你的mixin吗? 你想念...
现在请参阅文件夹和代码以了解更多信息。 更具体的文档会在这个项目成熟后出现。 例子: 平移手势 - 随意拖动方块 Tap Gesture (1 tap) - 点击正方形一次,不再点击,矩形会变大 Tap Gesture (4 taps) - 连续点击...
使用rgba()处理颜色变化,这是一个临时解决方法。 css属性filter应该在此方面做得更好。 字体大小 字体大小旨在响应。 为避免每个断点出现变量,请使用clamp功能。 lib-font-size mixin不可用。 React性 主题的响应...
在 react 组件上指定选项可以帮助生成非常灵活和可重用的代码,但是随着选项变得更加复杂或丰富,选项的排列和变化可能会超出设计的意义。 该模块试图通过提供一种为组件创建命名布局的方法来缓解该问题,这些布局...
react-kup react-kup 是一个简单的、非侵入式的 JSX 替代方案,用于 coffeescript 在构建 react 组件的虚拟 DOM 小单个文件时,自然地使用所有 coffeescript 功能,只有不到 100 行简单、可读、可维护的代码 巨大的...
本文将一一介绍 React 复用组件逻辑的几种方法,希望你读完之后能够有所收获。如果你对这些内容已经非常清楚,那么略过本文即可。 我已尽量对文中的代码和内容进行了校验,但是因为自身知识水平限制,难免有错误,...
现在,该库包含单个React mixin BaconMixin 。 BaconMixin为您的组件提供了几种不同的方法: component.propsProperty( [propName] ) 返回由组件的Bacon.Property支持的记忆化的Bacon.Property ,跳过重复的值。...
前言 React-Router已经发布了多个版本,利用路由导航的使用方法都不大一样,在...React-Router 2.4.0版本以上,可以通过mixin的方法,使组件增加this.router属性,然后进行相应的操作,具体mixin代码参考如下: import
可悬停的 React.js 组件的 mixin。 我写这个是因为我厌倦了编写相同的样板代码来处理组件上的悬停状态。 有了这个类,您现在要做的就是将其混合并进行一些最少的布线。 用法 var ThingWithHover = React....
react-i13n react-i13n 提供了一种高性能、可扩展和可插拔的方法来检测你的 React 应用程序。 通常,您必须在整个应用程序中手动添加检测代码,例如,将 onClick 处理程序连接到您想要跟踪的链接。 react-i13n 提供...
ReactFlux公开以下方法: 1. createConstants(数组常量,字符串前缀) 2. createActions(对象动作) 3. createStore(Object mixin,Array listeners) 4. dispatch(字符串常量,对象有效载荷) 5. mixinFor...
Sass mixin,变量等components ->将在整个应用程序中重用的全局组件。 例如,用于响应性架构的容器组件。 reducers > redux存储的初始状态。 routes ->应用程序的路由。 scenes ->也称为页面。 场景是通过路线显示...
## react-github-notetaker react.js应用程序可从github提取api数据,并通过react-router呈现...reactfire-用于Firebase数据库集成的Mixin 重新基础-用ES6重构代码取代reactfiremixin axios-从github API中提取数据
React托多斯此示例应用程序是标准Meteor Todos示例应用程序的端口,可将React用于所有视图代码。 它演示了以下各种Meteor + React技术:使用React Router进行路由检出 。 您可以看到每个路线如何与React组件相对应,...
Mixin这个概念在React, Vue中都有支持,它为我们抽象业务逻辑,代码复用提供了方便。然而小程序原生框架并没直接支持Mixin。我们先看一个很实际的需求: 为所有小程序页面增加运行环境class,以方便做一些样式hack。...
另外,我遵循CSS和JavaScript的良好做法,以使代码库具有可读性和可重用性。 网址:- 此项目中使用的语言和框架:- React JS和Redux JavaScript,HTML和CSS / SCSS 部署在Firebase上 此项目中使用的概念和要注意...
for和v-if不建议用在一起、React/Vue 项目中 key 的作用、vue组件的通信方式、nextTick的实现原理、具名插槽还是匿名插槽或作用域插槽、keep-alive的实现、mixin、Vuex的理解及使用场景; 适用人群:大学生、前端...