国企网站建设,王野 天启,网络营销外包要多少钱,wordpress 能做什么1 为什么要有webpack
模块化管理#xff1a;构建工具支持Common JS、ES6模块等规范#xff1b;依赖管理#xff1a;在大型项目中#xff0c;手动管理文件依赖关系。webpack可以自动分析项目中的依赖关系#xff0c;将其打包成1个或多个优化过的文件#xff0c;减少页面加…1 为什么要有webpack
模块化管理构建工具支持Common JS、ES6模块等规范依赖管理在大型项目中手动管理文件依赖关系。webpack可以自动分析项目中的依赖关系将其打包成1个或多个优化过的文件减少页面加载的HTTP请求资源处理通过加载器和插件可以处理less、sess等文件可以对js进行压缩、可以将非JS资源进行转换webpack提供了代码分割、懒加载、TreeShaking等功能有助于减小最终文件体积 代码分割之前需要加载某个模块时需要动态创建script标签并设置src属性来异步加载资源 懒加载运行时按需加载而不是一开始就全部打包到bundle中 const MyComponent () import(./MyComponent.vue) 预加载(link relpreload和预获取link relprefetch 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 可调度范围外。
