React笔记-一些要注意的点

最新推荐文章于 2025-11-04 17:14:48 发布

原创最新推荐文章于 2025-11-04 17:14:48 发布 · 636 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

学习ing 同时被 2 个专栏收录

9 篇文章

订阅专栏

react

5 篇文章

订阅专栏

本文探讨了在React中正确使用componentWillUpdate的方法，并强调了为何不应在此生命周期方法中调用this.setState()。同时介绍了如何在秒数为0时改变时钟颜色的正确实现方式。

Markdown
在React中要注意在componentWillUpadate 中不能用 this.setState() 方法。

componentWillUpadate

问题的出现

在学习的时候，有一个例子的要求是，

使用componentWillUpdate()方法修改示例代码，使时钟在秒为0时显示为红色字体！

我一开始在componentWillUpadate()中写的是

……
 componentWillUpadate:function(){
   if(this.state.time.split(':')[2] === '00'){
        this.state. = 'red';
    }
 }
……

程序报bug了。

我去找原因：

You cannot use this.setState() in componentWillUpadate . If you need to update state in response to a prop change, use componentWillReceiveProps instead.

代码如下：

官网上上说的是在componentWillUpadate 中不能用 this.setState() 方法。

设置组件style

设置组件中的style属性时，要双大括号：

<div className="ez-digi-clock"  style={{color:this.state.color}}>
    {this.state.time}
</div>

这是因为 React 组件样式是一个对象，所以第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象