實(shí)現(xiàn)簡(jiǎn)單的React hooks 如 useState, useEffect 等

例子:
https://codesandbox.io/s/react-hooks-demo-6-5iey8?file=/src/index.js

not magics just array
https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e

useState

let memoizedState = []; // hooks 存在這個(gè)數(shù)組 
let cursor = 0; // 當(dāng)前 memoizedState 下標(biāo)

function useState(initialState) {
  memoizedState[cursor] = memoizedState[cursor] || initialState;
  const currentCursor = cursor;
  function setState(newState) {
    memoizedState[currentCursor] = newState;
    render();
  }
  return [memoizedState[cursor++], setState]; // 返回當(dāng)前 state 將 cursor + 1
}
function App() {
  const [count, setCount] = useState(0);
  const [username, setUsername] = useState("fan");
  useEffect(() => {
    console.log(count);
  }, [count]);
  useEffect(() => {
    console.log(username);
  }, [username]);
  return (
    <div>
      <div>{count}</div>
      <Button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        點(diǎn)擊
      </Button>
      <div>{username}</div>
      <Button
        onClick={() => {
          setUsername(username + " hello");
        }}
      >
        點(diǎn)擊
      </Button>
    </div>
  );
}

const rootElement = document.getElementById("root");

function render() {
  cursor = 0;
  ReactDOM.render(<App />, rootElement);
}
render();

useEffect

function useEffect(callback, depArray) {
  const hasNoDeps = !depArray;
  const deps = memoizedState[cursor];
  const hasChangeDeps = deps
  ? !depArray.every((el, i) => el === deps[i]) : true;

  if(hasNoDeps || hasChangeDeps) {
    callback();
    memoizedState[cursor] = depArray;

  }
  // 為什么要 ++ , 這個(gè)位置 給 這個(gè) state 使用了 要給下一個(gè) state 一個(gè) 位置, 不要沖突了
  cursor++;
}
let _deps;

function useEffect(callback, depArray) {
  const hasNoDeps = !depArray;
  // 新的數(shù)組的每一項(xiàng)是不是等于 之前數(shù)組的每一項(xiàng) 這對(duì)于比較 ['a', 1]這樣的基礎(chǔ)類型是 可以的, 但是比較引用類型呢
  const hasChangeDeps = _deps
    ? !depArray.every((el, i) => el === _deps[i]) : true;
    if(hasNoDeps || hasChangeDeps) {
      callback();
      _deps = depArray;
    }
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容