1. 什么是 BFC（块级格式化上下文）？如何触发？

• BFC 是一个独立的渲染区域，内部元素布局不影响外部。
• 触发条件：float 不为 none、overflow 不为 visible、position 为 absolute/fixed、display 为 inline-block/table-cell/flex/grid 等。

2. 重排（reflow）与重绘（repaint）的区别？

• 重排：当 DOM 变化影响元素几何属性（宽高、位置）时，浏览器需要重新计算布局，性能开销大。
• 重绘：元素样式改变但不影响布局（如颜色），只需重新绘制，性能开销较小。
• 应尽量减少重排，如通过批量修改样式、使用 transform 替代 top/left 等。

3. 事件循环（Event Loop）是什么？宏任务和微任务有什么区别？

• 事件循环是浏览器/Node.js 处理异步任务的机制。
• 宏任务：script（整体代码）、setTimeout、setInterval、I/O、UI 渲染等。
• 微任务：Promise.then、async/await（函数体后的部分）、MutationObserver、queueMicrotask。
• 执行顺序：执行一个宏任务 -> 执行所有微任务 -> 渲染（如果需要）-> 下一个宏任务。

4. Promise 是什么？如何实现链式调用？

• Promise 是异步编程的一种解决方案，代表一个异步操作的最终完成或失败。
• 三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）。状态一旦改变不可逆。
• 链式调用：then 方法返回一个新的 Promise，所以可以连续调用 then。

5. async/await 与 Promise 的关系？

• async 函数返回一个 Promise，await 等待一个 Promise 完成，以同步写法写异步代码。
• await 只能在 async 函数内部使用，本质上是 Promise 的语法糖。

6. 数组常用的方法有哪些？哪些会改变原数组？

• 改变原数组：push、pop、shift、unshift、splice、sort、reverse、fill。
• 不改变原数组：concat、slice、map、filter、forEach、reduce、some、every、find、findIndex、includes、join。

7. 如何实现深拷贝和浅拷贝？

• 浅拷贝：复制对象的第一层属性，可使用 Object.assign()、展开运算符 {...obj}、Array.prototype.concat()。
• 深拷贝：递归复制所有层级。
• 简单方法：JSON.parse(JSON.stringify(obj))（缺点：无法复制函数、undefined、Symbol、循环引用）。
• 递归实现：判断类型，对不同类型（Date、RegExp、Array、Object）分别处理。
• 使用 structuredClone（现代浏览器）、Lodash 的 cloneDeep。

// 浅拷贝let obj1 = { a: 1, b: { c: 2 } };let obj2 = { ...obj1 }; // 浅拷贝console.log(obj1.b === obj2.b); // true，说明是浅拷贝obj2.b.c = 3;console.log(obj1.b.c); // 3，说明是浅拷贝// 深拷贝let obj1 = { a: 1, b: { c: 2 } };let obj2 = JSON.parse(JSON.stringify(obj1)); // 深拷贝obj2.b.c = 3;console.log(obj1.b.c); // 2，说明是深拷贝

8. React 中组件通信的方式有哪些？

• 父子通信：父传子通过 props，子传父通过回调函数。
• 兄弟通信：通过共同的父组件进行状态提升。
• 跨层级通信：使用 Context 或状态管理库（Redux、MobX）。
• 发布订阅模式、Event Bus（不推荐）。

9. setState 是同步还是异步？

• 在 React 合成事件和生命周期钩子中，setState 是异步的（批量更新）。
• 在原生事件、setTimeout、Promise 等中，setState 是同步的。
• 可通过第二个参数（回调函数）获取更新后的状态。

0. React 中 ref 的作用？如何创建 ref？

• ref 用于访问 DOM 节点或 React 元素实例。
• 创建方式：React.createRef()（类组件）、useRef()（函数组件）、回调 ref。