react native中this.setState({xxx:''})与this.state.xxx='' 有区别吗？

react native中

this.setState({xxx:’’})与this.state.xxx=’’ 有区别吗？

---

答案： 有的

---

this.state通常是用来初始化state的，this.setstate是用来修改state值的。如果你初始化了state之后再使用this.state，之前的state会被覆盖掉，如果使用this.setState,只会替换掉相应的state值

this.setState({})

this.setState({})会触发render方法，重新渲染界面。而this.state.xxx=’’ 不会重新加载UI。

this.setState({})是异步的

---

this.state.xxx='' 

在什么场景会使用this.state.xxx呢？

我在写了两个button，点击button更新改变state的值，然后将state作为参数请求数据，自动刷新列表UI的时候，出现了问题。

具体代码是这样的

constructor(){
	this.state={
	couponStatus : 0 ,
	}
}

render() {
        <SegmentedBar
            justifyItem='fixed'
            indicatorType='customWidth'
            indicatorLineColor='#f5e220'
            indicatorWidth={90}
            animated={false}
            onChange={(index) => {
	            this.setState(
		            {
			            couponStatus:index;
		            }
	            }
            }}
        >

上面这段代码是无法达到预期效果的，为什么呢？因为setState，是异步的，且有一定延迟，这就导致了有时候后面列表加载数据已经完成了，state却还没有改变，导致的直接结果就是数据错乱。于是，我们把代码略微修改一下。

this.state.couponStatus = index;
//别忘了手动刷新列表UI
this.refs.couponListView.refresh();

这样就完美的解决了。

---

好了，打完收工。

回家学习

回家Dota

---

作者[@Jeffrey]
2018 年 09月 19日