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
- })
更多 web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/react/16986.html