前端深度扩展

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时，并不会立即看到状态的变化，而是在下一批次的更新中看到所有的更改。例如：

this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });

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

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

this.setState(prevState => ({
  count: prevState.count + 1
}));

• 同步更新
  在某些情况下，React会在事件处理函数和生命周期方法中立即应用setState的更改。这通常是为了立即响应用户操作，如按钮点击。然而，这并不意味着所有的setState调用都是同步的，只是React有时会选择立即应用更改。
• 闭包问题导致使用useState，页面上却没有得到最新的值

  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的回调执行时，它仍然操作的是原来那个数组的引用。
解决办法

 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 可调度范围外。