reactjs入门到实战---- 组件详解

Posted 2020-07-20 快乐~

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:0};
                },
                componentDidMount:function(){
                    this.setInterval(this.tick,1000);
                },
                tick:function(){
                    this.setState({seconds:this.state.seconds+1});
                },
                render:function(){
                    return(
                    <p>
                        React has been running for {this.state.seconds} seconds.
                    </p>
                    );
                }
            });
            
            ReactDOM.render(
                <TickTock />,
                document.getElementById(‘example‘)
            );
            
        </script>