实现简单的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 存在这个数组 
let cursor = 0; // 当前 memoizedState 下标

function useState(initialState) {
  memoizedState[cursor] = memoizedState[cursor] || initialState;
  const currentCursor = cursor;
  function setState(newState) {
    memoizedState[currentCursor] = newState;
    render();
  }
  return [memoizedState[cursor++], setState]; // 返回当前 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 (
    

      
{count}
       {
          setCount(count + 1);
        }}
      >
        点击
      
      
{username}
       {
          setUsername(username + " hello");
        }}
      >
        点击
      
    
  );
}

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

function render() {
  cursor = 0;
  ReactDOM.render(, 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;

  }
  // 为什么要 ++ , 这个位置 给 这个 state 使用了 要给下一个 state 一个 位置， 不要冲突了
  cursor++;
}

let _deps;

function useEffect(callback, depArray) {
  const hasNoDeps = !depArray;
  // 新的数组的每一项是不是等于 之前数组的每一项 这对于比较 ['a', 1]这样的基础类型是 可以的， 但是比较引用类型呢
  const hasChangeDeps = _deps
    ? !depArray.every((el, i) => el === _deps[i]) : true;
    if(hasNoDeps || hasChangeDeps) {
      callback();
      _deps = depArray;
    }
}