前端面试

本节课我们来实现给我们的mini-react项目添加绑定事件。 先在app.jsx中添加click事件 通过打印，观察一下fiber中的button，方便后续处理 1.png 于是我们就想只要是on开

在数字化时代，可访问性（a11y）已成为Web开发不可忽视的核心议题。本文系统梳理了前端可访问性领域的学习路径与技术实践

本文将手把手实现React框架对函数组件的支持，揭示其核心运行原理。通过实现函数组件渲染、props传递和多组件支持，深入理解虚拟DOM和协调机制。

任务实现统一提交功能 目前使用requestIdelCallback的问题 当渲染完ABC三个节点之后没有时间了，可能再两秒之后才有空闲时间才会去回调，那么对于用户来说就会卡顿了两秒之后，整个页面才会

本文针对React中`requestIdleCallback`分步渲染导致的卡顿问题，提出通过统一提交机制优化渲染流程。

目标: 实现fiber架构 如何控制dom树的渲染 期望每一次渲染一个dom，实现完成之后检测还剩下多少空余时间，如果足够渲染另一个dom 我们通过链表来实现，1. 找child节点 2. 找sibl

本文通过实现简化版Fiber架构，揭示了React高效渲染的核心机制：将DOM树转换为可中断遍历的链表结构，利用浏览器空闲时间分片处理任务。

前端性能优化中，任务调度器通过分治策略将大型DOM操作拆解为可调度的原子任务，利用requestIdleCallback在浏览器空闲时段执行，有效解决渲染卡顿问题

目标:实现任务调度器 为什么要实现任务调度器 dom特别大的时候会造成渲染卡顿 看一个demo,代码如下，卡顿原因，js执行是单线程的，while循环逻辑会阻塞后面渲染 main.js index.h

目标:让之前的mini-react使用jsx 安装vite 将之前的App.js，core文件夹，main.js拷贝进去，并将App.js修改成App.jsx 修改index.html中的路径和id

本文记录了为自研Mini-React框架添加JSX支持的完整过程：通过Vite搭建开发环境，验证JSX编译机制，改造现有组件代码，并分析当前组件化支持的局限。

本文通过案例分析，揭示了React性能优化的核心在于通过组件结构设计实现bailout策略。通过分离可变状态与静态内容（如将状态逻辑抽离子组件、利用children插槽），使父组件避免重渲染

旧版 React ContextAPI 在数据更新时依赖组件树的完整调和流程，导致命中“跳过子树 beginWork”的 bailout 策略时，子树的 Context Consumer 无法响应更新

React的Bailout策略通过复用现有Fiber节点来优化性能，减少不必要的渲染。关键点：避免组件内定义子组件（导致type变化），合理使用优化API，理解props比较机制。

本文详细介绍了React内部的性能优化策略eagerState，其核心逻辑是在状态更新前后未变化时跳过后续更新流程。通过提前计算state并与当前state对比，若相同则避免进入调度阶段。

本文详细介绍了 React 中的 UpdateQueue，包括其数据结构、工作原理以及如何处理更新的优先级。Update 是计算 state 的最小单位。

本文深入剖析了 React useRef 的原理、工作流程以及可能出现的“失控”现象。从 useRef 的创建、更新机制，到 render 和 commit 阶段的 ref 处理。

本文详细对比了 React 中的 useEffect 和 useLayoutEffect。useEffect 在组件渲染后异步执行，useLayoutEffect 在布局前同步执行

本文通过对比useState和useReducer的基本用法、mount阶段和update阶段的源码实现，揭示了两者的核心区别。

本文深入解析React Hooks的底层实现机制：通过链表结构串联Hook对象，每个Hook以memoizedState存储状态（如useState的值、useEffect的依赖等）