网站建设教程ppt直播代运营公司
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 就是异步的，反之，则为同步
- 什么是react 可调度范围内呢？
react 合成事件内同步执行的setState 就是可调度范围。- 什么是react 可调度范围外呢？
宏任务：setTimeout ，微任务：.then ，或直接在DOM元素上绑定的事件等都是react 可调度范围外。