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. 设置Tomcat的UTF-8编码

    利用request.setCharacterEncoding("UTF-8");来设置Tomcat接收请求的编码格式,只对POST方式提交的数据有效,对GET方式提交的数据无效! ...

  2. Android 关于HttpClient上传中文乱码的解决办法

    使用过HttpClient的人都知道可以通过addTextBody方法来添加要上传的文本信息,但是,如果要上传中文的话,或还有中文名称的文件会出现乱码的问题,解决办法其实很简单: 第一步:设置Mult ...

  3. Android开发UI之Navigation Drawer

    http://blog.csdn.net/xyz_lmn/article/details/12523895

  4. bzoj1565

    很明显是最大权闭合子图,但要注意互相保护的植物打不掉,被互相保护的植物所直接或间接保护的植物也打不掉我们先拓扑排序然后dfs出能打掉的点,然后做最大权闭合子图 ; type node=record p ...

  5. -_-#【减少 DOM 访问】“离线”更新节点，再将它们添加到树中

    Minimize DOM Access javascript 之 DOM 优化 <!DOCTYPE html> <html> <head> <meta cha ...

  6. 2016值得关注的语言平台、JS框架

    语言和平台 Python 3.5 在今年发布了,带来了很多新特性 比如 Asyncio,,为你带来了类似 node.js 的事件机制,还有type hints. 鉴于Python 3 终于真正地火起来 ...

  7. Android 实用代码七段（二）

    声明 欢迎转载,但请保留文章原始出处:)  博客园:http://www.cnblogs.com 农民伯伯: http://over140.cnblogs.com 正文 一.获取应用程序下所有Acti ...

  8. Html笔记(九)头标签

    头标签: <head> 头标签都放在 <head> </head> 头部分之间.包括:title base meta link <title> :指定浏 ...

  9. bzoj 2434 [Noi2011]阿狸的打字机（fail树+离线处理+BIT）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2434 [题意] 按照一定规则生成n个字符串,回答若干个询问:(x,y),问第x个字符串 ...

  10. vijosP1359 Superprime

    vijosP1359 Superprime 链接:https://vijos.org/p/1359 [思路] 搜索+数学. 很明显的搜索,依次确定每一个数,用参数sum记录dfs即可. 本题的关键在于 ...