本文摘自PHP中文网，作者藏色散人，侵删。
react中获取state的方法：首先打开相应的react代码文件；然后在react中可以通过“this.state.{属性}”的方式直接获取state即可。
本教程操作环境：windows7系统、react17.0.1版本、Dell G3电脑。
在react中可以通过this.state.{属性}的方式直接获取state，但是当我们修改state的时候，往往有许多的坑需要注意。
以下为三种常见的陷阱：
1、不能直接修改state。
组件修改state，并不会重新触发render。列如：
1 2 3 4 5 |
|
2、state的更新时异步的
调用setState时，组件state并不会立即改变，只是把要修改的状态放入事件队列当中，而react会优化真正的执行时机，并且处于本身的性能原因，可能会将多次setState的状态修改合并成一次状态修改。因此不要依靠当前的state计算下一个state，因为当真正执行状态修改时，依赖的this.state并不能保证是最新的state，因为react本身会把多次state合并成一次，这时this.state还是几次state修改前的state，同样也不能依赖当前的props计算下一个状态，因为props的更新也是异步。列对于电商类的应用中，在购物车里，点击一次购买按钮，购买数量会加1，如果连续点击两次，会加2，而在react合并修改为一次的情况下，相当与执行了如下代码：
1 2 3 4 5 |
|
于是后面覆盖前面的操作，最终购买数量只加1，此时可以使用另一个函数作为参数的setState，这个函数有两个参数，第一个参数是当前的最新状态（本次组件状态更新后的状态）的前一个状态preState（本次组件状态修改前的状态），第二个参数是当前最新的props。示列如下：
1 2 3 4 |
|
3、state的更新时一个合并的过程
相关阅读 >>
更多相关阅读请进入《React》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
