更新组件的状态

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

设置组件状态以后,如果状态跟之前相比有变化,这个组件就会重新显示。我们可以使用某种方法,跟服务端保持沟通,比如 WebSocket .. 这样服务端上的数据有变化的时候就会发出通知 .. 这样我们就可以执行一下 setState 去设置一下组件的状态,让它重新显示。

这里我们可以简单的设置一下,每隔 5 秒钟去向服务端发出一次请求,然后再执行一下组件的状态 .. 先把发请求的这个 ajax 方法单独设置成一个方法 .. 剪切一下 constructor 里的 ajax 方法 .. 在它下面现去定义一个方法 .. 名字是 getComments .. 它做的事就是使用这个 ajax 方法去请求数据 ..

然后在这个 constructor 里面,先使用一下这个方法 .. this.getComments(); .. 然后再用一个 setInterval 设置一下每隔几秒钟就去执行一下这个 getComments() ..

先给它一个函数 .. 这个函数的作用就是去执行一下 this.getComments() .. 逗号分隔一下 .. 再设置一下间隔的时间 .. 这里设置成 5000 毫秒 .. 也就是每隔 5 秒钟就会执行 getComments 向服务端发生请求 .. 保存 ..

打开浏览器 .. 再打开 comments.json 这个文件 .. 这里我们可以手工去添加一条新的评论数据 .. 保存 ... 过几秒钟以后, 页面上会出现新添加的评论 ..

因为 CommentBox 这个组件每隔 5 秒会去发出一次请求,然后设置一下组件的状态 .. 状态有变化的话,组件就会更新一下显示 ..

这里再添加几条评论数据 ... 过一会儿,这些评论又会显示在页面上 .. 再去掉一些评论内容 ... 过一会儿,页面上也会更新一下显示,去掉已经删除掉的评论 ...

更新组件的状态《 React 基础 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点