当我们想要改变组件的状态时,不能直接调用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 可能是异步更新的,因此不应该依靠它们的值来计算下一个状态。这种情形需要使用函数作为参数。
网友评论