面试-yl

FE

yl

Webpack

Webpack 静态打包构建工具

babel-loader style-loader url-file css-loarder sass-loader/less-loader loader:

HTMLWebpackPugin SplitChunksPlugin DIIPlugin Plugin:

React

  1. 常用生命周期

  2. PureComponent 优化：浅比较Props和State值是否发生了变化 只有发生了变化才进行更新，如果组件有自己的shouldComponentUpdate则用组件自己的判断，否则才做浅比较

  3. key：diff算法优化 一般唯一id

    如果用index做索引 有时候页面显示回有问题

  4. 为什么要用虚拟Dom？

    1. 页面性能的提升：尽管在我们前面的各种论证对比下，虚拟 DOM 并非最优解，但在大多数场景下，虚拟 DOM 能给你的页面过得去的性能，并且提供给你更爽的开发模式。
    2. 开发效率的提升：通过对前端发展历史的描述可以看出，每一次对 DOM 操作的革新，背后都是对开发效率的提升。不得不提的是，在 React 或者 Vue 时代，同样的页面，我们的开发效率是提升了不少。就单单一个将输入框的内容输出到页面的 mvvm 模式的开发，引入 Vue 或 React 就可以快速搞定。
    3. 跨平台的问题：虚拟 DOM 是对渲染内容的一层抽象描述，这就使得视图层和渲染层做了解耦。这层对渲染层的描述可以是 web、native、小程序等多端的，在不同端可能只需要一份代码就可以 work 。毕竟连 Vue3 也将 DOM 操作的内容提在一个独立的 runtime-dom.js 模块中，目的就是在多端操作渲染层的内容从而实现跨平台的可能性。
    4. 更利于前后端分离开发和组件拆分，项目拆分

  5. 类组件和函数组件的区别

    区别 函数组件 类组件
    是否有this 没有 有
    是否有生命周期 没有 有
    是否有状态state 没有 有

  6. 兄弟组件之间通信/全局状态管理

    Redux Mobx

    Redux

  7. forceUpdate

JS基础

  1. typeof

    string boolean object function undefined symbol bigint

    typeof Array === object

​ Array.isArary

​ [] Instanceof Array

​ Object.prototype.toString.call([])

  1. Promise API

    Promise all / race 和数组every和some一样意思

  2. await

    如果有个数据队列这个时候怎么办

    await 或者 Promise.all

  3. 闭包以及应用

    利用闭包立即执行表达式(function ( var a = 11 ) {})() 实现变量隔离

  4. 上下文作用域：This 指向

CSS基础

  1. flex

    Display: flex

    Justyfiy-content: center

    Algin-items：center

    Flex: 1

  2. 重置水平居中