前端教程:React中setState的用法

开课吧开课吧锤锤2021-07-14 14:03

React中setState中的使用有一下几点注意事项:  

React中setState的用法

1、React.setState更新数据是异步的,也就是并不会马上更新数据,而是在一次轮询之后将所有的State统一进行更改,这种方法可以减少DOM元素的重绘,但是也会造成一些问题。

this.setState({value: 0})
this.setState({value: this.state.val + 1});
console.log(this.state.value);
 // 第一次输出 0
this.setState({value: this.state.val + 1});
console.log(this.state.value); 
 // 第二次输出 0

因为setState是异步的,所以console.log会先执行  

并且所有代码执行完毕之后value为1,只加了一次,只会引发一次更新  

正确的使用setState,不直接对State操作  

要弥补这个问题,使用另一种setState()的形式,它接受一个函数而不是一个对象。这个函数将接收前一个状态作为第一个参数,应用更新时的props作为第二个参数:  

// 正确this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment}));

我们在上面使用了一个箭头函数,但是也可以使用一个常规的函数:  

// 正确this.setState(function(prevState, props) {
  return {
    counter: prevState.counter + props.increment  };});

以上内容由开课吧小编为大家整理发布的“前端教程:React中setState的用法”一文,更多Web教程相关内容尽在开课吧广场Web教程频道。

免责声明:本站所提供的内容均来源于网友提供或网络搜集,由本站编辑整理,仅供个人研究、交流学习使用。如涉及版权问题,请联系本站管理员予以更改或删除。
有用
分享
全部评论快来秀出你的观点
登录 后可发表观点…
发表
暂无评论,快来抢沙发!
云开发实战特训营