React Hooks

Hook可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性

useState

useState 就是一个 Hook
通过在函数组件里调用它来给组件添加一些内部 state,React 会在重复渲染时保留这个 state
useState 会返回一对值：当前状态和一个让你更新它的函数，你可以在事件处理函数中或其他一些地方调用这个函数。它类似 class 组件的 this.setState，但是它不会把新的 state 和旧的 state 进行合并
useState 唯一的参数就是初始 state
返回一个 state，以及更新 state 的函数
在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同
setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列

let hookState = []; // 这是全局变量，用来记录hook的值
let hookIndex = 0; // 存放当前hook的索引值
let scheduleUpdate;
function render(vdom, container) {
   
    mount(vdom,container);
    // react里不管哪里触发的更新，真正的调度都是从根节点开始的
    scheduleUpdate = ()=>{
   
      hookIndex = 0; // 索引值重置为0
      // 从根节点执行完整的dom-diff,进行组件更新
      compareTwoVdom(container,vdom,vdom);
    }
}
function useState(initailState) {
   
	hookState[hookIndex] = || hookStates[hookIndex]||initialState;
	let currentIndex = hookIndex;
	function setState(newState){
   
      if(typeof newState === 'function') newState=newState(hookStates[currentIndex]);
      hookStates[currentIndex]=newState;
      scheduleUpdate(); // 状态变化后，要执行调度更新任务
    }
    return [hookStates[hookIndex],setState];
}

useCallbackuseMemo

把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新
把创建函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算

let  Child = ({
    data,handleClick})=>{
   
  console.log('Child render');
  return (
     <button onClick={
   handleClick}>{
   data.number}</button>
  )
}
Child = React.memo(Child);

function App(){
   
  console.log('App render');
  const[name,setName]=React.useState('zhufeng');
  const[number,setNumber]=React.useState(0);
  let data = React.useMemo(()=>({
   number}),[number]);
  let handleClick = React.useCallback((