前端深度扩展

1 为什么要有webpack

  • 模块化管理:构建工具支持Common JS、ES6模块等规范;

  • 依赖管理:在大型项目中,手动管理文件依赖关系。webpack可以自动分析项目中的依赖关系,将其打包成1个或多个优化过的文件,减少页面加载的HTTP请求;

  • 资源处理:通过加载器和插件,可以处理less、sess等文件,可以对js进行压缩、可以将非JS资源进行转换;

  • webpack提供了代码分割、懒加载、TreeShaking 等功能,有助于减小最终文件体积;

    • 代码分割:之前需要加载某个模块时,需要动态创建script标签并设置src属性来异步加载资源;

    • 懒加载:运行时按需加载,而不是一开始就全部打包到bundle中;
      const MyComponent = () => import('./MyComponent.vue')

    • 预加载(<link rel="preload">)和预获取(<link rel="prefetch">

    • Tree Shaking移除JS项目中未被使用的代码来减少最终打包体积;之前需要uglifyJS等压缩工具来删除未使用的变量和函数、需要手动配置;

  • 热替换:

    • 开发时,对源码中的某个模块进行更改,webpack能检测到更改,并触发重新加载该模块;
    • 在替换模块之前,应用的状态被快照话,状态信息被保存下来;新模块加载后,之前保存的状态快照被用来恢复应用的状态,而不是从头开始;(并不是所有的模块都可以轻易地进行快照和恢复,比如事件监听器、定时器)
  • 构建流程自动化,自动完成编译、压缩、合并;

  • 支持多页应用:通过特定的配置和插件(比如:html-webpack-plugin,可以很好地支持多应用开发,自动生成或者更新HTML文件)

2 setState是同步还是异步

  • setState的异步性
    React将多个setState调用批处理并合并为一次更新,以提高性能。这意味着当你连续调用setState时,并不会立即看到状态的变化,而是在下一批次的更新中看到所有的更改。例如:
javascript 复制代码
this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });

在上面的代码中,即使调用了两次setState,状态count也只会增加1,而不是2。

尽管setState是异步的,但React允许你根据前一个状态来设置新的状态。例如:

javascript 复制代码
this.setState(prevState => ({
  count: prevState.count + 1
}));
  • 同步更新
    在某些情况下,React会在事件处理函数和生命周期方法中立即应用setState的更改。这通常是为了立即响应用户操作,如按钮点击。然而,这并不意味着所有的setState调用都是同步的,只是React有时会选择立即应用更改。
  • 闭包问题导致使用useState,页面上却没有得到最新的值
javascript 复制代码
  const [todos, setTodos] = useState(['Learn React']);
  function addTodo() {
    setTimeout(() => {
      // 这里存在闭包问题,setTimeout内的回调函数捕获了todos的旧引用
      const newTodo = 'Master useState';
      setTodos(todos.concat(newTodo)); // 尝试添加新待办事项
      console.log('Todos after adding:', todos); // 这里打印的可能是旧的todos数组
    }, 2000);
  }

调用setTodos更新状态后,todos的引用实际上没有变(因为数组和对象等引用类型在更新时不会改变地址),所以当两秒后setTimeout的回调执行时,它仍然操作的是原来那个数组的引用。
解决办法

javascript 复制代码
 function addTodo() {
   setTimeout(() => {
     const newTodo = 'Master useState';
     // 使用扩展运算符创建todos的新数组副本
     setTodos([...todos, newTodo]);
     // 此处打印的仍然是旧的todos,因为setState是异步的,但实际UI会正确更新
     console.log('Todos after adding (may be old):', todos);
   }, 2000);
}

每次更新状态时都会创建todos数组的一个新副本,确保了闭包中引用的总是最新的状态值,进而避免了闭包问题导致的数据似乎未更新的现象。注意,即使修复了闭包问题,由于setState的异步性质,console.log可能仍然打印出更新前的值,但这不影响UI的正确更新。

React17

在react 可调度范围内的setState 就是异步的,反之,则为同步

  1. 什么是react 可调度范围内呢?
    react 合成事件内同步执行的setState 就是可调度范围。
  2. 什么是react 可调度范围外呢?
    宏任务:setTimeout ,微任务:.then ,或直接在DOM元素上绑定的事件等都是react 可调度范围外。
相关推荐
盛夏绽放6 小时前
jQuery 知识点复习总览
前端·javascript·jquery
胡gh8 小时前
依旧性能优化,如何在浅比较上做文章,memo 满天飞,谁在裸奔?
前端·react.js·面试
大怪v8 小时前
超赞👍!优秀前端佬的电子布洛芬技术网站!
前端·javascript·vue.js
胡gh9 小时前
你一般用哪些状态管理库?别担心,Zustand和Redux就能说个10分钟
前端·面试·node.js
roamingcode10 小时前
Claude Code NPM 包发布命令
前端·npm·node.js·claude·自定义指令·claude code
码哥DFS10 小时前
NPM模块化总结
前端·javascript
灵感__idea11 小时前
JavaScript高级程序设计(第5版):代码整洁之道
前端·javascript·程序员
唐璜Taro11 小时前
electron进程间通信-IPC通信注册机制
前端·javascript·electron
陪我一起学编程12 小时前
创建Vue项目的不同方式及项目规范化配置
前端·javascript·vue.js·git·elementui·axios·企业规范
LinXunFeng13 小时前
Flutter - 详情页初始锚点与优化
前端·flutter·开源