前端深度扩展

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 可调度范围外。
相关推荐
轻口味1 小时前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王2 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发2 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀2 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪3 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef4 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6415 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻5 小时前
Vue(四)
前端·javascript·vue.js
蜜獾云5 小时前
npm淘宝镜像
前端·npm·node.js