鍍金池/ 問(wèn)答/HTML/ 關(guān)于React的state的問(wèn)題

關(guān)于React的state的問(wèn)題

背景：

 constructor(props) {
    super(props);
    this.state = {
        _TagList: []
    }
}
onSelectCompany() {
        console.log("this.state._TagList:",this.state._TagList);//[]
        this.state._TagList.push('垃圾');
        console.log("this.state._TagList:",this.state._TagList);//['垃圾']
        }

問(wèn)題：state如何被修改，state就是一個(gè)變量，任何修改變量的方法都可以修改它，這么理解對(duì)吧？？如果對(duì)，state改變了并不會(huì)造成頁(yè)面數(shù)據(jù)更新，只有調(diào)用setState了再回刷新，是嗎？？

回答
編輯回答
毀與悔

只有通過(guò)setState方法去修改state。相應(yīng)的dom數(shù)據(jù)就會(huì)發(fā)生改變。

2017年9月23日 06:56
編輯回答
殘淚

首先要明確一個(gè)事情，我們所說(shuō)的修改state，不僅僅是修改state本身的值，更是要引發(fā)頁(yè)面重新render，或者說(shuō)修改state就是為了引發(fā)頁(yè)面重新render。
this.state._TagList.push('');這個(gè)并不是在真正的修改state，因?yàn)樗粫?huì)引發(fā)頁(yè)面render，你此時(shí)去render函數(shù)里面輸出最新的值，是輸不出來(lái)的。真正的修改state一定是調(diào)用setState。
this.state._TagList是在取出state的值，就是個(gè)普通變量，任何修改變量的方法都可以修改它，也是對(duì)的，但是這不是在修改state。

關(guān)于正確地修改狀態(tài)，官方文檔說(shuō)了三點(diǎn)：

1.不要直接更新狀態(tài)。直接修改state，組件并不會(huì)重新渲染。

// 錯(cuò)誤
this.state.name = 'React';
// 正確
this.setState({name: 'React'});

2.狀態(tài)更新可能是異步的。React可能會(huì)將多次setState修改合并成一次修改來(lái)提高性能。這可能導(dǎo)致真正狀態(tài)修改時(shí)，依賴的this.state并不能保證是最新的state，所以不要依賴當(dāng)前的state計(jì)算下個(gè)state。

// 錯(cuò)誤
this.setState({
  counter: this.state.counter + 1
});
// 正確
this.setState((prevState) => ({
  counter: prevState.counter + 1
}));

3.狀態(tài)更新合并是淺合并。當(dāng)調(diào)用setState修改組件狀態(tài)時(shí)，只需要傳入發(fā)生改變的state，而不是組件全部的state。

// 原始狀態(tài)
this.state = {
  name: 'React',
  age: 3
}
// 修改狀態(tài)
this.setState({
  name: 'React Native'
});
2017年1月6日 17:33