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. 转载爱哥自定义View系列－－文字详解

    FontMetrics FontMetrics意为字体测量,这么一说大家是不是瞬间感受到了这玩意的重要性?那这东西有什么用呢?我们通过源码追踪进去可以看到FontMetrics其实是Paint的一个内 ...

  2. HTML <!--...--> 注释标签

    HTML <!--...--> 注释标签 实例 HTML 注释: <!--这是一个注释,注释在浏览器中不会显示--> <p>这是一个段落</p>   浏 ...

  3. C#中的ODBC、OLEDB连接

      using System;using System.Collections.Generic;using System.Text;using System.Data.Odbc;using Syste ...

  4. 查找Form的文件名

    我们经常会要在ORACLE EBS中寻找我们正在浏览的form页面的执行文件,我们都会直接在Help中的菜单里点击"About Oracle Application",然后查看当前 ...

  5. HTTP请求中的缓存(cache)机制

    http://www.chaorenmao.com/blog/?p=79 流程 当资源第一次被访问的时候,HTTP头部如下 (Request-Line)  GET /a.html HTTP/1.1Ho ...

  6. java类转化为json对象

    方式一:使用jar包,直接转化成json格式,再使用outwrite写到jsp中 先说说要使用到的包commons-beanutils.jar.commons-collections.jar.comm ...

  7. Oracle将英文字符集数据转换成中文

    转换背景:老系统数据为英文字符集,需要将老数据(Oracle 8i)转换到oracle 10g(中文字符集)中 思路:先将老数据从8i的数据库中导出,导出的数据库文件为英文字符集,再将10g的数据库改 ...

  8. SR4000（二）

    返回相位(用于测距离,一个全相位代表5m)  D=3*10^8/2f(60M)=5m full-phase(0xffff) 返回LED反射光的振幅和背景光均值 无效数据: B太大 幅度(也是16bit ...

  9. [codevs]失恋28天题目系列

    失恋28天-追女孩篇 题目描述 Description 呵呵,相信大家失恋33天都看过吧,里面的主人公黄小仙和王小贱都有印象吧!这回我要给大家讲的是我 们班同学的失恋经历,呵呵他总共失恋了28天.但是 ...

  10. 【HTML】Advanced6：HTML5 Forms Pt. 1: Input Types

    1.Not yet work fully on all major browsers 2.<input type="search tel url email datetime date ...