好好的井底空间

写一个巨长巨臭又要求各种智能回显的表单，真的写到崩溃…… React 的状态更新为什么要异步执行呢？就算异步，提供一个 async 版的 setState 不行吗？就算不提供，哪怕给个传回调函数的机会呢？非要借助 useEffect，逻辑越是混乱的地方，越容易误触 useEffect，这个 api 到底有什么好啊？只想精准控制，就要设置一个和业务毫无关系的 flag state，不脏吗？ 每到这个时候就会怀念起 Vue 了😓响应式状态同步更新，顺序执行的逻辑代码耦合紧密，遇到实在复杂的场景还可以用 nextTick 打个补丁。React 写到走投无路的时候就只能重构了，看着那个六百多行怎么拆都拆不开的表单真是想死的心都有了…… 留下个场景记录吧！也许哪天变厉害了，回头再来看这个场景，就知道该怎么改了吧！ 1. 调用接口获取一组文件的地址； 2. useState 更新 fileParserList，isParsingList，parseResultList 的状态，将值设为 Array.from({ length : fileUrlList.length }, () => initialValue )； 3. 并发执行文件解析，Promise.all(fileUrlList.map((url, index) => parseFile(index, url)))； 4. 在 parseFile 函数中实现对应文件的 fileParser、isParsing、parseResult 的更新。

被坑了两次，每次费半天力气 debug 到最后发现都是这个问题导致的，甚至开发历程都是一模一样，我真的累…… 时间线： 1. 封装了一个上传 csv 的组件 / 上传图片的组件； 2. 考虑借助 transform 属性实现统一的值转化，格式大概如下： 3. 数月后，产品经理提出扩展需求，字段数组化； 4. 直接使用 <ProFormList /> 包裹； 5. 发现字段修改后无法触发正常的更新； 6. 开启漫长的 debug 历程…… 7. 最后发现 namepath 取值为 ProFormList 的 name，而非实际字段的 name，卒。 解决方案：

 1. 点击这里找到 Extension 文件所在目录。 2. 手动删除这个 Extension 目录。 3. 重启 VS Code。 4. 在插件市场搜索这个 Extension。 5. 下载 VSIX 文件。 6. 安装 VSIX 文件。 7. 视情况勾选 Auto Update。

  啊！我悟到了……

  可以简单记忆： __proto__是每个对象都有的属性； prototype是函数才有的属性。 当然，会存在一些奇奇怪怪的例外。

  一 、变量提升 1. JS代码运行机制：分段预编译 → 逐行执行。 2. 预编译阶段可能存在【变量提升】的情况，将【变量声明的语句】提升至作用域顶端（不包括【变量赋值的语句】）。 3. var声明变量时，变量自动初始化为undefined；const和let声明变量时，变量不会自动初始化，只有在代码执行阶段，遇到赋值操作时，才会被初始化。 4. function声明函数时，整个函数体得到提升。 5. class声明类时，不存在提升。 二 、作用域 1. 全局作用域 2. 函数作用域 3. 块级作用域：{...}大括号内的代码块    ① 只有使用const和let声明变量时，会针对这个变量形成一个封闭的块级作用域。    ② 声明变量前访问该变量，会提示ReferenceError（块级作用域外 !!! 更正: 这里也属于块级作用域内 ）；声明变量后访问该变量，可正常运行（块级作用域内）。    ③ 暂时性死区，temporal dead zone：起始于函数开始 （ !!! 更正: 起始于块级作用域开始，比如if的{} ） ，终止于相关变量声明。 三、调用栈 1. 作用域是在预编译阶段确定的；作用域链是在函数调用后，执行上下文创建后，才确定的。 2. 执行上下文包括：变量对象、作用域链、this。 3. 调用栈：管理执行上下文的栈（管理函数调用关系的栈）。 4. 函数被调用 → 入栈 → 函数执行 (可访问其内部变量) → 函数执行完毕 → 出栈 (该函数的执行上下文被销毁) 四、闭包 1. 嵌套函数中，内层函数引用了外层函数作用域下的变量。 2. 外层函数执行结束，上下文被销毁，但被内层函数引用的变量不会消失。 3. 开发者仍可通过调用内层函数来访问外层函数中的该变量。 4. 内层函数及其捆绑的外层函数变量的引用，被称为闭包。 五、内存管理 1. 内存空间 = 栈空间 + 堆空间 2. 基本类型数据保存在栈空间中；引用类型数据保存在堆空间中，其地址值保存在栈空间中。 3. 注意避免内存泄漏。    常见情况：addEventListener - removeEventListener、setInterval - clearInterval。 4. 闭包使用不当，易引发内存...