1.浏览器的缓存机制
2.import和require的区别
-
导入
require导出exports/module.exports是CommonJS的标准 -
import/export是ES6的标准,通常适用范围如React -
require 和 import 都是同步加载的。只是 import 会在编译时先过一边用于 tree shaking,而 require 没有
-
import会提升到整个模块的头部,具有置顶性,建议写在文件的顶部,但并不是一定要写在顶部 -
require 是浅拷贝,也就是说你可以修改对象第二层的属性并影响原数据,import 是引用,基本数据类型,修改不会影响原数据,但是对象修改属性会
-
require支持动态导入,动态匹配路径,import对这两者都不支持
-
require是运行时调用,import是编译时调用
-
require是赋值过程,import是解构过程
3.webpack的打包流程
Webpack 的运行流程是一个串行的过程,从启动到结束会依次执行以下流程:
初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译确定入口:根据配置中的 entry 找出所有的入口文件编译模块:从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理完成模块编译:在经过第4步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统
在以上过程中,Webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果
4.babel的原理
Babel是一个JavaScript编译器。他把最新版的javascript编译成当下可以执行的版本,简言之,利用babel就可以让我们在当前的项目中随意的使用这些新最新的es6,甚至es7的语法。
Babel运行原理:
1. 解析:将代码字符串解析成抽象语法树(AST)
分为两个阶段:词法分析,语法分析
词法分析:将字符串形式的代码转换为令牌流
语法分析:使用令牌中的信息将它们转换成一个AST表述的结构
2. 转换:接收AST并对其进行遍历,对结点进行添加更新移除等操作。
Babel提供了@babel/traverse(遍历)方法维护这AST树的整体状态,并且可完成对其的替换,删除或者增加节点,这个方法的参数为原始AST和自定义的转换规则,返回结果为转换后的AST。
3. 生成:把经过一系列转换后的AST重新转换成字符串形式的代码,同时还会创建源码映射。
本质其实是深度优先遍历整个AST,然后构建可以表示转换后的代码的字符串,Babel使用@babel/generator将修改后的AST转换成代码,生成过程可以对是否压缩以及是否删除注释等进行配置,并且支持sourceMap。
5.git pull和git fetch的区别
6.react几个大版本的更新
- 16.x版本引入了fiber的概念,解决了之前掉帧的现象
- 17.x版本将syntheticEvent事件层的冒泡挂到了root上,而不是document上。这样e.stopPropergation的适用范围更广
- 18版本引入了批量更新(之前只是react事件会批更新,现在promise、原生事件、setTimeout这些也会),并发模式(通过react.createRoot()代替render()来开启),新增了几个hook等
7.class组件和hook组件的区别,为什么选用hook组件
- hook组件更加结构化,更便于组件的复用
- 函数式组件不需要去维护this,减少工作量
- 函数式组件不需要去管理声明周期,只需要用hook的副作用实现即可。而且会更加紧凑和方便,例如在挂载时声明一个timer,在卸载时clear这个timer
8.useEffect是怎么模拟class的声明周期的
- useEffect可以模拟3个class的声明周期,分别是componentDidMount、componentWillUpdate、componentWillUnmount
- 初次渲染完成后,会走一遍useEffect内代码,也就是componentDidMount
- 当监听发生改变时,会走componentWillUpdate
- 当要卸载执行回调时,走return,类似componentWillUnmount
- 其内部核心实现的原理是会把useEffect挂到fiber的节点上
9.函数式组件内为什么没有this
函数内部没有必要去维护一个this