热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

开发笔记:关于thisState的那些事

本文由编程笔记#小编为大家整理,主要介绍了关于thisState的那些事相关的知识,希望对你有一定的参考价值。1.state的定义状
本文由编程笔记#小编为大家整理,主要介绍了关于thisState的那些事相关的知识,希望对你有一定的参考价值。



1.state的定义

  状态(state) 和 属性(props) 类似,都是一个组件所需要的一些数据集合,但是它是私有的,并且由组件本身完全控制,可以认为它是组件的“私有属性(或者是局部属性)”。


2.thisState的三件事

  1.不要直接修改state的值


1 this.setState({
2 comment: ‘Hello‘
3 });

 

  2.state(状态)的更新可能是异步的

  React 为了优化性能,有可能会将多个 setState() 调用合并为一次更新。

  因为this.propsthis.state 可能是异步更新的,你不能依赖他们的值计算下一个state(状态)。

 


1 this.setState({
2 counter: this.state.counter + this.props.increment,
3 });

 

  我们并不能通过上述代码得到想要的值,为了弥补这个问题,使用另一种 setState() 的形式,接受一个函数。这个函数将接收前一个状态作为第一个参数,应用更新时的 props 作为第二个参数,代码如下:

 

 


1 this.setState((prevState, props) => ({
2 counter: prevState.counter + props.increment
3 }));

 

  3.state(状态)更新会被合并

  当你调用 setState(), React 将合并你提供的对象到当前的状态中。所以当State是一个多键值的结构时,可以单独更新其中的一个,此时会进行“差分”更新,不会影响其他的属性值。

 


推荐阅读
author-avatar
邪恶尽头是纯洁
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有