您的位置是:网站首页>Javascript编程Javascript编程

react中怎么获取state

少儿编程网2021-02-18 16:03:00Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介react中获取state的方法:首先打开相应的react代码文件;然后在react中可以通过“this.state.{属性}”的方式直接获取state即可。本教程操作环境:windows7系统、react17.0.1版本、DellG3电脑。react中怎么获取state?在react中可以通过th

react中获取state的方法:首先打开相应的react代码文件;然后在react中可以通过“this.state.{属性}”的方式直接获取state即可。Wb6少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

Wb6少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

本教程操作环境:windows7系统、react17.0.1版本、Dell G3电脑。Wb6少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

react中怎么获取state?Wb6少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

在react中可以通过this.state.{属性}的方式直接获取state,但是当我们修改state的时候,往往有许多的坑需要注意。Wb6少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

以下为三种常见的陷阱:Wb6少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

1、不能直接修改state。Wb6少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

组件修改state,并不会重新触发render。列如:Wb6少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

2、state的更新时异步的Wb6少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

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

于是后面覆盖前面的操作,**终购买数量只加1,此时可以使用另一个函数作为参数的setState,这个函数有两个参数,第一个参数是当前的**新状态(本次组件状态更新后的状态)的前一个状态preState(本次组件状态修改前的状态),第二个参数是当前**新的props。示列如下:Wb6少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

3、state的更新时一个合并的过程Wb6少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

当调用ssetState()修改组件的状态时,只需要传入发生改变的state,而不是完整的state,因为组件state的更新时一个合并的过程,列如,一个组件的状态为:Wb6少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

当只需要修改title时,只需要将修改的title传给setState即可:Wb6少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

react会合并**新的title到原来的状态,同时保留原来状态的content,**终合并state为:Wb6少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

相关推荐:《react教程》

以上就是react中怎么获取state的详细内容,更多请关注少儿编程网其它相关文章!Wb6少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

来源:php中文网Wb6少儿编程网-Scratch_Python_教程_免费儿童编程学习平台


相关文章:

支持一下 ( )

react中怎么获取state

      匿名评论
    • 评论
    人参与,条评论
    react中怎么获取state

微信公众号

免费视频教程

先知道