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. ANDROID_MARS学习笔记_S02_004_ExpandableListActivity

    1.main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" x ...

  2. Spring 3.x企业应用开发实战(14)----事务

    Spring虽然提供了灵活方便的事务管理功能,但这些功能都是基于底层数据库本身的事务处理机制工作的.要深入了解Spring的事务管理和配置,有必要先对数据库事务的基础知识进行学习. 何为数据库事务 “ ...

  3. BZOJ_1778_[Usaco2010_Hol]_Dotp_驱逐猪猡_(期望动态规划+高斯消元+矩阵)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1778 炸弹从1出发,有\(\frac{P}{Q}\)的概率爆炸,如果不爆炸,等概率移动到连通的 ...

  4. Hibernate: org.hibernate.exception.SQLGrammarException: could not insert: 错误

    最近在学习Java Web,今天刚接触Hibernate.学习的书籍是<轻量级Java EE企业应用实战(第3版)>.书中367页5.2.2中给予的Hibernate例子中的代码运行有以下 ...

  5. apache开源项目--Apache POI

    Apache POI是一个开源的Java读写Excel.WORD等微软OLE2组件文档的项目.目前POI已经有了Ruby版本. 结构: HSSF - 提供读写Microsoft Excel XLS格式 ...

  6. 一个TextView使用不同的颜色

    一个TextView使用不同的颜色: textview中首先需要已经有内容了 public static void ColorFormatTextView(TextView tv,int color, ...

  7. 【转】VC中对文件的读写

    原文网址:http://www.cnblogs.com/LJWJL/archive/2012/10/06/2712466.html 注意: 1.由于C是缓冲写 所以要在关闭或刷新后才能看到文件内容 2 ...

  8. 利用OpenXml生成Word2007文档

    一.OpenXml简介 利用C#生成Word文档并非一定要利用OpenXml技术,至少可以使用微软提供的Office相关组件来编程,不过对于Office2007(确切的说是Word.Excel和Pow ...

  9. Shell获取文件后缀名

    file = "thisfile.txt" echo "filename: ${file%.*}" echo "extension: ${file## ...

  10. [King.yue]Grid列赋值文本，隐藏Value

    例:public string InputFormat 加扩展属性:public string InputFormatText 构造函数中根据Key取到Value的值: var data = Data ...