通過shouldComponentUpdate更新newState的最佳實踐？

我已經創建了一個文本輸入，當您通過onChange進行輸入時，它只會更新它自己的狀態，然後通過onBlurEvent向父級方向工作，以防止在用戶輸入時重新渲染太多的GUI。通過shouldComponentUpdate更新newState的最佳實踐？

這有效，但我的缺點是，由於輸入有它自己的狀態，如果道具因外力而改變，並且我想更新我的文本輸入作爲那些新道具，我有點兒泡菜。從我一直在尋找，shouldComponentUpdate可以創建一個修復程序，我的代碼工作，但只是因爲它的作品並不意味着我的實施是好的。

使用時的反應，我的理解是，我們不應該做更新狀態：

this.state.value = "This is a new value"

，而是做：

this.setState({ 
     value: "This is a new value" 
    });

但對於直接改變newState這在技術上是不是「 this.state「在shouldComponentUpdate裏面？

我有如下的邏輯：

shouldComponentUpdate(props, newState) { 
    if (...logic 1 ... && props.value != newState.value) { 
     //keep newState 
     return true; 
    } 
    else if (...logic 2 ... props.value != newState.value) 
    { 
     newState.value = props.value; //Right Here 
     return true; 
    } 
    return false; 
};

來源

2017-04-21 user2589339

這似乎是一樣糟糕的（如果不是不差）設置this.state給我。您只應通過setState更新您的狀態，否則您將面臨稍後更新覆蓋更改的風險。

一個更好的解決辦法是使用componentWillReceiveProps(nextProps)生命週期掛鉤 - 文檔說：

如果您需要在響應更新狀態託變化（例如，復位），你可能比較this.props和nextProps並在此方法中使用this.setState（）執行狀態轉換。

這聽起來和你想要做的一模一樣！

我不知道你的邏輯，所以我不能給出一個完整的例子，但這裏有一個出發點：

componentWillReceiveProps(nextProps) { 
    if (/* your condition */ && nextProps.value != this.state.value) { 
     this.setState({ 
      value: nextProps.value 
     }); 
    } 
}

來源

2017-04-21 14:37:17

通過shouldComponentUpdate更新newState的最佳實踐？

回答

相關問題