react之setState

当我们想要改变组件的状态时,不能直接调用this.state=xxx这种修改方式,React.js无法知道组件状态被修改了,因此不会更新页面,要使用setState方法更新组件状态。setState方法由父类Component提供,当调用该函数时,React.js会更新组件的状态state,并且重新调用render方法,将render方法渲染的最新的内容显示到页面上。
setState方法的参数可以是对象或者函数。

setState-对象参数

传入的参数是对象时,这个对象表示该组件需要更新的状态(不需要传入整个对象)。需要注意一点,当调用setState时,React.js不会马上修改state,而是把这个对象放在一个更新队列里面,稍后才会把新的状态从队列中提取出来合并到state 中,然后再触发组件更新

setState-函数参数

接受一个函数作为参数是setState的第二种使用方式,React.js会把上一个setState的结果传入这个函数,然后就可以使用该结果进行运算、操作,然后返回一个对象作为更新state的对象;

setState的合并

React.js会把js事件循环中的消息队列的同一个消息中的setState都进行合并后再重新渲染组件。

总结

  • 不要直接更新状态,应该使用setState方法。
  • 构造函数是唯一能够初始化this.state的地方。
  • 状态更新可能是异步的。React可以将多个setState调用合并成一个来提高性能。因为 this.props 和 this.state 可能是异步更新的,因此不应该依靠它们的值来计算下一个状态。这种情形需要使用函数作为参数。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 12,694评论 1 33
  • HTML模版 之后出现的React代码嵌套入模版中。 1. Hello world 这段代码将一个一级标题插入到指...
    ryanho84阅读 11,415评论 0 9
  • 本笔记基于React官方文档,当前React版本号为15.4.0。 1. 安装 1.1 尝试 开始之前可以先去co...
    Awey阅读 12,313评论 14 128
  • 做React需要会什么? react的功能其实很单一,主要负责渲染的功能,现有的框架,比如angular是一个大而...
    李先生Mr_Li阅读 7,954评论 1 20
  • 每年的三月底、四月初,我有一项例行但又要创新的工作——组织公司优秀主管外出考察学习。今年也不例外,在上次部门例会上...
    西贝悠哉阅读 1,339评论 0 0