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>

查看全文

相关阅读:
Binary Tree Maximum Path Sum
4Sum
Candy
Simplify Path
Max Points on a Line
ZigZag Conversion
Two Sum
Effective_STL 学习笔记（十二）对STL线程安全性的期待现实一些
 Effective_STL 学习笔记（十一）理解自定义分配器的正确用法
 Effective_STL 学习笔记（九）在删除选项中仔细选择

原文地址：https://www.cnblogs.com/Answer1215/p/4366237.html