認清 React 的useState邏輯

feshin發表於2021-03-25

`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
注：
1. 每次呼叫 App()都會執行 const [n, setN] = useState(0)
2. 同樣的一句話每次呼叫之後，每次得到的 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 會得到不同的值！

分析

setN
- setN(n + 1) 一定會修改資料 state，將 n + 1存入state
- setN()一定會觸發重新渲染(re-render)
useState
- useState肯定會從 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上

React 中的 useRef 與 useState
2024-04-16
React
短影片的底層邏輯和認知
2024-04-17
React Hooks 原始碼解析（3）：useState
2019-11-09
ReactHook原始碼
React中元件邏輯複用的那些事兒
2020-05-19
React元件
AI「王道」邏輯程式設計的復興？清華提出神經邏輯機，已入選ICLR
2019-04-29
AI程式設計ICLR
「前端發動機」深入 React hooks — useState
2019-09-16
前端ReactHook
淺析 Laravel 自帶的使用者認證邏輯
2019-12-07
Laravel
簡單易懂的 React useState() Hook 指南（長文建議收藏）
2019-11-18
ReactHook
BLoc模式在React中使用-業務邏輯元件的獨立使用
2021-07-29
BloC模式React元件
封裝React Hook函式useState實現更優雅的setValue
2022-03-03
封裝ReactHook函式
(精華2020年5月25日更新) react基礎篇 react-hooks的useState用法
2020-05-25
ReactHook
邏輯題
2024-08-17
改變CRUD認知：Web3去中心化的底層邏輯
2021-12-09
Web中心化
Hooks中的useState
2021-12-21
Hook
幾道經典邏輯推理題，提高你的邏輯思考能力
2019-10-20
理解ProcessFunction的Timer邏輯
2021-07-12
Function
掌握 Promise 的邏輯方法
2020-12-05
Promise
【SpringSecurity系列02】SpringSecurity 表單認證邏輯原始碼解讀
2019-04-16
SpringGse原始碼
邏輯推理20201028
2020-10-28
量子邏輯閘
2019-06-24
邏輯運算子
2024-08-20
邏輯迴歸
2021-09-09
邏輯迴歸
java邏輯控制
2020-12-06
Java
【React】戲說元件式百度圖表的由來及簡單邏輯
2019-04-08
React元件
JS 中的邏輯運算子
2018-06-25
JS
Python中的邏輯表示式
2022-06-18
Python
kubebuilder operator的執行邏輯
2022-03-05
UI
3.2.2的Model的快取邏輯
2019-05-11
快取
如何新建邏輯卷及磁碟掛載，邏輯卷擴容
2024-03-06
認清Python下==和is的區別
2018-06-13
Python
SAP UI5 BarcodeScannerButton 的初始化邏輯 - Cordova API 檢測等邏輯
2022-03-23
UIAPI
《深入淺出深度學習》之“從邏輯學到認知科學”
2021-06-10
深度學習
自定義useState
2020-11-25
0504邏輯歸因
2024-05-04
06--加密邏輯
2024-05-21
加密
Python邏輯迴歸
2020-02-29
Python邏輯迴歸
PostgreSQL：邏輯結構
2020-09-04
SQL
LVM 邏輯卷管理
2020-08-03
LVM

認清 React 的useState邏輯

useState執行過程解析

第一次渲染

點選一次button按鈕

點選button 後 n 是怎麼變的 ?

執行 setN的時候

重新執行App()的時候

分析

嘗試實現一個 useState

改進 state變數

useState那麼簡單嗎？

改進思路

程式碼分析

重置 index

終於成功實現了useState的邏輯！

useState很明顯的缺點

相關文章

`useState`執行過程解析

執行 `setN`的時候

重新執行`App()`的時候

嘗試實現一個 `useState`

改進 `state`變數

`useState`那麼簡單嗎？

終於成功實現了`useState`的邏輯！

`useState`很明顯的缺點