说米网

这c

这篇文章主要介绍了React中setState的运用与同步异步的运用，手机ip查询文中经过示例代码介绍的十分详细，对大家的学习或者作业具有必定的参考学习价值，需求的朋友们下面跟着小编来一起学习学习吧

在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元素，并绑定事件

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

2、计时器 setTimeout

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

到此这篇关于React中setState的运用与同步异步的运用的文章就介绍到这了,