import React, { useState } from "react";
export const App = () => {
const [state, setState] = useState(0);
console.log("Render App Render", stateA);
return (
<div className="App">
<button onClick={() => setState(1)}>setState in App Component</button>
</div>
);
};
- 在安裝 => 'Render App Render 0'
- 第一次單擊按鈕 => 'RenderApp Render 1'
- 第二次單擊按鈕 => 'Render App Render 1'
- 第 3 次或更多點擊：沒有日志！
有人可以為我解釋原因嗎？
uj5u.com熱心網友回復：
我能找到的最佳解釋是來自 Facebook 開發人員的以下評論。我鏈接的問題解釋了同樣的問題，渲染發生兩次的原因是：
由于 React 中并發的實作細節，這是一個已知的怪癖。我們不知道當前提交了兩個版本中的哪一個。當這種歧義發生時，我們必須過度渲染一次，然后我們知道兩個版本是相同的，這無關緊要。
uj5u.com熱心網友回復：
這是因為在第三次點擊時，狀態仍然等于 1。
這是當前的流程：
掛載時：狀態 = 0
第一次點擊：狀態 = 0 或 1
- （取決于 return 陳述句中是否使用 state 變數，因為記住，setState 是異步的，react 不知道這里的值是否已經改變，從第一次點擊開始，還是沒有）
第二次點擊：狀態 = 1
第三次點擊：狀態 = 1
與 jquery 等其他庫相比，這種邏輯是 React 可以獲得巨大性能提升的部分原因。React 足夠聰明，知道何時重新渲染，何時不重新渲染。
如果狀態值沒有改變，并且 React 知道這一點（即在第二次點擊時），React 將不會重新渲染/重新計算組件內部的內容。
如果 state 沒有立即在回傳/渲染邏輯中使用，React 也會選擇何時更新組件，而不總是立即更新
如果您希望在第三次單擊時再次更改狀態，您可以撰寫一個函式，在每次單擊時在兩個不同的值之間切換，并將其附加到onClick按鈕處理程式。
通常這個函式會像這樣改變一個布林值：
() => setState((state) => !state)
如果狀態為真，則更改為假。在下一次單擊時，它會從 false 變為 true，依此類推。
uj5u.com熱心網友回復：
因為在第二次點擊之后，狀態將再次被 setState(1) 鉤子設定為 1。那些。它將是不可變的，并且不需要重新渲染器。如果您想在每次點擊后重新渲染，您應該嘗試
<button onClick={() => setState(state )}>setState in App Component</button>
或者另一個狀態變化
如果你想知道為什么它仍然被重新渲染兩次，那么這是一個眾所周知的錯誤，已經記錄在案，我希望它很快就會被關閉。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/330755.html
標籤：反应