龙空技术网

「最简教程」每天一篇,轻松搞定 React——state篇

全栈和前端 145

前言:

此刻同学们对“react为什么不能直接修改state”大约比较注重,咱们都想要了解一些“react为什么不能直接修改state”的相关文章。那么小编在网络上网罗了一些有关“react为什么不能直接修改state””的相关文章,希望大家能喜欢,朋友们快快来了解一下吧!

同步更新ES6教程

————致力于最简单的前端教程,每天一篇文章,轻松进阶前端

上篇说到组件通过ReactDOM.render方法渲染组件的。

假设我们要做这样一个时间小DEMO:

demo

每秒的变化都要反应在ui上,如果用ReactDOM.render方法,就需要每秒调用次此方法不停的重新渲染组件!这样是不是过于繁琐,react提供了一个更好的方式来更新组件。

为什么不直接操作dom?

这是因为使用React时尽量避免直接操作DOM,diff算法可以尽可能少的修改组件,提高渲染速度。而且React中操作DOM也不方便。

什么是state?

在类组件中,react使用state对象来存放组件的数据,state里的数据变化时,这个组件就会被重新渲染。

注:

state在于类创建的组件中能用 ,它是类的一个属性,对函数创建的组件则无效

原理是state产生变化时自动去调用render方法重新渲染

使用state

初始化state

使用state前必须在构造器中先初始化state。

初始化state

上面初始化了state,存了一个date,值是当前时间。

这里注意:使用构造器时,必须用super去获取props

设置state

this.state是只读的,不能直接修改state的值,需要通过this.setState()方法才能修改。

this.setSate(object)

注:参数是个对象,此对象会自动和state合并,从而修改state。

修改state

这里,我们加个定时器,每秒修改下state,那么组件就跟着会重新渲染了。

本篇文章到此结束,但是目前我们还不能完成这个DEMO,还需要把定时器放在合适的地方——>下篇组件的生命周期。

附完整代码:

完整代码

【前方雾大,关注一下不迷路 = 。=】

【html】【css】【html】【css】【前端开发】【javascript】【html】【javascript】【前端开发】【css】【javascript】【css】【前端开发】

标签: #react为什么不能直接修改state