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的更多相关文章

  1. [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 ...

  2. React/React Native 的ES5 ES6写法对照表

    //es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...

  3. React/React Native 的ES5 ES6写法对照表－b

    很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...

  4. [React] react+redux+router+webpack+antd环境搭建一版

    好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...

  5. React: React组件的生命周期

    一.简介 在前面的第二篇博文中对组件的生命周期虽然做了一个大略介绍,但总感觉说的过于简单,毕竟生命周期是React组件的核心部分.在我们熟练使用React挂载和合成组件来创建应用表现层的过程中,针对数 ...

  6. React: React的属性验证机制

    一.简介 在开发中,属性变量类型的验证,几乎是任何语言都必须关注的问题,因为如果传入的数据类型不对,轻者程序运行仅仅是给出警告⚠️,严重的会直接导致程序中断,APP闪退或者web页面挂掉,这是很严重的 ...

  7. React/react相关小结

    React React组件由React元素组成,React组件使用React.Component或React.PureComponent来生成:React元素使用JSX的语法来编写或使用React.c ...

  8. [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 ...

  9. [React] React Fundamentals: Component Lifecycle - Updating

    The React component lifecycle will allow you to update your components at runtime. This lesson will ...

随机推荐

  1. java中的CAS

    转自:http://www.blogjava.net/mstar/archive/2013/04/24/398351.html Atomic 从JDK5开始, java.util.concurrent ...

  2. Altium Designer学习： 原理图和PCB元件对应查找

    画PCB的时候,需要经常的去查看原理图上对应的元件,元件数目少还好找,数目多了找起来就比较扯淡.还要Altium Designer提供了不错的交叉查找功能. 这里我建议使用两个显示器,一个显示器放原理 ...

  3. Javascript实现摩斯码加密解密

    原文地址 作者:liaoyu 摩尔斯电码是一种时通时断的信号代码,通过不同的排列顺序来表达不同的英文字母.数字和标点符号,是由美国人萨缪尔·摩尔斯在1836年发明. 每一个字符(字母或数字)对应不同的 ...

  4. 图片url中包含中文导致网络请求404

    需要对其中的中文使用转换格式,注意不是整个url,如果是整个,"/"这个网络分隔符｀也会被转换的 URLEncoder.encode("福利", "u ...

  5. 奇怪的JS

    有的时候发现JS是一门很高深的语言,不是我等俗人可以学会,没有private,没有public不说,居然连Class都没有,这个世界就是这样,有的东西你不一定非要想通,也不一定非要剖根问底,有的时候你 ...

  6. yiic 数据库迁移工具

    数据库的结构也同源代码一样随着我们开发的进行而不断的发生着改变.在开发过程中,一般的我们需要像管理我们的源代码一样记录下数据库结构的整个变化过程,以便代码还原到指定版本后,数据库能同步的还原到指定的版 ...

  7. Fedora 17下交叉编译vlc-2.0.6-win32小记

    关于编译windows下的vlc网上的教程除了翻译N年前wiki官网的那些蚂蚁文之外,可以说基本没啥参考意义和价值.因为那些都是非常老的版本,0.8.x或者1.x.x,而我这个人有喜欢新鲜事儿,所以就 ...

  8. ☀【JS】eval

    避免使用 eval <!doctype html> <html lang="zh-CN"> <head> <meta charset=&q ...

  9. c语言字符串库函数#include<string.h>

    字符串函数<string.h> 在头文件<string.h>中定义了两组字符串函数.第一组函数的名字以str开头:第二组函数的名字以mem开头.只有函数memmove对重叠对象 ...

  10. 谈谈分布式事务之二：基于DTC的分布式事务管理模型[下篇]

    [续上篇] 当基于LTM或者KTM的事务提升到基于DTC的分布式事务后,DTC成为了本机所有事务型资源管理器的管理者:此外,当一个事务型操作超出了本机的范 围,出现了跨机器的调用后,本机的DTC需要于 ...