react中获取state的方法-创新互联

这篇文章将为大家详细讲解有关react中获取state的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联公司-专业网站定制、快速模板网站建设、高性价比巴马网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式巴马网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖巴马地区。费用合理售后完善，10多年实体公司更值得信赖。

react中获取state的方法：首先打开相应的react代码文件；然后在react中可以通过“this.state.{属性}”的方式直接获取state即可。

react中怎么获取state？

在react中可以通过this.state.{属性}的方式直接获取state，但是当我们修改state的时候，往往有许多的坑需要注意。

以下为三种常见的陷阱：

1、不能直接修改state。

组件修改state，并不会重新触发render。列如：

//错误
this.state.title='React';
正确修改方式是使用setState（）；
//正确
this.setState({title:'React'});

2、state的更新时异步的

调用setState时，组件state并不会立即改变，只是把要修改的状态放入事件队列当中，而react会优化真正的执行时机，并且处于本身的性能原因，可能会将多次setState的状态修改合并成一次状态修改。因此不要依靠当前的state计算下一个state，因为当真正执行状态修改时，依赖的this.state并不能保证是新的state，因为react本身会把多次state合并成一次，这时this.state还是几次state修改前的state，同样也不能依赖当前的props计算下一个状态，因为props的更新也是异步。列对于电商类的应用中，在购物车里，点击一次购买按钮，购买数量会加1，如果连续点击两次，会加2，而在react合并修改为一次的情况下，相当与执行了如下代码：

Object.assign(
previousState,
{quantity:this.state.quantity+1},
{quantity:this.state.quantity+1},
)

于是后面覆盖前面的操作，最终购买数量只加1，此时可以使用另一个函数作为参数的setState，这个函数有两个参数，第一个参数是当前的新状态（本次组件状态更新后的状态）的前一个状态preState（本次组件状态修改前的状态），第二个参数是当前新的props。示列如下：

//正确
this.setState((preState,props)=>({
counter:preState.quantity+1
}))

3、state的更新时一个合并的过程

当调用ssetState（）修改组件的状态时，只需要传入发生改变的state，而不是完整的state，因为组件state的更新时一个合并的过程，列如，一个组件的状态为：

this.state({
title:'React',
content:'React is an wondeful JS library'
})

当只需要修改title时，只需要将修改的title传给setState即可：

this.setState({title:'ReactJs'});

react会合并新的title到原来的状态，同时保留原来状态的content，最终合并state为：

this.state({
title:'ReactJs,
content:''React is an wondeful Js library
}

关于“react中获取state的方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

标题名称：react中获取state的方法-创新互联
当前链接：http://shouzuofang.com/article/psohe.html