在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

背景:

 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);//['垃圾']
        }

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

回答
編輯回答
毀與悔

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

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

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

關(guān)于正確地修改狀態(tài),官方文檔說了三點:

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

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

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

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

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

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