前言:
此刻同学们对“react为什么不能直接修改state”大约比较注重,咱们都想要了解一些“react为什么不能直接修改state”的相关文章。那么小编在网络上网罗了一些有关“react为什么不能直接修改state””的相关文章,希望大家能喜欢,朋友们快快来了解一下吧!同步更新ES6教程
————致力于最简单的前端教程,每天一篇文章,轻松进阶前端
上篇说到组件通过ReactDOM.render方法渲染组件的。
假设我们要做这样一个时间小DEMO:
每秒的变化都要反应在ui上,如果用ReactDOM.render方法,就需要每秒调用次此方法不停的重新渲染组件!这样是不是过于繁琐,react提供了一个更好的方式来更新组件。
为什么不直接操作dom?
这是因为使用React时尽量避免直接操作DOM,diff算法可以尽可能少的修改组件,提高渲染速度。而且React中操作DOM也不方便。
什么是state?
在类组件中,react使用state对象来存放组件的数据,state里的数据变化时,这个组件就会被重新渲染。
注:
state在于类创建的组件中能用 ,它是类的一个属性,对函数创建的组件则无效
原理是state产生变化时自动去调用render方法重新渲染
使用state
初始化state
使用state前必须在构造器中先初始化state。
上面初始化了state,存了一个date,值是当前时间。
这里注意:使用构造器时,必须用super去获取props
设置state
this.state是只读的,不能直接修改state的值,需要通过this.setState()方法才能修改。
this.setSate(object)
注:参数是个对象,此对象会自动和state合并,从而修改state。
这里,我们加个定时器,每秒修改下state,那么组件就跟着会重新渲染了。
本篇文章到此结束,但是目前我们还不能完成这个DEMO,还需要把定时器放在合适的地方——>下篇组件的生命周期。
附完整代码:
【前方雾大,关注一下不迷路 = 。=】
【html】【css】【html】【css】【前端开发】【javascript】【html】【javascript】【前端开发】【css】【javascript】【css】【前端开发】
标签: #react为什么不能直接修改state