React组件的生命周期

墨蓝 2022-05-21 12:40 279阅读 0赞

![70][]

var Hello = React.createClass({
    
        getInitialState:function(){
    
            alert('init');
    
            return{
    
                opacity:1.0,
    
                fontSize:'12px'
    
            };
    
        },
    
        render:function(){
    
            //return <div style={this.state}>Hello {this.props.name}</div>
    
            return <div style={
       {opactity:this.state.opactity,fontSize:this.state.fontSize}}>Hello {this.props.name}</div>
    
        },
    
        componentWillMount:function(){
    
            alert('will');
    
        },
    
        componentDidMount:function(){
    
            alert('did);
    
    
    
            var _self = this;
    
            window.setTimeout(function(){
    
                _self.setState({
    
                    opacity: 0.5,
    
                    fontSize: '44px'
    
                });
    
            },1000);
    
        }
    
    });
    
    React.render(<Hello name="Word"/>,document.getElementById('container'));

[70]: /images/20220521/93637e68e0084715b42636d0ef4b4c6a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，279人围观）

还没有评论，来说两句吧...

相关阅读

相关 React组件和生命周期

React组件和生命周期 ![format_png][] 一 React组件组件是React的核心、精髓。组件有输入、输出以及自身状态，分别对应props、rende

素颜马尾好姑娘i/ 2023年07月03日 12:19/ 0 赞/ 63 阅读

相关 React组件的生命周期(粗略)

Mounting 1. constructor() 2. componentWillMount() 3. render() 4. componentDidMoun

心已赠人/ 2023年06月13日 08:56/ 0 赞/ 14 阅读

相关 React组件生命周期过程说明

实例化首次实例化 > getDefaultProps > getInitialState > componentWillMount > ren

落日映苍穹つ/ 2022年06月16日 13:06/ 0 赞/ 253 阅读

相关浅谈React组件的生命周期

![Center][] 组件的生命周期有3个主要部分： 1) 实例化：组件被注入DOM。 2) 存在期：组件被重新渲染来决定DOM是否应被更新。 3)

太过爱你忘了你带给我的痛/ 2022年06月16日 03:56/ 0 赞/ 299 阅读

相关前端开发之React组件生命周期

React组件在加载时都有特定的生命周期，在此期间不同的方法会被执行。组件有三种状态：加载：组件实例从创建到最终显示在终端更新：组件加载完成后，组件的属性

比眉伴天荒/ 2022年06月16日 03:43/ 0 赞/ 295 阅读

相关 React组件生命周期小结

React组件生命周期小结 ———- \这篇博客是我在简书上看到的，写的实在是太好了，\[这是原文地址\](http://www.jianshu.com/p/478421

淡淡的烟草味﹌/ 2022年06月03日 05:09/ 0 赞/ 259 阅读

相关 React组件的生命周期

概述 React组件的生命周期就是React组件从创建到消亡的过程。大致分为三个阶段： 1.Mounting 组件装载和初始化 2.Updatin

ゝ一纸荒年。/ 2022年06月03日 04:07/ 0 赞/ 391 阅读

相关 React组件的生命周期

![70][] var Hello = React.createClass({ getInitialState:function(){

墨蓝/ 2022年05月21日 12:40/ 0 赞/ 280 阅读

相关 React组件的生命周期及执行顺序

本文原创地址链接：[http://blog.csdn.net/zhou\_xiao\_cheng/article/details/52461414][http_blog.csd

左手的ㄟ右手/ 2022年05月20日 02:49/ 0 赞/ 280 阅读

相关 React 组件生命周期

在本章节中我们将讨论 React 组件的生命周期。组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲染

超、凢脫俗/ 2022年02月16日 10:15/ 0 赞/ 342 阅读