React中setState的使用与同步异步的使用

 

这篇文章主要介绍了React中setState的使用与同步异步的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

在react中,修改状态如果直接使用this.state,不会引起组件的重新渲染,需要通过 this.setState来对组件的属性进行修改。

1、this.setState的两种定义方式

定义初始状态

state = { count: 0 },

如果此时有一个按钮,点击按钮让计数加1,我们可以有两种写法

(1)传递对象

this.setState({ count: this.state.count + 1})

(2)传递函数

this.setState((state, props) => ({ count: count + 1}))

2、setState的两种方式有什么不同?

如果变更的state的值需要依赖于上一次的state的值,这种情况就需要用到函数的形式,比如以下这种情况

addCount(){
this.setState({ count: this.state.count + 1})
this.setState({ count: this.state.count + 1})
this.setState({ count: this.state.count + 1})
}

此时只会执行一次+1的操作,因为在React内部,会将多次setState合并操作,新的state由 Object.assgin({}, {count: 0}, { count: 1}) 合并所得,以上赋值会执行三次,但因为count的值没有更新,所以最终执行的结果只+1,如果setState的赋值是函数,那情况就不一样了

addCount(){
this.setState((state, props) => ({ count: count + 1}))
this.setState((state, props) => ({ count: count + 1}))
this.setState((state, props) => ({ count: count + 1}))
}

这样的操作会得到+3的效果,因为React会进行判断,如果传入的是函数,那么将执行此函数,此时count的值就已经被修改了

3、setState是同步还是异步的?

5星是异步的

(1) 即我们通过this.setState修改了状态之后,在它的下一行输出state的值并不会得到新的值

(2) 为什么是异步?

有两个原因,一是提高效率,每次修改state的值都会造成render的重新渲染,将多次修改state的值合并统一更新可以提高性能;二是render的更新会晚一些,如果render中有子组件,子组件的props依赖于父组件的state,props和state就不能保持一致

(3) 如何获取异步时的state值?

1、在setState的回调函数中

this.setState({
count: this.state.count + 1}},
()=>{ console.log(this.state.count)})

2、 在componentDidUpdate中获取

componentDidUpdate(){
console.log(this.state.count)
}

5星是同步的

(1) 即我们通过this.setState修改状态之后,在它的下一行输出state是新的值

(2) 什么场景下是同步的?

1、 原生js获取dom元素,并绑定事件

<button id=”addBtn”>点我+1</button>
componentDidMount(){
const addBtn = document.getElementById(‘addBtn’)
changeBtn.addEventListener(‘click’,()=>{
this.setState({ count: this.state.count + 1})
console.log(this.state.message)
})
}

2、计时器 setTimeout

<button onClick={ e => this.addOne() }>点我+1</button>
addOne(){
setTimeout(()=>{ this.setState({ count: this.state.count + 1 })
console.log(this.state.count ) },0)
}

到此这篇关于React中setState的使用与同步异步的使用的文章就介绍到这了,更多相关React setState同步异步内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

①本站所有CMS源码、杰奇CMS模板、PTCMS源码模板、YGBOOK源码模板、帝国CMS源码模板等仅用于学习和交流,勿用于商业。
②本站资源有安装及使用文档,安装使用请自行探索,如您对购买的程序或是模板无法胜任安装工作,请点击付费安装。
③本站资源来源网络或者用户投稿,切勿私自传播于网络,否则将追究法律责任。且仅供学习交流之用,如有侵权请联系删除。
④如果资源失效或下载链接错误请联系站长。
蓝大富博客 » React中setState的使用与同步异步的使用

发表评论