顺丰一面

55 阅读4分钟

1.浏览器的缓存机制

blog.csdn.net/ohnk_/artic…

2.import和require的区别

  • 导入require 导出 exports/module.exportsCommonJS 的标准

  • import/exportES6 的标准,通常适用范围如 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 的运行结果

juejin.cn/post/684490…

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

juejin.cn/post/684490…