App() 函式上方宣告的變數在按下按鈕時按預期更新，而其中宣告的變數在兩個值之間靜態振蕩。為什么會這樣？是因為 App() 每次按下按鈕都會不斷重新運行嗎？
import { Text, Button, View } from 'react-native';
let globalVar = 10;
export default function App() {
let localVar = 10;
const [thing, setThing] = useState(0);
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>{thing}</Text>
<Button
title="press"
onPress={() => setThing((globalVar = 10))}></Button>
<Button title="press" onPress={() => setThing((localVar = 10))}></Button>
</View>
);
}
uj5u.com熱心網友回復：
對于函式式組件，函式內部以及 return 和 hooks 外部的所有內容都進入了安裝步驟。每次我們更新布局中的某些內容時，我們都會回到安裝步驟，因此重新宣告了一些變數。這很容易使用鉤子規避。
一步一步解釋：
- 在第一次單擊時，它更新了布局中顯示的值，然后我們再次進行了安裝步驟，因此再次宣告了變數。
- 第二次點擊，螢屏上顯示的值還是20，react用了diff演算法，看到layout沒有變化，所以沒有進入mounting步驟。
- 當你第三次點擊時，local var 的值會是 30，當我們在螢屏上設定這個時，react 看到布局發生了變化，會重新宣告所有變數。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/520432.html
標籤：反应式变量