useState運行過程解析
function App() {
const [n, setN] = useState(0); //使用 myUseState()
return (
<div>
<p>{n}</p>
<p>
<button
onClick={() => {
setN(n + 1);
}}
>
+1
</button>
</p>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App></App>, rootElement);
第一次渲染
-
調用
render <App />，<App / >組件調用App()函數 -
App()函數調用const [n, setN] = useState(0)給 n 賦值，並且得到 一個setN函數 -
App()函數會根據n的值 和setN返回一個虛擬的DOM節點 -
React 會根據
虛擬DOM創建一個真實DOM節點，並且將真實DOM渲染到瀏覽器上，所以我們可以通過調試工具看到一個渲染出來的DIV節點
點擊一次button按鈕
-
調用
onClick()函數，onClick()函數又調用setN()函數 -
setN在更新了 n 的值（先不管是怎么更新的）之后會重新調用render <App /> -
組件重新調用 App()函數 -
App函數同樣會執行const [n, setN] = useState(0)，根據新的n返回一個新的虛擬DOM -
React 根據
DOM Diff算法 將新的虛擬DOM和舊的虛擬DOM進行對比，得到最小的變動范圍對象（patch 對象） -
根據最小的變動范圍對象來
更新真實DOM注：
- 每次調用
App()都會運行const [n, setN] = useState(0) - 同樣的一句話每次調用之后，每次得到的
n的值是不一樣的
- 每次調用
點擊button 后 n 是怎么變的 ?
首先要思考幾個問題:
-
執行
setN()的時候會發生什么： n 會變嗎？App()會重新執行嗎？ -
如果
App()會重新執行，那么useState(0)的時候，n每次的值會有不同嗎?以上問題通過 console.log()就能得到答案
執行 setN的時候
-
一定會重新渲染UI，但是這時候 n 會變嗎？n 還沒有變！！
-
setN( n + 1)並沒有改變 n，而是改變了一個中介數據state(state 是什么？繼續往下看) -
因為要重新渲染UI，所以
render <App />會重新執行App()
重新執行App()的時候
- 重新執行
const [n, setN] = useState(0)的時候確實 n 會得到不同的值！
分析
-
setNsetN(n + 1)一定會修改數據state，將n + 1存入statesetN()一定會觸發重新渲染(re-render)
-
useStateuseState肯定會從state讀取n的最新值
-
state- 每個組件都有自己的數據
state，這是我們需要理解的核心
- 每個組件都有自己的數據
嘗試實現一個 useState
const myUseState = (initialValue) => {
let state = initialValue ;// 我們設置的一個 state 接收 初始值
const setState = (newValue) => {
// 我們設置的一個 setState函數
state = newValue; // 更新 state 的值
re_render(); // useState會重新渲染頁面UI
};
return [state, setState]; // 返回一個 state 和 更新state的函數: setState
};
const re_render = () => {
ReactDOM.render(<App></App>, rootElement);
};
// 上面是我們實現的一個 myUseState
function App() {
console.log("App 運行了");
const [n, setN] = myUseState(0);
console.log(n)
return (
<div>
<p>{n}</p>
<p>
<button
onClick={() => {
setN(n + 1);
}}
>
+1
</button>
</p>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App></App>, rootElement);
上面的代碼還存在一些問題
-
每次調用
myUseState(0)都會將state重置為初始值 -
我們需要一個不會被
myUseState重置的state變量 -
還需要判斷
state的取值是 初始值還是新值
改進 state變量
let _state;
const myUseState = (initialValue) => {
_state = _state === undefined ? initialValue : _state;// 我們設置的一個 state 接收 初始值
const setState = (newValue) => {
// 我們設置的一個 setState函數
_state = newValue; // 更新 state 的值
re_render(); // useState會重新渲染頁面UI
};
return [_state, setState]; // 返回一個 state 和 更新state的函數: setState
};
const re_render = () => {
ReactDOM.render(<App></App>, rootElement);
};
// 上面是我們實現的一個 myUseState
function App() {
console.log("App 運行了");
const [n, setN] = myUseState(0);
console.log(n)
return (
<div>
<p>{n}</p>
<p>
<button
onClick={() => {
setN(n + 1);
}}
>
+1
</button>
</p>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App></App>, rootElement);
這樣我們就實現了一個 useState!!
useState那么簡單嗎？
- 上面的
useState只能實現一個組件使用一個useState的情況 - 如果一個組件使用了
兩個 useState，由於數據都放在 _state，所以會產生沖突
改進思路
- 把_state做成一個對象
- 比如_state = { n:0, m:0 }
- 不行, 因為
useState(0)並不知道變量叫n還是m
- 把_state 做成數組
- 比如_state = [0, 0]
- 貌似可以
let _state = [];
let index = 0;
const myUseState = (initialValue) => {
const currentIndex = index; // 需要一個 currentIndex 來保存當前的 index 的值
_state[currentIndex] = _state[currentIndex] === undefined ? initialValue : _state[currentIndex];
const setState = (newValue) => {
_state[currentIndex] = newValue;
re_render();
};
index += 1; // 當前index設置完之后，后面的state要存放在下一個 index中
return [_state[currentIndex], setState];
};
const re_render = () => {
ReactDOM.render(<App></App>, rootElement);
};
function App() {
const [n, setN] = myUseState(0);
const [m, setM] = myUseState(0);
return (
<div>
<p>n :{n}</p>
<button
onClick={() => {
setN(n + 1);
}}
>
n+1
</button>
<p>m: {m}</p>
<button
onClick={() => {
setM(m + 1);
}}
>
m+1
</button>
</div>
);
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App></App>, rootElement);
代碼分析
- 上面的代碼貌似可以解決兩個 state 同時存儲的問題，但是還是不能完成
useState的操作 - 我們應該要注意到當我們只是想重新更新
state的值的時候需要重新渲染App(),index += 1同樣也會執行，這就意味着這個數組每次調動useState之后都會變長一個單位！變長的總長度就是App()里面使用的useState的次數。 - 所以我們需要在每次渲染
<App />之前都需要重置一下index = 0
重置 index
let _state = [];
let index = 0;
const myUseState = (initialValue) => {
const currentIndex = index; // 需要一個 currentIndex 來保存當前的 index 的值
_state[currentIndex] = _state[currentIndex] === undefined ? initialValue : _state[currentIndex];
const setState = (newValue) => {
_state[currentIndex] = newValue;
re_render();
};
index += 1; // 當前index設置完之后，后面的state要存放在下一個 index中
return [_state[currentIndex], setState];
};
const re_render = () => {
index = 0; // !! 這里很重要，重新渲染之前必須要重置 index = 0,否則數組會變長！
ReactDOM.render(<App></App>, rootElement);
};
function App() {
const [n, setN] = myUseState(0);
const [m, setM] = myUseState(0);
return (
<div>
<p>n :{n}</p>
<button
onClick={() => {
setN(n + 1);
}}
>
n+1
</button>
<p>m: {m}</p>
<button
onClick={() => {
setM(m + 1);
}}
>
m+1
</button>
</div>
);
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App></App>, rootElement);
終於成功實現了useState的邏輯！
總結一下：
1. 我們要知道 `useState`的運行過程，n 是怎么進行改變的
2. 當使用兩個 `state`的時候要保證不沖突，所以要把 state 定義成數組用來存儲
3. 使用 `currentIndex` 記錄當前的 index
4. 在 App 渲染之前要重置 `index = 0`，否則 state 數組會變長！
useState很明顯的缺點
-
useState調用順序不能亂- 如果第一次渲染時 n 是第一個，m是第二個，k是第三個
- 則第二次渲染時必須保證順序完全一致
- 所以React不允許出現以下代碼
不允許出現的代碼：
if( n % 2 === 0){ [m, setM] = React.useState(0); }否則會報錯：
/* React Hook 'React.useState' is called conditionally. React Hooks must be called in the exact same order in every component render.這個報錯的原理其實就是我們存儲state的數組的順序是必須要一致的，否則如果存在判斷語句的話 state的調用順序不一致，就會導致 state的值混亂！這會直接導致出現bug或者錯誤！！
注：vue3 目前已經克服了這個問題，似然vue3是借鑒的 react 的思想
-
App 用了 _state 和 index，那其他組件還能用嗎？
- 我們可以給每個組件都創建 _state 和 index
-
_state 和 index 放在全局作用域重名了咋辦？
- 每個組件都有一個虛擬DOM節點
- 我們可以把 _state和index放到虛擬DOM上