reactjs入门到实战（三）---- 组件详解

owner  》》》 传递 props

this 》》》是默认指向组件本身

key》》》不能没有，在复用的情况下

组件：例子

<!--
                输入：props & state
                输出：html
            -->

            var LikeButton = React.createClass({
                getInitialState:function(){
                    return {liked: false};
                },

                handleClick:function(event){
                    this.setState({Liked: !this.state.liked});
                },

                render:function(){
                    var text = this.state.liked ? 'like' : 'haven\'t liked';
                    return(
                    <p onClick={this.handleClick}>
                        You {text} this. Click to toggle.
                    </p>
                    );
                }
            });

            ReactDOM.render(
                <LikeButton />,document.getElementById('example')
            )

复合组件：

》》》继承   小的继承大的

》》》组合   用小的东西组成的的东西。

<div id="example"></div>
        <script type="text/babel">
            //设置要混合的对象
            var SetIntervalMixin = {

                componentWillMount:function(){
                    this.intervals = [];
                },

                setInterval:function(){
                    this.intervals.forEach(clearInterval);
                },

                componentWillUnmount:function(){
                    this.intervals.forEach(clearInterval);
                }
            };

            //主要的组件
            var TickTock = React.createClass({
                mixins:[SetIntervalMixin],
                getInitialState:function(){
                    return{seconds:};
                },
                componentDidMount:function(){
                    this.setInterval(this.tick,);
                },
                tick:function(){
                    this.setState({seconds:this.state.seconds+});
                },
                render:function(){
                    return(
                    <p>
                        React has been running for {this.state.seconds} seconds.
                    </p>
                    );
                }
            });

            ReactDOM.render(
                <TickTock />,
                document.getElementById('example')
            );

        </script>