zoukankan      html  css  js  c++  java
  • [React] React Fundamentals: Mixins

    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>
  • 相关阅读:
    不怕上不了 Android developers
    不花钱的可靠性设计
    linux2.6 内核特性配置
    Linux动态库的编译与使用 转载
    多线程使用互斥锁的C范例
    TSLIB 分析
    Notepad++中文版下载 以及HEX显示
    C程序实现在lcd 上全屏写 blue 色 及获取fb信息
    pthread_cond_wait的spurious wakeup问题
    查看linux内存条数的命令与清理内存使用
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4366237.html
Copyright © 2011-2022 走看看