首頁(yè) 猿問(wèn) 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密鑰的值，就像在第一個(gè)代碼部分中一樣。我知道這不推薦。但第二個(gè)代碼是異步的，我不想使用的回調(diào)函數(shù)setState。是什么的差異this.state和setState？有沒(méi)有辦法hasSubmit立即改變國(guó)家價(jià)值？第一個(gè)代碼：this.state.hasSubmit = falsethis.setState({})//Code that will use `hasSubmit`.第二個(gè)代碼：this.setState({ hasSubmit: false,});//Code that will use `hasSubmit`.加：場(chǎng)景是：hasSubmit設(shè)置false在getInitialState()。hasSubmitfalse當(dāng)我點(diǎn)擊submit按鈕時(shí)會(huì)改變。hasSubmit將true在提交時(shí)更改為。第一次單擊submit沒(méi)有問(wèn)題，hasSubmit將被設(shè)置為true。但是第二次點(diǎn)擊submit將使用錯(cuò)誤Second asynchronous code，因?yàn)閔asSubmit它仍然是true，而First Code可以解決問(wèn)題。

查看完整描述

3 回答

撒科打諢

TA貢獻(xiàn)1934條經(jīng)驗(yàn) 獲得超2個(gè)贊

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

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

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

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

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

另一個(gè)是它只是糟糕的編程風(fēng)格。你在兩個(gè)陳述中做了你可以做的一個(gè)。

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

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

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

UPDATE

從下面的評(píng)論：

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

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

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

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

翻過(guò)高山走不出你

TA貢獻(xiàn)1875條經(jīng)驗(yàn) 獲得超3個(gè)贊

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

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

第一個(gè)代碼的問(wèn)題/錯(cuò)誤：

  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

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