zoukankan      html  css  js  c++  java
  • react 组件的生命周期

    componentWillMount:组件出现前,dom还没有渲染到html文档里面;

    componentDidMount:件渲染完成 已经出现在dom文档里;

    componentWillUnmount:说该事件在组件即将被移除dom时会触发;

    React 生命周期 demo

    首先引入相关的js

    <script type="text/javascript" src="react.js"></script>
    <script type="text/javascript" src="JSXTransformer.js"></script>

    <script type="text/jsx">
            
            var Timer=React.createClass({
                getInitialState:function(){
                    return {secondsElapsed:0}
                },
                tick:function(){
                    this.setState({secondsElapsed:this.state.secondsElapsed+1});
                },
                
                componentDidMount:function(){
                    this.interval=setInterval(this.tick,1000);
                },
                componentWillUnmount:function(){
                    clearInterval(this.interval);
                },
                render:function(){
                    return (<div>timer:{this.state.secondsElapsed}</div>)
                }
            });
    
            
            React.render(<Timer />,document.body)
            
    
        
        </script>
    如果问题,欢迎大家及时指点,一同交流,共同提高
  • 相关阅读:
    Javascript FP-ramdajs
    微信小程序开发
    SPA for HTML5
    One Liners to Impress Your Friends
    Sass (Syntactically Awesome StyleSheets)
    iOS App Icon Template 5.0
    React Native Life Cycle and Communication
    Meteor framework
    RESTful Mongodb
    Server-sent Events
  • 原文地址:https://www.cnblogs.com/wujidns/p/5613399.html
Copyright © 2011-2022 走看看