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. JavaScript 弹出窗体点击按钮返回选择数据的实现

    首先是父页面的代码: <head runat="server"> <title>无标题页</title> <%-- <script ...

  2. 第一章 USB Type C的基本原理

    图 1: USB Type C接头外形 USB Type C(简称USB-C)的基本特性: 1. 接口插座的尺寸与原来的Micro USB规格一样小,约为8.3mm X 2.5mm 2. 可承受1万次 ...

  3. 延时过程中要加上app.processEvents()，进度条里也要加上这句

    如何让程序等待一段时间QTime t;t.start();while(t.elapsed()<1000);这种死循环也是一种常见错误用法.但改成正确的还是比较简单的: QTime t;t.sta ...

  4. tlplayer for android V2.7(支持变速不变调) 2014-07-20更新

    2014-07-20新版本已经修复部分视频倾斜问题,已经更新到服务器,需要的朋友自行下载. 此版本修正了倾斜问题,增加水印等功能.可以动态添加水印. tlplayer for android V2.6 ...

  5. Android开发UI之Action Bar

    郭大神的讲解:http://blog.csdn.net/guolin_blog/article/details/18234477 官网链接:http://developer.android.com/i ...

  6. bzoj1046

    首先这肯定是一道LIS的变形,这次求的是方案,还要求字典序最小 (注意这个字典序最小是指下标最小而不是数最小) 首先预处理以每个数为首,能组成多长的上升序列(这里我们用单调队列解决) 然后按照位置顺序 ...

  7. Win32下 Qt与Lua交互使用（二）：在Lua脚本中使用Qt类

    话接上篇.成功配置好Qt+Lua+toLua后,我们可以实现在Lua脚本中使用各个Qt的类.直接看代码吧. #include "include/lua.hpp" #include ...

  8. JAVA与.NET的相互调用——利用JNBridge桥接模式实现远程通讯

    分布式开发的历史 利用Remote方式调用远程对象实现服务器与客户端之间通讯是一种常用的网络开发方式,在.NET与JAVA开发当中,对Remote远程对象早已有着足够的支持(对Remote远程对象调用 ...

  9. zz-rtl8188eu的linux-usb-wifi调试及驱动编译150210

    //zz//####################################################################### zz-rtl8188eu的linux-usb ...

  10. LinkedList源码解析

    LinkedList是基于链表结构的一种List,在分析LinkedList源码前有必要对链表结构进行说明.1.链表的概念链表是由一系列非连续的节点组成的存储结构,简单分下类的话,链表又分为单向链表和 ...