React笔记-一些要注意的点

小鱼儿 2022-06-17 04:56 152阅读 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.

代码如下：

height="265" scrolling="no" title="LWbYKY" src="//codepen.io/ziazan/embed/LWbYKY/?height=265&theme-id=0&default-tab=js,result&embed-version=2" allowfullscreen="true">See the Pen <a href="http://codepen.io/ziazan/pen/LWbYKY/">LWbYKY</a> by ziazan (<a href="http://codepen.io/ziazan">@ziazan</a>) on <a href="http://codepen.io">CodePen</a>.&\#10;

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

## 设置组件style ##

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

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

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

[Markdown]: http://p1.bqimg.com/582279/ed220c3d21dd7467s.png

发表评论取消回复

表情：

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

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

相关阅读

相关 apicloud开发时的一些注意点

优化点击事件，添加`tapmode="selected"`跳转速度加快 <footer class="aui-bar aui-bar-tab" id="footer"

叁歲伎倆/ 2022年12月25日 02:55/ 0 赞/ 170 阅读

相关【React】1036- React 中的一些 Router 必备知识点

前言每次开发新页面的时候，都免不了要去设计一个新的 URL，也就是我们的路由。其实路由在设计的时候不仅仅是一个由几个简单词汇和斜杠分隔符组成的链接，偶尔也可以去考虑有没

傷城~/ 2022年08月29日 10:13/ 0 赞/ 172 阅读

相关压力测试的一些注意点

今天给新来的人说了一下压力测试的一些注意点顺便贴到这里，分享一下，偶们的系统是linux下的多进程svr 一般要注意以下的一些点： 1、压测的客户端与被压的svr端

小灰灰/ 2022年07月14日 15:16/ 0 赞/ 214 阅读

相关内部类的一些注意点

关于匿名内部类使用局部变量为什么要是final： java采用copy local variable来实现final，也就是说把定义为final的局部变量老被过来用，引用的也

绝地灬酷狼/ 2022年07月12日 08:53/ 0 赞/ 168 阅读

相关 React笔记-一些要注意的点

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

小鱼儿/ 2022年06月17日 04:56/ 0 赞/ 153 阅读

相关 react中的JSX注意点

定义组件时，最外层必须有一个标签进行包裹。例如： / 报错 / const component1 = <div>123</div><

本是古典何须时尚/ 2022年05月23日 10:35/ 0 赞/ 147 阅读

相关关于Optional orElseGet的一些注意点

前提 : 现在有A B C三个类, 代码如下 : A.java package com.ahut.essearch.Optional; / de

小咪咪/ 2022年05月12日 10:10/ 0 赞/ 183 阅读

相关使用CefSharp的一些需要注意的点

程序关闭的时候一定要加上： CefSharp.Cef.Shutdown(); 因为关闭的时候，不将浏览器关闭的话，会阻塞主线程导致报错。修复CefS

分手后的思念是犯贱/ 2022年01月12日 12:35/ 0 赞/ 544 阅读

相关 Vue中一些需要注意的点

1.给link添加事件、给组件绑定原生事件在vue-router1中使用v-link写入路由，但是在vue-router2中要使用router-link写入路由，在浏览器渲

雨点打透心脏的1/2处/ 2021年09月18日 02:20/ 0 赞/ 415 阅读

相关注册模块要注意点

1.校验模块输入校验非常麻烦，需要进行大量的判断，这时我们可以使用Struts 2提供的校验框架来实现。校验规则文件名为 Action名+”-validatio

我会带着你远行/ 2021年09月11日 03:40/ 0 赞/ 257 阅读