陌上人如玉
公子世无双
共 23 篇文章

标签:前端面试

2.6 useContext-陌上寒

2.6 useContext

useContext 让组件跨越任意层级读取共享值,避免「层层透传 props」;但它的代价是「Provider 的 value 一变,所有消费者都会重渲染」——所以它适合「不常变化的共享值」,不适合高频变化的状态。

赞(0)陌上寒陌上寒02-Hooks体系 阅读()去评论
2.5 useRef-陌上寒

2.5 useRef

useRef 返回一个「在整个组件生命周期内保持同一引用」的对象,修改它的 .current 不会触发重渲染——因此它适合存「DOM 引用」与「与 UI 无关的可变值」。

赞(0)陌上寒陌上寒02-Hooks体系 阅读()去评论
2.4 useLayoutEffect-陌上寒

2.4 useLayoutEffect

useLayoutEffect 与 useEffect 的唯一区别是执行时机——前者在「DOM 更新后、浏览器绘制前」同步执行,后者在「绘制后」异步执行;需要「测量 DOM 并立即修正」以防闪烁时用前者。

赞(0)陌上寒陌上寒02-Hooks体系 阅读()去评论
2.3 useEffect 深入-陌上寒

2.3 useEffect 深入

useEffect 的语义是「把这个组件与某个外部系统同步起来」——它在渲染提交、浏览器绘制之后异步执行,通过依赖数组控制何时重新同步,通过清理函数保证「切换前先撤销上一次的同步」。

赞(0)陌上寒陌上寒02-Hooks体系 阅读()去评论
1.16 拖拽与手势-陌上寒

1.16 拖拽与手势

页面内的拖拽不要用 HTML5 Drag and Drop API(移动端基本不可用、无法做视觉跟随),而应该用 Pointer Events + setPointerCapture + touch-action 自己实现——核心是「一个 pointerId 贯穿全程、捕获指针、把移动换算成 tra…

赞(0)陌上寒陌上寒01-React基础 阅读()去评论
1.15 React 中的动画-陌上寒

1.15 React 中的动画

React 里做动画的真正难点只有两个——「卸载动画」(组件一卸载,DOM 立刻消失,没机会播动画)与「位置变化动画」(元素从 A 位置跳到 B 位置,没有过渡)——前者用「延迟卸载 + 动画结束回调」,后者用「FLIP」;

赞(0)陌上寒陌上寒01-React基础 阅读()去评论
1.14 DOM 测量与观察器-陌上寒

1.14 DOM 测量与观察器

在 React 里做测量有两个约束——「渲染阶段不能读 DOM」(否则破坏并发渲染的假设)与「读和写要分开」(混在一起会触发「强制同步布局」,也就是布局抖动);而「尺寸/可见性/结构/性能」四类变化分别由 ResizeObserver / IntersectionObserver / Mutatio…

赞(0)陌上寒陌上寒01-React基础 阅读()去评论