同步更新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】【前端开发】