标签：const idx render hooks component react useState 原理

闭包玩的明明白白

代码很简单，这里不做解读，这里重点说几点：
 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]；

标签：const,idx,render,hooks,component,react,useState,原理
来源： https://blog.csdn.net/qq_36262295/article/details/119253867

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。