Fuck Interview

Appearance

2024.3.22 杭州公司面试 ​

事件冒泡？列表中删除元素时绑定事件怎么处理？ ​

标准事件模型分三个阶段：事件捕获/事件处于目标阶段/事件冒泡 列表删除元素时避免为每一个元素注册点击事件而造成性能损耗，可以在它们的父元素上监听事件，借助事件冒泡，在父元素上接收事件后根据元素的id进行删除操作。

rem和px的区别，好处？UI给出的图是px的，如何转换成rem? ​

rem是相对长度单位，相对于根元素（html）上的字体大小来计算。

px是相对长度单位，值根据设备屏幕的分辨率来确定。

TIP

因为1rem = 16px，所以rem值=待转换值/16

如果UI图是px，那么手动将px计算为rem效率太低，这里可以借助postcss地插件来快速地转换。

js
// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-pxtorem')({
      rootValue: 16, // 1rem等于16px
      propList: ['*']
    })
  ]
}

通过postcss-pxtorem插件在构建过程中会自动将css文件中单位为px的值计算为rem值。

react中setState直接传入值和传入回调函数的区别？ ​

由于setState在React组件的生命周期和合成事件中是异步更新的（代码同步执行）的，它无法对当前快照的变量进行修改,在下一次更新前setState中永远都是旧的值用于计算；而如果传入的是回调函数，在连续多次调用它们时React会将这些setState放入一个队列中批量处理，在下一次更新前按照顺序执行队列中的回调函数，前一个回调的结果作为新的状态被下一个回调接收，直到队列执行完毕得到最终的新值。

useEffect的setup函数返回的cleanup函数什么时候执行？ ​

  • 依赖数组中的值发生改变，会先使用旧的props和state执行一次cleanup，再使用新的props和state执行setup函数。
  • 组件卸载的时候最后执行一次

useRef为什么能作缓存？ ​

useRef的本质就是引用，它总能拿到最新值。useRef创建的对象会存放在对应的组件Fiber上，在组件的生命周期内都不会改变。

useContext的用法？有什么问题？ ​

创建上下文，用于跨层级共享状态.

消费了Context的组件会在value变化时重新渲染，如果有很多个组件同时消费一个context并且context的值是经常变化的，那么就有性能问题。 为了避免不必要的重复渲染，可以使用useMemo和useCallback对值和函数进行缓存，或者粒度化Context，将一个Context拆分成一个个小的Context,只有消费了相应Context的组件在value变化时才更新。

React Diff算法？ ​

DIFF算法的目的就是通过对比新旧的虚拟DOM树得出差异并以性能损耗最小的方式进行更新。

React的Diff策略：三个层次，同级比较。

React只会比较新旧DOM树的同级节点，在Tree层次的比较时，不进行移动操作，如果相同位置的节点发生变化只进行删除和新增操作。（相比于创建和删除，移动操作有更大的性能损耗）。在组件层次比较时，会尽可能复用节点，例如某个节点发生改变但是它的子树没有变化，那么只需要更新发生改变的节点而子树复用。在元素层次比较时（例如列表），依赖于唯一标识Key来进行移动/删除操作,采用右移策略。

zustand的原理？为什么在组件A修改了store中的state，组件B的UI也会更新？ ​

zustand = 发布订阅 + useSyncExternalStore 。

zustand内部通过发布订阅模式来实现状态改变的通知，通过是使用useSyncExternalStore来让React可以订阅到zustand的内部状态并在状态改变时改变视图。

Next.js创建的是多页应用还是单页？SSR有实践吗？怎么理解SSR？ ​

next.js创建的应用是多页还是单页取决于使用什么方式来编写，如果是用服务端渲染的方式，通过服务器返回HTML结构的可以看作是多页应用，如果依赖浏览器解析并且页面的切换不会请求新的HTML的而是局部更新的则是单页应用。

SSR就是将浏览器解析处理HTML的工作放在服务器上来做，服务器在处理完成后将HTML字符串返回给浏览器，浏览器再对HTML字符串进行解析，将相应的事件注册和绑定（水合），最终渲染出来。

优点： 更快的首屏加载速度和更好的可访问性（SEO）

依赖json schema的动态表单中的表单项联动怎么做？ ​

在依赖 JSON Schema 的动态表单中实现表单项的联动，通常可以通过以下步骤来实现：

  1. 定义 JSON Schema：首先，需要定义包含所有表单项的 JSON Schema。JSON Schema 可以描述表单的结构、字段类型、验证规则等信息。

  2. 前端页面渲染：根据 JSON Schema 动态生成表单页面。可以使用前端框架（如React、Vue等）结合 JSON Schema 的描述，动态生成表单元素。

  3. 表单项联动逻辑：在 JSON Schema 中可以定义一些字段之间的联动关系，比如条件显示、禁用、必填等。这可以通过在 JSON Schema 中添加一些自定义属性或规则来实现。

  4. 监听表单项变化：在前端页面中，监听表单项的变化事件（如输入框的输入事件、下拉框的选择事件等），根据联动规则动态改变其他表单项的状态（显示、隐藏、禁用等）。

  5. 数据验证：根据 JSON Schema 中定义的验证规则，对用户输入的数据进行验证，确保数据的完整性和准确性。

  6. 实时更新：在用户操作表单时，实时根据联动规则更新其他相关表单项，提供更好的用户体验。

通过以上步骤，可以实现在依赖 JSON Schema 的动态表单中实现表单项的联动功能。这样可以根据业务需求动态展示和控制表单项，提升用户体验和表单的交互性。

Copyright © 2024 Chenbin Li