[React] React Fundamentals: Mixins
Mixins will allow you to apply behaviors to multiple React components.
Components are the best way to reuse code in React, but sometimes very different components may share some common functionality. These are sometimes called cross-cutting concerns. React provides mixins to solve this problem.
https://facebook.github.io/react/docs/reusable-components.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Lesson 12: Mixins</title>
<script src="http://fb.me/react-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<style>
body {
margin: 25px;
}
</style>
</head>
<body>
<div id="panel"></div>
<script type="text/jsx">
/** @jsx React.DOM */ var ReactMixin = {
componentWillMount: function(){
console.log("will mount")
},
getInitialState:function(){
return {count:0}
},
incrementCount:function(){
this.setState({count:this.state.count+1})
}
}; var APP = React.createClass({ render: function(){
return (
<div>
<ButtonComponent val="This is a button"></ButtonComponent>
<InputComponent val="this is a input"></InputComponent>
</div>
);
}
}); var ButtonComponent = React.createClass({
mixins: [ReactMixin],
render: function(){
return (
<button onClick={this.incrementCount}>{this.props.val} -- {this.state.count}</button>
);
}
}); var InputComponent = React.createClass({
mixins: [ReactMixin],
//Can double the function in the mixin, React will combine both
componentWillMount: function(){
this.inc = setInterval(this.incrementCount, 500);
},
unmount: function() {
this.componentWillUnmount();
},
render: function() {
return (
<div>
<input type="text" value={this.props.val +' -- '+ this.state.count}/>
<button onClick={this.unmount}>unmount</button>
</div>
);
},
componentWillUnmount: function() {
clearInterval(this.inc);
}
}); React.renderComponent(
<APP />,
document.getElementById('panel')) </script>
</body>
</html>
[React] React Fundamentals: Mixins的更多相关文章
- [React] React Fundamentals: Integrating Components with D3 and AngularJS
Since React is only interested in the V (view) of MVC, it plays well with other toolkits and framewo ...
- React/React Native 的ES5 ES6写法对照表
//es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...
- React/React Native 的ES5 ES6写法对照表－b
很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...
- [React] react+redux+router+webpack+antd环境搭建一版
好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...
- React: React组件的生命周期
一.简介 在前面的第二篇博文中对组件的生命周期虽然做了一个大略介绍,但总感觉说的过于简单,毕竟生命周期是React组件的核心部分.在我们熟练使用React挂载和合成组件来创建应用表现层的过程中,针对数 ...
- React: React的属性验证机制
一.简介 在开发中,属性变量类型的验证,几乎是任何语言都必须关注的问题,因为如果传入的数据类型不对,轻者程序运行仅仅是给出警告⚠️,严重的会直接导致程序中断,APP闪退或者web页面挂掉,这是很严重的 ...
- React/react相关小结
React React组件由React元素组成,React组件使用React.Component或React.PureComponent来生成:React元素使用JSX的语法来编写或使用React.c ...
- [React] React Fundamentals: with-addons - ReactLink
It can be tedious to type out all the boilerplate needed to get the DOM and states in React to synch ...
- [React] React Fundamentals: Component Lifecycle - Updating
The React component lifecycle will allow you to update your components at runtime. This lesson will ...
随机推荐
- HDU 1400 （POJ 2411 ZOJ 1100）Mondriaan's Dream（DP + 状态压缩）
Mondriaan's Dream Problem Description Squares and rectangles fascinated the famous Dutch painter Pie ...
- MinGW 编译libwebsockets
libwebsockets是一个轻量的纯C库,在这里尝试使用MinGW进行构建. 官网地址:http://libwebsockets.org/trac/libwebsockets下载地址:http:/ ...
- JAVA与C++的区别和联系
这篇总结的貌似不错: http://wenku.baidu.com/link?url=VixkWGl0BzUkmceaDJnQeUhzKEIex6poGaKKvMTP87P8a7HTmS5uIi87I ...
- 【HDOJ】3909 Sudoku
DLX的应用,基本题,注意maxnode开大点儿. /* 3909 */ #include <iostream> #include <string> #include < ...
- 坑爹的libxml2 for mingw 编译 （二)
makefile 中由于大量使用了cmd /C ""样式去执行mkdir和copy操作,导致mingw最后出错,因为会从mingw切换至cmd界面.因此需要把相关代码进行修改. # ...
- Form.block Trigger DML常规写法
Block的数据源是View的,如果想操作数据,需要注意在以下几个Trigger里面写代码: 一般建议创建View的时候包含rowid字段. on-lock: select inventory_ite ...
- hadoop2.2编程：Tool, ToolRunner, GenericOptionsParser, Configuration
继承关系: 1. java.util Interface Map.Entry<K,V> description: public static interface Map.Entry&l ...
- PHP imdb类多个跨站脚本漏洞
漏洞版本: PHP imdb Classes 2-2.1.5 漏洞描述: BUGTRAQ ID: 64542 PHP是一种HTML内嵌式的语言. PHP imdb类2-2.1.5及其他版本在实现上存在 ...
- Mater Nginx(2) - A Configuration Guide
The basic configuration format Nginx global configuration parameters Using include files The HTTP se ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...