首頁猿問 ReactJS中this.stat...

ReactJS中this.state和this.setstate的區(qū)別是什么？

JavaScript React.JS

梵蒂岡之花 2019-08-28 08:57:35

ReactJS中this.state和this.setstate的區(qū)別是什么？我想更改hasSubmit密鑰的值，就像在第一個代碼部分中一樣。我知道這不推薦。但第二個代碼是異步的，我不想使用的回調(diào)函數(shù)setState。是什么的差異this.state和setState？有沒有辦法hasSubmit立即改變國家價值？第一個代碼：this.state.hasSubmit = falsethis.setState({})//Code that will use `hasSubmit`.第二個代碼：this.setState({ hasSubmit: false,});//Code that will use `hasSubmit`.加：場景是：hasSubmit設(shè)置false在getInitialState()。hasSubmitfalse當我點擊submit按鈕時會改變。hasSubmit將true在提交時更改為。第一次單擊submit沒有問題，hasSubmit將被設(shè)置為true。但是第二次點擊submit將使用錯誤Second asynchronous code，因為hasSubmit它仍然是true，而First Code可以解決問題。

查看完整描述

3 回答

撒科打諢

TA貢獻1934條經(jīng)驗獲得超2個贊

以下是React文檔所說的內(nèi)容：

永遠不要this.state直接變異，因為之后調(diào)用setState（）可能會替換你所做的變異。把this.state看作是不可變的。
setState()不會立即改變this.state但會創(chuàng)建一個掛起狀態(tài)轉(zhuǎn)換。this.state調(diào)用此方法后訪問可能會返回現(xiàn)有值。
無法保證對setState的調(diào)用進行同步操作，并且可以對調(diào)用進行批處理以提高性能。 setState()除非實現(xiàn)條件渲染邏輯，否則將始終觸發(fā)重新渲染shouldComponentUpdate()。
如果正在使用可變對象并且無法實現(xiàn)邏輯shouldComponentUpdate()，則setState()僅在新狀態(tài)與先前狀態(tài)不同時調(diào)用將避免不必要的重新呈現(xiàn)。

以設(shè)計方式使用API總是明智的。如果文檔說不改變你的狀態(tài)，那么你最好不要改變你的狀態(tài)。

雖然setState()技術(shù)上可能是異步的，但它肯定不會以任何明顯的方式變慢。組件的render()功能將以非常短的順序調(diào)用。

直接設(shè)置狀態(tài)的一個缺點是陣營的生命周期方法- ，，shouldComponentUpdate() -依賴于狀態(tài)轉(zhuǎn)換被調(diào)用。如果直接更改狀態(tài)并使用空對象調(diào)用，則無法再實現(xiàn)這些方法。componentWillUpdate()componentDidUpdate()setState()setState()

另一個是它只是糟糕的編程風格。你在兩個陳述中做了你可以做的一個。

而且，這里沒有實際的好處。在這兩種情況下，render()直到調(diào)用setState()（或forceUpdate()）之后才會觸發(fā)。

您聲稱有必要這樣做而不實際解釋需要的是什么。也許你想更詳細地解決你的問題?？赡苡懈玫慕鉀Q方案。

最好使用框架而不是框架。

UPDATE

從下面的評論：

需要的是我想在下面使用改變的hasSubmit。

好的我現(xiàn)在明白了。如果您需要立即使用未來的州財產(chǎn)，最好的辦法就是將其存儲在本地變量中。

const hasSubmit = false;this.setState({
  hasSubmit: hasSubmit});if (hasSubmit) { 
  // Code that will use `hasSubmit` ...

反對回復(fù) 2019-08-28

翻過高山走不出你

TA貢獻1875條經(jīng)驗獲得超3個贊

如果要更改狀態(tài)并通過響應(yīng)觸發(fā)重新渲染： 使用第二個代碼。

  this.setState({
    hasSubmit: false,
  });

第一個代碼的問題/錯誤：

  this.state.hasSubmit = false      // Updates state directly: 
                                    // You are not supposed to do this
                                    // except in ES6 constructors
  this.setState({})                 // passes an empty state to react.
                                    // Triggers re-render without mutating state

反對回復(fù) 2019-08-28