闭包玩的明明白白

代码很简单，这里不做解读，这里重点说几点：
 const React = (function(){
        let hooks = [];
        let idx = 0;
        return {
          render(component){
            const C = component();
            C.render();
            idx=0;
            return C;
          },
          useState(v){
            const state = hooks[idx]||v;
            let _idx = idx;
            function setState(v) {
              hooks[_idx] = v;
            }
            idx++;
            return [state,setState];
          },
        }
      }());

      const {render,useState} = React;
      function component(){
        const [count,setCount] = useState(0);
        const [fruits,setFruits] = useState('apple');
        return {
          render(){
            console.log('渲染组件' ,count,fruits);},
          clickCount(){
            setCount(count+1);
          },
          clickFruits(v){
            setFruits(v);
          },
        }
      };

    const com = render(component);
    com.clickCount();
    render(component);
    com.clickCount();
    render(component);
    let com1 = render(component);
    com1.clickFruits('app');
    com1.clickCount();
    render(component);

React 的 API 设计能力确实不错，用解构赋值将 state 和对应的 setState 放在一起，简洁明了；

useState 的第一次执行可以取代 class 的构造函数初始化过程，值为 useState 的参数 initVal，运行后存储在闭包中所对应的 hooks[index] 
变量里。

从第二次 render 时开始访问 hooks[index] 而不是 initVal；
初始化时每调用一次 useState ，闭包里 hooks 便会递增分配对应的 index
 key 来存储对应的值。render 结束后 index 会重置为 0，下一次 render 
 执行 useState 时会按照相同顺序访问 hooks[index]；