[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 ...
随机推荐
- 找不到mysql服务或mysql服务名无效
问题原因:mysql服务没有安装. 解决办法: 在 mysql bin目录下 以管理员的权限 执行 mysqld -install命令 出现:Service successfully installe ...
- 二维图形的矩阵变换（二）——WPF中的矩阵变换基础
原文:二维图形的矩阵变换(二)--WPF中的矩阵变换基础 在前文二维图形的矩阵变换(一)——基本概念中已经介绍过二维图像矩阵变换的一些基础知识,本文中主要介绍一下如何在WPF中进行矩阵变换. Matr ...
- [Android] 修改设备访问权限
在硬件抽象层模块中,我们是调用open函数来打开对应的设备文件的.例如,在2.3.2小节中开发的硬件抽象层模块freg中,函数freg_device_open调用open函数来打开设备文件/dev/f ...
- 手势识别官方教程(3)识别移动手势(识别速度用VelocityTracker)
moving手势在onTouchEvent()或onTouch()中就可识别,编程时主要是识别积云的速度用VelocityTracker等, Tracking Movement This lesson ...
- Hibernate包及相关工具包下载地址
Hibernate包及相关工具包下载地址: http://prdownloads.sourceforge.net/hibernate/ 这里包含所有hibernate各个版本的包下载,且提供了 Mid ...
- -_-#【减少 DOM 元素】textarea, script 延迟渲染
淘宝详情页的 BigRender 优化与存放大块 HTML 内容的最佳方式 淘宝详情页的BigRender优化的最佳方式 <!DOCTYPE html> <html> < ...
- c# 无损高质量压缩图片代码
/// <summary> /// 无损压缩图片 /// </summary> /// <param name="sFile">原图片</ ...
- ifconfig命令
许多windows非常熟悉ipconfig命令行工具,它被用来获取网络接口配置信息并对此进行修改.Linux系统拥有一个类似的工具,也就是ifconfig(interfaces config).通常需 ...
- IIS里面网站停止了，不能启动
IIS里面网站文件夹显示红色的叉叉,停止了,不能启动,所有站点都停止了: 原来是Word wide web publish service 服务停止了,启动就好了
- html input设置为只读属性
有两种方式可以实现input的只读效果:disabled 和 readonly. 自然两种出来的效果都是只能读取不能编辑,可是两者有很大不同. Disabled说明该input无效,及其value不会 ...