react hook 简单实现

基础版本usestate

var _state; // 
   
   function useState(initialValue) {
     _state = _state | initialValue; // 
     function setState(newState) {
       _state = newState;
       //render();
     }
     return [_state, setState];
   }


   let [name,setname]=useState('dd')
   console.log(name)

　　

 

升级版, 支持多个usestatehook ，已数组的形式存储

1. 初始化（react render时），按照 useState，useEffect 的顺序，把 state，deps 等按顺序塞到 memoizedState 数组中。
2. 更新的时候，按照顺序，从 memoizedState 中把上次记录的值拿出来。调用hook

let memoizedState = []; // hooks 存放在这个数组
let cursor = 0; // 当前 memoizedState 下标

function useState(initialValue) {
  memoizedState[cursor] = memoizedState[cursor] || initialValue;
  const currentCursor = cursor;
  
  function setState(newState) {

    memoizedState[currentCursor] = newState;

    //render
    
  }

  return [memoizedState[cursor++], setState]; // 返回当前 state，并把 cursor 加 1
}



let [name,setname]=useState('kitty')
let [age,setage]=useState('21')

setname('dog123')

console.info(memoizedState)

//["dog123", "21"]