React面试题

[mewcoder]

• React 版本更新
• setState 是同步还是异步
• hooks 的使用限制
• useEffect
• React 事件机制

[mewcoder]

React 版本更新

• 16.3：fiber
• 16.8：hooks
• 17：过渡版本
• 18：concurrent mode
• 19：编译(自动 memo 化)， RSC的更新

[mewcoder]

setState 是同步还是异步

• 所谓同步异步是指调用 setState 之后状态是否立即发生改变，比如调用之后读取到的 state 是不是最新的。

• react18 之前（半自动批处理）：setState 只在合成事件和钩子函数中是异步的，在原生事件和 setTimeout 中都是同步的。

• React18（自动批处理）：是异步的

注意 vue 数据是可变的， nextTick() 是为了等待 DOM 更新，不是一个角度

[mewcoder]

hooks 的使用限制

只能在函数组件中使用，不要在 React 的循环、条件或嵌套函数中使用；

React 中每个组件都有一个对应的 FiberNode，其实就是一个对象，这个对象是有个属性叫 memoizedState。当组件是函数组件的时候，fiber.memoizedState 上存储的就是 Hooks 单链表。

单链表的每个 hook 节点没有名字或者 key，因为除了它们的顺序，我们无法记录它们的唯一性。因此为了确保某个 Hook 是它本身，我们不能破坏这个链表的稳定性。
保证 Hook 调用的顺序在每次渲染时都是相同的：

[mewcoder]

useEffect

由 setup 回调函数（return 清除函数 ） 和 依赖数组组成

• 不传依赖数组每次渲染都会执行回调函数
• 如果依赖值数组为空，则回调函数会在组件挂载后执行一次（可以访问 DOM）；如果 return 了函数，则为清除函数，会在组件被卸载之前执行。
• 依赖不为空，依赖值的变化则会执行回调函数。

cleanup函数执行时机：组件卸载时会运行 cleanup；重新渲染的情况下，在执行当前 effect 之前会对上一个 effect 进行清除

执行两次的问题：
在开发环境下，如果开启严格模式，React 会在实际运行 useEffect 之前额外运行一次 setup 和 cleanup。这是一个压力测试，确保 cleanup 和 setup 对应。

• useEffect 是屏幕绘制完成后执行的，是异步执行的。
• useLayoutEffect 在DOM更新后和屏幕绘制之前执行的，同步执行阻塞绘制， 与componentDidMount、componentDidUpdate 相同时机
• 用于处理 DOM 操作、调整样式、避免页面闪烁等问题

[mewcoder]

React 事件机制

• 注册事件监听函数的方式不同
• 合成事件为了兼容性，抹平浏览器差异；采用事件代理机制，代理到根元素，能减少内存占用提高性能
• 合成事件默认是冒泡机制，原生事件的执行顺序在合成事件之前

React 17 之前是将合成事件委托在 document 元素上的，17 之后是在 root 元素上