当前位置：首页 > news >正文

七牛云前端面试题及参考答案（上）

news 2025/7/6 10:29:02

基本数据类型有哪些？typeof null 的结果是什么？

在 JavaScript 中，基本数据类型是语言中最基础的数据表示形式，它们是不可变的（immutable），并且直接存储在栈内存中。ES6 及以后的版本定义了以下七种基本数据类型：undefined、null、boolean、number、string、symbol（ES6 新增）和 bigint（ES2020 新增）。

undefined 表示变量已声明但未赋值，或者函数没有返回值时的默认返回值。例如：

let x;
console.log(x); // 输出undefinedfunction test() {}
console.log(test()); // 输出undefined

null 是一个原始值，表示有意为之的空值。它是一个原始值，而非对象，尽管 typeof null 的结果是 "object"，这是 JavaScript 语言的一个历史遗留错误。

boolean 类型只有两个值：true 和 false，用于逻辑判断。

number 类型表示所有数字，包括整数和浮点数。JavaScript 使用 IEEE 754 双精度 64 位浮点数（53 位有效数字）表示数字，因此存在精度限制，例如 0.1 + 0.2 !== 0.3。

string 类型用于表示文本数据，是不可变的 Unicode 字符序列。可以使用单引号、双引号或反引号（模板字符串）表示。

symbol 类型是 ES6 新增的一种原始类型，表示独一无二的值，主要用于创建对象的私有属性和方法，或作为常量使用，避免命名冲突。

bigint 类型是 ES2020 新增的，用于表示任意精度的整数，可以安全地存储和操作超过 JavaScript Number 类型最大安全整数（Number.MAX_SAFE_INTEGER，即 2^53 - 1）的大整数。

关于 typeof null 的结果，这是 JavaScript 语言的一个著名的历史错误。尽管 null 是一个原始值，但 typeof null 返回 "object"。这个问题最早出现在 JavaScript 的第一个版本中，当时值在内部存储为 32 位字，前 3 位表示类型标签，而 null 的类型标签是 000，与对象的类型标签相同。因此，typeof 错误地将 null 识别为对象。这个问题已经被确认是语言的一个缺陷，但由于向后兼容性的考虑，它无法被修复。在现代 JavaScript 中，如果需要检查一个值是否为 null，应该使用严格相等运算符（===）：

let value = null;
console.log(value === null); // true
console.log(typeof value); // "object"

null 和 undefined 的区别是什么？

在 JavaScript 中，null 和 undefined 是两个特殊的原始值，都表示 "没有值"，但它们的含义和用法有明显区别。

undefined 表示变量已声明但未赋值，或者函数没有返回值时的默认返回值，或者访问不存在的对象属性时的结果。它是一个全局变量，也是一个原始值。例如：

let x;
console.log(x); // 输出undefinedfunction test() {}
console.log(test()); // 输出undefinedconst obj = {};
console.log(obj.nonExistentProperty); // 输出undefined

null 则表示一个有意为之的空值。它是一个原始值，表示 "没有值" 或 "空引用"。通常用于显式地表示一个变量或对象属性当前没有值，但将来可能会被赋值。例如：

let person = null; // 表示person对象目前没有值
// 稍后可能会赋值：
person = { name: "John" };

从技术角度来看，null 和 undefined 有以下区别：

类型不同：typeof undefined 返回 "undefined"，而 typeof null 返回 "object"（这是 JavaScript 的一个历史错误）。
赋值行为：undefined 通常是自动赋值的，而 null 需要显式赋值。
语义不同：undefined 表示缺少值，而 null 表示空值。
转换规则：在布尔上下文中，两者都被视为 false。在数字上下文中，undefined 转换为 NaN，而 null 转换为 0。例如：

Boolean(undefined); // false
Boolean(null); // falseNumber(undefined); // NaN
Number(null); // 0

严格相等性：null 和 undefined 不严格相等（===），但在宽松相等性（==）下它们相等。这是因为 JavaScript 的类型转换规则：

null === undefined; // false
null == undefined; // true

在实际应用中，通常使用 null 来初始化一个变量，表明这个变量将来会存储一个对象，但目前还没有赋值。而 undefined 更多地用于表示系统层面的缺失值，如未传递的函数参数、未赋值的变量或不存在的对象属性。

let 关键字的特点有哪些？

let 是 ES6 引入的关键字，用于声明块级作用域的变量。与 var 相比，let 具有以下特点：

块级作用域：let 声明的变量只在当前代码块（花括号 {} 内）有效，而 var 声明的变量具有函数作用域或全局作用域。例如：

function test() {if (true) {let x = 10;var y = 20;}console.log(y); // 20console.log(x); // ReferenceError: x is not defined
}

不存在变量提升：var 声明的变量会被提升到函数或全局作用域的顶部，可以在声明前访问（值为 undefined）。而 let 声明的变量不会被提升，在声明前访问会导致 ReferenceError，这被称为 "暂时性死区"（TDZ）。例如：

console.log(a); // undefined
var a = 10;console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

不允许重复声明：在同一作用域内，let 不允许重复声明同一个变量，而 var 可以。例如：

var a = 10;
var a = 20; // 合法，a的值被更新为20let b = 10;
let b = 20; // SyntaxError: Identifier 'b' has already been declared

循环中的块级作用域：在 for 循环中使用 let 声明的变量具有块级作用域，每次迭代都会创建一个新的变量副本，这对于闭包的正确行为非常重要。例如：

for (var i = 0; i < 5; i++) {setTimeout(() => console.log(i), 100); // 输出5, 5, 5, 5, 5
}for (let j = 0; j < 5; j++) {setTimeout(() => console.log(j), 100); // 输出0, 1, 2, 3, 4
}

在第一个循环中，var 声明的 i 在整个函数作用域内共享，当 setTimeout 执行时，循环已经结束，i 的值为 5。而在第二个循环中，let 声明的 j 在每次迭代时都会创建一个新的副本，每个 setTimeout 捕获的是不同的 j 值。

暂时性死区（TDZ）：let 声明的变量在作用域开始到声明语句之间的区域称为暂时性死区，在此区域内访问变量会导致 ReferenceError。例如：

{// TDZ开始console.log(x); // ReferenceErrorlet x = 10;// TDZ结束
}

全局作用域行为：在全局作用域中，let 声明的变量不会成为 window 对象的属性，而 var 声明的变量会。例如：

var a = 10;
console.log(window.a); // 10let b = 20;
console.log(window.b); // undefined

这些特点使得 let 在现代 JavaScript 中成为声明变量的首选方式，它解决了 var 的一些设计缺陷，如变量提升和函数作用域导致的意外行为，提供了更安全、更符合直觉的变量声明方式。

this 指向的规则是什么？箭头函数中 this 指向哪里？

在 JavaScript 中，this 关键字的指向取决于函数的调用方式，它可以在不同的上下文中指向不同的值。this 的指向规则主要有以下几种：

全局作用域：在全局作用域中，this 指向全局对象（在浏览器中是 window 对象）。例如：

console.log(this === window); // truevar globalVar = 'global';
console.log(this.globalVar); // 'global'this.globalVar2 = 'global2';
console.log(window.globalVar2); // 'global2'

函数调用：当函数作为普通函数调用时，this 指向全局对象（在严格模式下，this 为 undefined）。例如：

function test() {console.log(this);
}test(); // 在浏览器中输出window对象// 严格模式
function strictTest() {'use strict';console.log(this);
}strictTest(); // undefined

方法调用：当函数作为对象的方法调用时，this 指向调用该方法的对象。例如：

const obj = {name: 'John',sayHello() {console.log(`Hello, ${this.name}`);}
};obj.sayHello(); // Hello, Johnconst anotherObj = {name: 'Jane',greet: obj.sayHello
};anotherObj.greet(); // Hello, Jane

构造函数调用：当函数作为构造函数调用时，this 指向新创建的对象。例如：

function Person(name) {this.name = name;this.sayName = function() {console.log(this.name);};
}const person1 = new Person('Alice');
person1.sayName(); // Alice

call、apply 和 bind 方法：这些方法可以显式地设置函数调用时 this 的指向。例如：

function greet(message) {console.log(`${message}, ${this.name}`);
}const person = { name: 'Bob' };greet.call(person, 'Hello'); // Hello, Bob
greet.apply(person, ['Hi']); // Hi, Bobconst boundGreet = greet.bind(person, 'Hey');
boundGreet(); // Hey, Bob

箭头函数中的 this 指向与普通函数不同。箭头函数不拥有自己的 this，它继承自定义时的上下文，而不是调用时的上下文。这意味着箭头函数中的 this 值取决于它定义的位置，而不是如何被调用。例如：

const obj = {name: 'John',regularFunc: function() {console.log(this.name);},arrowFunc: () => {console.log(this.name);}
};obj.regularFunc(); // John
obj.arrowFunc(); // undefined（在浏览器中，this指向window，window.name为空）

在这个例子中，regularFunc 作为对象的方法调用，this 指向 obj。而 arrowFunc 的 this 继承自定义时的上下文，在这个例子中是全局作用域（window）。

箭头函数的这个特性使得它在处理回调函数时非常有用，特别是在需要保留上下文的情况下。例如：

function Timer() {this.seconds = 0;setInterval(() => {this.seconds++; // 箭头函数继承了Timer构造函数的thisconsole.log(this.seconds);}, 1000);
}const timer = new Timer();

在这个例子中，箭头函数继承了 Timer 构造函数的 this，因此可以正确地更新 seconds 属性。如果使用普通函数，this 会指向全局对象或 undefined（严格模式），导致错误的行为。

如何实现 JavaScript 的深拷贝和浅拷贝？

在 JavaScript 中，对象和数组是引用类型，赋值操作只会复制引用，而不会创建新的对象。深拷贝和浅拷贝是两种不同的复制对象的方式：

浅拷贝只复制对象的一层属性，如果属性是引用类型，则只复制引用，而不复制对象本身。因此，原对象和浅拷贝对象会共享这些引用类型的属性。

深拷贝会递归地复制对象的所有属性，包括嵌套的对象和数组，创建一个完全独立的新对象。原对象和深拷贝对象没有任何引用关系。

以下是实现浅拷贝和深拷贝的常见方法：

浅拷贝的实现方法：

手动遍历对象属性：

function shallowCopy(obj) {const newObj = {};for (let key in obj) {if (obj.hasOwnProperty(key)) {newObj[key] = obj[key];}}return newObj;
}const original = { a: 1, b: { c: 2 } };
const shallow = shallowCopy(original);
console.log(shallow.b === original.b); // true，共享引用

Object.assign () 方法：

const original = { a: 1, b: { c: 2 } };
const shallow = Object.assign({}, original);
console.log(shallow.b === original.b); // true

扩展运算符（Spread Operator）：

const original = { a: 1, b: { c: 2 } };
const shallow = { ...original };
console.log(shallow.b === original.b); // true

数组的浅拷贝方法：

const originalArray = [1, { a: 2 }];
const shallowArray = [...originalArray];
// 或者使用Array.prototype.slice()
const shallowArray2 = originalArray.slice();
console.log(shallowArray[1] === originalArray[1]); // true

深拷贝的实现方法：

JSON.parse(JSON.stringify())：

const original = { a: 1, b: { c: 2 } };
const deep = JSON.parse(JSON.stringify(original));
console.log(deep.b === original.b); // false

这种方法简单易用，但有以下局限性：

会忽略 undefined、symbol 和函数
不能处理循环引用
不能正确处理 Date、RegExp 等特殊对象

手动递归实现深拷贝：

function deepCopy(obj) {if (obj === null || typeof obj !== 'object') {return obj;}let newObj;if (Array.isArray(obj)) {newObj = [];for (let i = 0; i < obj.length; i++) {newObj[i] = deepCopy(obj[i]);}} else {newObj = {};for (let key in obj) {if (obj.hasOwnProperty(key)) {newObj[key] = deepCopy(obj[key]);}}}return newObj;
}const original = { a: 1, b: { c: 2 } };
const deep = deepCopy(original);
console.log(deep.b === original.b); // false

改进的深拷贝实现（处理循环引用）：

function deepCopyWithCircular(obj, cache = new WeakMap()) {if (obj === null || typeof obj !== 'object') {return obj;}// 检查循环引用if (cache.has(obj)) {return cache.get(obj);}let newObj;if (Array.isArray(obj)) {newObj = [];} else {newObj = {};}// 缓存当前对象cache.set(obj, newObj);// 递归复制所有属性const keys = [...Object.keys(obj), ...Object.getOwnPropertySymbols(obj)];for (let key of keys) {newObj[key] = deepCopyWithCircular(obj[key], cache);}return newObj;
}const obj = { a: 1 };
obj.b = obj; // 创建循环引用const deep = deepCopyWithCircular(obj);
console.log(deep.b === deep); // true，正确处理循环引用

使用第三方库：

Lodash 的_.cloneDeep () 方法提供了一个健壮的深拷贝实现：

const _ = require('lodash');const original = { a: 1, b: { c: 2 } };
const deep = _.cloneDeep(original);
console.log(deep.b === original.b); // false

在选择深拷贝方法时，需要根据具体需求权衡：如果对象结构简单且不包含特殊对象或循环引用，JSON.parse (JSON.stringify ()) 是最简单的选择；如果需要处理复杂对象和循环引用，建议使用手动递归实现或第三方库。

数组去重的常见方法（手写代码）

在 JavaScript 中，数组去重是一个常见需求，有多种实现方法。以下是几种典型的去重方案：

1. 使用 Set 数据结构

Set 是 ES6 引入的新数据结构，其成员值唯一，利用这一特性可以快速去重：

function unique(arr) {return [...new Set(arr)];
}// 示例
const arr = [1, 2, 2, 3, 'a', 'a'];
console.log(unique(arr)); // [1, 2, 3, 'a']

2. 使用 Map 数据结构

Map 的键具有唯一性，可用于记录元素是否已存在：

function unique(arr) {const map = new Map();return arr.filter(item => {if (!map.has(item)) {map.set(item, true);return true;}return false;});
}

3. 使用双重循环 + splice

通过嵌套循环比较元素并删除重复项：

function unique(arr) {for (let i = 0; i < arr.length; i++) {for (let j = i + 1; j < arr.length; j++) {if (arr[i] === arr[j]) {arr.splice(j, 1);j--; // 避免跳过元素}}}return arr;
}

4. 使用 indexOf/includes + 新数组

遍历原数组，利用indexOf或includes判断元素是否已存在：

function unique(arr) {const result = [];for (let i = 0; i < arr.length; i++) {if (result.indexOf(arr[i]) === -1) {result.push(arr[i]);}}return result;
}// 或使用includes
function unique(arr) {return arr.filter((item, index) => arr.indexOf(item) === index);
}

5. 排序后相邻元素比较

先对数组排序，再遍历比较相邻元素：

function unique(arr) {if (arr.length === 0) return [];arr.sort(); // 排序const result = [arr[0]];for (let i = 1; i < arr.length; i++) {if (arr[i] !== arr[i - 1]) {result.push(arr[i]);}}return result;
}

性能对比

Set 方法：代码简洁，性能最优（时间复杂度 O (n)）
双重循环：时间复杂度 O (n²)，性能最差
排序后比较：依赖排序算法，时间复杂度 O (n log n)

特殊值处理

上述方法中，Set和Map能正确处理所有原始值（包括NaN），但对于引用类型（如对象），仅比较引用而非值内容。若需深度比较对象，需自定义比较逻辑：

function unique(arr) {return arr.filter((item, index, self) => self.findIndex(t => JSON.stringify(t) === JSON.stringify(item)) === index);
}// 示例
const arr = [{a:1}, {a:1}, {b:2}];
console.log(unique(arr)); // [{a:1}, {b:2}]

数组扁平化（手写，不能使用 flat (Infinity)）

数组扁平化是将嵌套数组转换为一维数组的过程。以下是几种实现方式：

1. 递归实现

通过递归遍历数组元素，将嵌套数组展开：

function flatten(arr) {const result = [];arr.forEach(item => {if (Array.isArray(item)) {result.push(...flatten(item)); // 递归展开} else {result.push(item);}});return result;
}// 示例
const nested = [1, [2, [3, 4], 5], 6];
console.log(flatten(nested)); // [1, 2, 3, 4, 5, 6]

2. 迭代 + 栈结构

使用栈结构模拟递归过程，避免深度递归导致的栈溢出：

function flatten(arr) {const result = [];const stack = [...arr]; // 复制原数组到栈while (stack.length > 0) {const item = stack.pop(); // 取出栈顶元素if (Array.isArray(item)) {stack.push(...item); // 将嵌套数组元素压入栈} else {result.unshift(item); // 加入结果数组头部}}return result;
}

3. 字符串转换法

利用toString()或join()将数组转为字符串，再还原为数组：

function flatten(arr) {return arr.toString() // "1,2,3,4,5,6".split(',') // ["1", "2", ...].map(Number); // [1, 2, ...]
}// 或使用join
function flatten(arr) {return arr.join(',').split(',').map(Number);
}

4. 展开运算符 + 循环

通过循环和展开运算符逐层展开数组：

function flatten(arr) {let result = [...arr];let hasNested = true;while (hasNested) {hasNested = false;const temp = [];result.forEach(item => {if (Array.isArray(item)) {temp.push(...item);hasNested = true;} else {temp.push(item);}});result = temp;}return result;
}

5. reduce + 递归

结合reduce和递归简化代码：

function flatten(arr) {return arr.reduce((acc, item) => {return acc.concat(Array.isArray(item) ? flatten(item) : item);}, []);
}

处理空值和特殊类型

上述方法默认会处理所有值类型。若需保留空数组或特定类型，需调整逻辑：

function flatten(arr) {const result = [];arr.forEach(item => {if (Array.isArray(item) && item.length > 0) {result.push(...flatten(item));} else {result.push(item); // 保留空数组或其他类型}});return result;
}

forEach 和 map 方法的区别是什么？

forEach和map是数组的两个常用迭代方法，它们的主要区别在于功能和返回值：

1. 功能用途

forEach：用于遍历数组，对每个元素执行一次提供的函数，没有返回值（返回undefined）。
map：同样遍历数组，但会返回一个新数组，新数组中的元素是原数组元素经过处理后的结果。

2. 返回值

forEach：返回undefined，适合用于执行副作用（如修改原数组、打印日志等）。
map：返回新数组，不改变原数组（纯函数操作）。

示例对比

const arr = [1, 2, 3];// forEach
const forEachResult = arr.forEach(item => {console.log(item * 2);
});
console.log(forEachResult); // undefined// map
const mapResult = arr.map(item => item * 2);
console.log(mapResult); // [2, 4, 6]

3. 中断遍历

forEach：无法通过return、break或continue中断遍历，会始终处理所有元素。
map：同样无法中断，但可通过条件过滤结果：

const arr = [1, 2, 3, 4];// forEach无法中断
arr.forEach(item => {if (item === 3) return; // 仅跳过当前迭代console.log(item); // 输出1, 2, 4
});// map过滤结果
const result = arr.map(item => {if (item === 3) return null;return item * 2;
});
console.log(result); // [2, 4, null, 8]

4. 性能差异

两者的时间复杂度均为 O (n)，但map可能略慢，因为需要创建新数组。在处理大量数据时，这种差异可能更明显。

5. 链式调用

map：可链式调用其他数组方法（如filter、reduce等），适合函数式编程风格。
forEach：返回undefined，无法链式调用。

const arr = [1, 2, 3];// 链式调用示例
const result = arr.map(item => item * 2).filter(item => item > 3).reduce((acc, item) => acc + item, 0);console.log(result); // 9 (4 + 6)

6. 使用场景

forEach：
- 需要修改原数组
- 执行副作用（如 API 调用、DOM 操作）
- 不需要返回值
map：
- 转换数组元素
- 不可变数据处理
- 函数式编程风格

7. 兼容性

两者均为 ES5 方法，现代浏览器均支持。在 IE8 及以下版本中需使用 polyfill。

闭包的应用场景：实现链式加法 add (1)(2)(3)（手写）

链式加法是闭包的经典应用场景，通过闭包保留状态并返回可调用对象。以下是几种实现方式：

1. 基于函数调用的实现

function add(a) {function sum(b) {return add(a + b); // 返回新的闭包，保留当前总和}// 重写toString/valueOf方法，使函数可隐式转换为数值sum.toString = sum.valueOf = function() {return a;};return sum; // 返回闭包函数
}// 示例
console.log(add(1)(2)(3)); // 6
console.log(add(1)(2)(3) + 10); // 16

2. ES6 箭头函数简化版

const add = a => {const sum = b => add(a + b);sum.toString = sum.valueOf = () => a;return sum;
};

3. 支持无参数终止调用

上述实现依赖隐式类型转换，可改进为显式终止调用：

function add(a) {let total = a;function sum(b) {if (b === undefined) {return total; // 无参数时返回最终结果}total += b;return sum;}return sum;
}// 示例
console.log(add(1)(2)(3)()); // 6
console.log(add(5)(10)()); // 15

4. 支持多参数传递

function add(...args) {let total = args.reduce((acc, val) => acc + val, 0);function sum(...newArgs) {if (newArgs.length === 0) {return total;}total += newArgs.reduce((acc, val) => acc + val, 0);return sum;}return sum;
}// 示例
console.log(add(1, 2)(3, 4)()); // 10
console.log(add(5)(10, 15)()); // 30

闭包原理分析

每次调用add返回一个新的闭包函数sum
闭包捕获并保留当前的累加值total
通过重写toString/valueOf或显式终止函数，实现数值结果的获取

应用场景扩展

类似的链式调用模式可用于：

函数式编程中的柯里化（Currying）
构建流畅 API（Fluent API）
实现计算器、查询构建器等

var、let、const 的作用域区别及执行结果分析

var、let和const是 JavaScript 中声明变量的三种方式，它们的作用域和行为有重要区别：

1. 作用域规则

var：函数作用域或全局作用域，存在变量提升。
let/const：块级作用域（花括号{}内），存在暂时性死区（TDZ），无变量提升。

示例对比

// var的函数作用域
function testVar() {if (true) {var x = 10;}console.log(x); // 10（函数作用域内可访问）
}// let的块级作用域
function testLet() {if (true) {let y = 20;}console.log(y); // ReferenceError（块级作用域外不可访问）
}

2. 变量提升与 TDZ

var：变量声明被提升到作用域顶部，可在声明前访问（值为undefined）。
let/const：存在 TDZ，在声明前访问会抛出ReferenceError。

console.log(a); // undefined（var提升）
var a = 10;console.log(b); // ReferenceError（TDZ）
let b = 20;

3. 重复声明

var：允许在同一作用域内重复声明同一变量。
let/const：禁止在同一作用域内重复声明。

var x = 1;
var x = 2; // 合法，x被重新赋值为2let y = 1;
let y = 2; // SyntaxError（重复声明）

4. 常量特性（const）

const：声明常量，一旦赋值必须初始化，且不可重新赋值（但对象属性可修改）。
let：变量值可修改。

const PI = 3.14;
PI = 3.1415; // TypeError（常量不可重新赋值）const obj = { a: 1 };
obj.a = 2; // 合法（修改对象属性）
obj = {}; // TypeError（重新赋值）let num = 10;
num = 20; // 合法

5. 循环中的行为差异

var：在循环中使用会导致闭包共享同一变量。
let/const：每次迭代创建独立的变量副本。

// var的问题
for (var i = 0; i < 3; i++) {setTimeout(() => console.log(i), 100); // 输出3, 3, 3
}// let的正确行为
for (let j = 0; j < 3; j++) {setTimeout(() => console.log(j), 100); // 输出0, 1, 2
}

6. 全局作用域绑定

var：在全局作用域中声明的变量会成为window对象的属性。
let/const：不会成为window对象的属性。

var globalVar = 'var';
console.log(window.globalVar); // 'var'let globalLet = 'let';
console.log(window.globalLet); // undefined

执行结果分析示例

分析以下代码的执行结果：

function example() {console.log(x); // undefined（var提升）var x = 10;console.log(y); // ReferenceError（TDZ）let y = 20;if (true) {const z = 30;}console.log(z); // ReferenceError（块级作用域）for (var i = 0; i < 3; i++) {setTimeout(() => console.log('var:', i), 100); // 3, 3, 3}for (let j = 0; j < 3; j++) {setTimeout(() => console.log('let:', j), 100); // 0, 1, 2}
}example();

现代 JavaScript 最佳实践

优先使用const，除非变量需要重新赋值
使用let替代var，避免函数作用域带来的意外行为
理解 TDZ 和块级作用域，避免变量声明前使用
利用块级作用域创建独立的变量环境

promise 的执行顺序（结合箭头函数分析运行结果）

Promise的执行顺序涉及同步代码、异步回调和微任务队列的交互。箭头函数的使用会影响this指向和代码结构，进而影响Promise链的执行。以下从几个角度分析：

1. Promise的基本执行流程

Promise有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）。状态一旦改变就会永久保持。其执行遵循以下规则：

同步执行：Promise构造函数中的 executor 函数是同步执行的
异步回调：then/catch/finally 方法中的回调是异步执行的，会被放入微任务队列
链式调用：每次 then/catch 返回一个新的Promise，形成链式结构

2. 箭头函数对this的影响

箭头函数没有自己的this，它捕获定义时的上下文this值。在Promise中使用箭头函数时，需注意：

// 普通函数的this指向调用者
const obj = {num: 10,asyncMethod() {return new Promise((resolve) => {setTimeout(() => {resolve(this.num); // 这里的this指向obj}, 100);});}
};// 箭头函数的this继承自定义上下文
const arrowObj = {num: 20,asyncMethod: () => {return new Promise((resolve) => {setTimeout(() => {resolve(this.num); // 这里的this指向全局对象(如window)}, 100);});}
};obj.asyncMethod().then(console.log); // 10
arrowObj.asyncMethod().then(console.log); // undefined

3. 微任务队列的执行时机

Promise的回调属于微任务，会在当前宏任务执行结束后、下一个宏任务开始前执行。这一点在分析复杂代码时尤为重要：

console.log('start');Promise.resolve().then(() => {console.log('promise1');Promise.resolve().then(() => {console.log('promise1-1');}).then(() => {console.log('promise1-2');});}).then(() => {console.log('promise2');});setTimeout(() => {console.log('timeout');
}, 0);console.log('end');// 执行顺序：
// start -> end -> promise1 -> promise1-1 -> promise1-2 -> promise2 -> timeout

4. 错误处理与catch方法

Promise链中的错误会被最近的catch方法捕获。箭头函数简化了错误处理的写法：

fetchData().then(data => processData(data)) // 箭头函数简化参数传递.catch(err => {console.error('Error:', err);return fallbackData; // 返回新的Promise或值}).then(fallback => useFallback(fallback));

5. 结合async/await的箭头函数

async/await是Promise的语法糖，箭头函数可以作为async函数使用：

const fetchUser = async () => {try {const response = await fetch('api/user');const data = await response.json();return data;} catch (error) {console.error('Failed to fetch user:', error);throw error;}
};// 使用Promise链调用
fetchUser().then(user => console.log('User:', user)).catch(err => console.error('Error:', err));

6. Promise.all与箭头函数

处理多个并行Promise时，箭头函数使代码更简洁：

Promise.all([fetch('api/data1').then(res => res.json()),fetch('api/data2').then(res => res.json())
])
.then(([data1, data2]) => { // 解构赋值结合箭头函数console.log('Combined data:', { data1, data2 });
})
.catch(err => console.error('Failed to fetch:', err));

执行顺序总结

同步代码立即执行
Promise构造函数中的代码同步执行
then/catch中的回调放入微任务队列
当前宏任务执行完毕后，依次执行微任务队列中的所有任务
微任务队列清空后，执行下一个宏任务

理解这些规则，结合箭头函数的特性，可以准确分析Promise相关代码的执行结果。

setTimeout 异步执行与同步执行的原理

setTimeout是JavaScript中实现异步延迟执行的核心API，其原理涉及JavaScript的执行机制、事件循环和任务队列。

1. 基本语法与参数

setTimeout(callback, delay, arg1, arg2, ...);

callback：延迟后执行的回调函数
delay：延迟时间（毫秒），默认0
arg1, arg2：传递给回调函数的参数

2. 异步执行的本质

setTimeout的异步特性源于JavaScript的单线程执行模型。JavaScript在浏览器中只有一个主线程，所有代码按顺序执行。当遇到setTimeout时：

浏览器将定时器放入Web API环境中计时
主线程继续执行后续代码
当定时器时间到达，回调函数被放入任务队列
当主线程空闲时（执行栈为空），从任务队列中取出回调执行

3. 延迟时间的不确定性

指定的delay时间只是回调函数被放入任务队列的最小等待时间，而非精确执行时间。如果主线程被长时间阻塞，回调的执行会被延迟：

console.log('Start');setTimeout(() => {console.log('Timeout callback');
}, 100);// 模拟长时间阻塞
for (let i = 0; i < 1000000000; i++) {}console.log('End');// 输出顺序：Start -> End -> (一段时间后)Timeout callback

4. setTimeout(0)的作用

setTimeout(0)表示立即将回调放入任务队列，等待当前执行栈清空后执行。这常用于：

将耗时操作拆分成小块，避免UI阻塞
确保代码在当前同步代码执行完毕后执行

console.log('Before timeout');setTimeout(() => {console.log('Timeout callback');
}, 0);console.log('After timeout');// 输出顺序：Before timeout -> After timeout -> Timeout callback

5. 与Promise微任务的对比

setTimeout的回调属于宏任务，而Promise的then/catch属于微任务。微任务会在当前宏任务执行结束后立即执行，而宏任务需要等待下一轮事件循环：

console.log('Start');setTimeout(() => {console.log('Timeout');
}, 0);Promise.resolve().then(() => {console.log('Promise');
});console.log('End');// 输出顺序：Start -> End -> Promise -> Timeout

6. 同步执行的误解

虽然setTimeout通常用于异步操作，但在某些特殊情况下可能被误解为同步执行：

function syncExample() {let result = null;setTimeout(() => {result = 'Data from API';}, 100);return result; // 返回null，因为setTimeout是异步的
}console.log(syncExample()); // null

7. 实现同步延迟的错误尝试

使用死循环阻塞主线程实现"同步延迟"会导致UI冻结，是非常糟糕的实践：

// 错误示范：不要这样做
function sleep(ms) {const start = Date.now();while (Date.now() - start < ms) {}
}console.log('Before sleep');
sleep(2000); // 阻塞主线程2秒
console.log('After sleep');

8. 正确处理异步操作

现代JavaScript推荐使用Promise、async/await处理异步操作，避免回调地狱：

function fetchData() {return new Promise(resolve => {setTimeout(() => {resolve('Data from server');}, 1000);});
}// 使用async/await
async function getData() {console.log('Fetching data...');const data = await fetchData();console.log('Data received:', data);
}getData();

理解setTimeout的异步原理是掌握JavaScript异步编程的基础，它与事件循环、任务队列紧密相关，共同构成了JavaScript的非阻塞执行模型。

apply/call/bind 的区别及手写实现（用其中一个实现另一个）

apply、call和bind是JavaScript中用于改变函数this指向的三个核心方法，它们的区别和实现方式如下：

1. 基本区别

方法	立即执行	参数传递方式	返回值
call	是	逐个参数传入	函数执行结果
apply	是	数组形式传入	函数执行结果
bind	否	逐个参数传入或分次传入	绑定this的新函数

2. 使用场景对比

const person = {name: 'John',greet(message) {console.log(`${message}, ${this.name}`);}
};// call: 逐个传参
person.greet.call({ name: 'Alice' }, 'Hello'); // Hello, Alice// apply: 数组传参
person.greet.apply({ name: 'Bob' }, ['Hi']); // Hi, Bob// bind: 返回新函数
const greetAsCharlie = person.greet.bind({ name: 'Charlie' });
greetAsCharlie('Hey'); // Hey, Charlie// 分次传参
const greetWithHello = person.greet.bind({ name: 'David' }, 'Hello');
greetWithHello(); // Hello, David

3. 手写call方法

Function.prototype.myCall = function(context = window, ...args) {// this指向调用myCall的函数const fn = Symbol('fn');context[fn] = this;const result = context[fn](...args);delete context[fn];return result;
};

4. 手写apply方法

Function.prototype.myApply = function(context = window, args = []) {const fn = Symbol('fn');context[fn] = this;const result = context[fn](...args);delete context[fn];return result;
};

5. 手写bind方法

Function.prototype.myBind = function(context = window, ...args) {const self = this;return function(...newArgs) {return self.apply(context, [...args, ...newArgs]);};
};

6. 用call实现apply

Function.prototype.myApplyWithCall = function(context = window, args = []) {return this.call(context, ...args);
};

7. 用apply实现call

Function.prototype.myCallWithApply = function(context = window, ...args) {return this.apply(context, args);
};

8. 用bind实现call

Function.prototype.myCallWithBind = function(context = window, ...args) {return this.bind(context, ...args)();
};

9. 用call实现bind

Function.prototype.myBindWithCall = function(context = window, ...args) {const self = this;return function(...newArgs) {return self.call(context, ...args, ...newArgs);};
};

10. 处理构造函数绑定

原生bind方法在作为构造函数调用时会忽略绑定的this，需特殊处理：

Function.prototype.myBind = function(context = window, ...args) {const self = this;const bound = function(...newArgs) {// 如果作为构造函数调用，this应指向新创建的对象if (this instanceof bound) {return self.apply(this, [...args, ...newArgs]);}return self.apply(context, [...args, ...newArgs]);};// 继承原函数的原型bound.prototype = Object.create(self.prototype);return bound;
};

11. 性能考虑

原生方法通常比手写实现更高效，因为它们是用底层语言（如C++）实现的。在性能敏感的场景下，应优先使用原生方法。

12. 应用场景

call/apply：
- 调用对象的方法时临时改变this指向
- 实现函数复用，如借用数组方法处理类数组对象
- 调用没有参数列表展开语法时的函数
bind：
- 创建固定this的函数，用于事件处理或回调
- 实现函数柯里化（部分参数预绑定）
- 确保回调函数的this指向正确

理解这三个方法的区别和实现原理，是掌握JavaScript函数式编程和this机制的关键。

JavaScript 事件循环机制（微任务 / 宏任务）及代码题分析

JavaScript的事件循环（Event Loop）是其异步执行模型的核心，负责协调同步代码和异步代码的执行顺序。理解微任务（Microtask）和宏任务（Macrotask）的区别是分析异步代码执行结果的关键。

1. 基本概念

执行栈（Call Stack）：同步代码执行的地方
任务队列（Task Queue）：异步任务等待执行的队列
- 宏任务队列：setTimeout、setInterval、I/O、UI渲染等
- 微任务队列：Promise.then/catch/finally、MutationObserver、process.nextTick（Node.js）
事件循环：不断从任务队列中取出任务执行的机制

2. 执行流程

执行栈执行同步代码
遇到异步操作时，将回调放入相应的任务队列
同步代码执行完毕后，清空微任务队列（直到为空）
从宏任务队列取出一个任务执行
重复步骤3-4

3. 微任务与宏任务的区别

特性	微任务	宏任务
示例	Promise, MutationObserver	setTimeout, setInterval
执行时机	当前任务结束后立即执行	下一轮事件循环开始时执行
队列优先级	高于宏任务	低于微任务
清空规则	一次性清空所有微任务	每次只取一个宏任务执行

4. 代码分析示例1

console.log('1');setTimeout(() => {console.log('2');Promise.resolve().then(() => {console.log('3');});
}, 0);Promise.resolve().then(() => {console.log('4');Promise.resolve().then(() => {console.log('5');});
});console.log('6');// 执行顺序：1 -> 6 -> 4 -> 5 -> 2 -> 3

分析步骤：

打印 '1'
setTimeout放入宏任务队列
Promise.then放入微任务队列
打印 '6'
同步代码结束，清空微任务队列：打印 '4'，新的Promise.then放入微任务队列，继续清空队列打印 '5'
微任务队列清空，执行宏任务：打印 '2'，新的Promise.then放入微任务队列
再次清空微任务队列：打印 '3'

5. 代码分析示例2（async/await）

async function async1() {console.log('async1 start');await async2();console.log('async1 end');
}async function async2() {console.log('async2');
}console.log('script start');setTimeout(() => {console.log('setTimeout');
}, 0);async1();new Promise(resolve => {console.log('promise1');resolve();
}).then(() => {console.log('promise2');
});console.log('script end');// 执行顺序：
// script start -> async1 start -> async2 -> promise1 -> script end -> async1 end -> promise2 -> setTimeout

分析步骤：

打印 'script start'
setTimeout放入宏任务队列
调用async1：
- 打印 'async1 start'
- 调用async2，打印 'async2'
- await将剩余代码（console.log('async1 end')）放入微任务队列
执行Promise构造函数，打印 'promise1'，then回调放入微任务队列
打印 'script end'
同步代码结束，清空微任务队列：先执行async1的剩余代码打印 'async1 end'，再执行Promise的then回调打印 'promise2'
执行宏任务：打印 'setTimeout'

6. 代码分析示例3（嵌套Promise）

console.log('start');Promise.resolve().then(() => {console.log('promise1');const timer2 = setTimeout(() => {console.log('timer2');}, 0);}).then(() => {console.log('promise2');});const timer1 = setTimeout(() => {console.log('timer1');Promise.resolve().then(() => {console.log('promise3');});
}, 0);console.log('end');// 执行顺序：
// start -> end -> promise1 -> promise2 -> timer1 -> promise3 -> timer2

分析步骤：

打印 'start'
Promise.then放入微任务队列
setTimeout放入宏任务队列
打印 'end'
同步代码结束，清空微任务队列：打印 'promise1'，timer2放入宏任务队列；继续执行下一个then，打印 'promise2'
执行宏任务队列中的timer1：打印 'timer1'，Promise.then放入微任务队列
清空微任务队列：打印 'promise3'
执行宏任务队列中的timer2：打印 'timer2'

7. 性能优化建议

避免在微任务中执行大量计算密集型任务，以免阻塞UI渲染
合理使用宏任务和微任务，根据执行时机选择合适的API
理解事件循环机制有助于编写更高效、更可预测的异步代码

掌握事件循环机制是理解JavaScript异步编程的关键，通过不断分析和实践，可以准确预测复杂异步代码的执行顺序。

事件捕获与事件冒泡的流程，如何手动控制？

JavaScript的事件流机制描述了事件在DOM树中传播的过程，主要包括事件捕获、目标阶段和事件冒泡三个阶段。理解这一机制对于实现复杂的交互和事件处理至关重要。

1. 事件流的三个阶段

事件捕获（Capture Phase）：事件从文档根节点开始，逐级向下查找目标元素
目标阶段（Target Phase）：事件到达目标元素
事件冒泡（Bubbling Phase）：事件从目标元素开始，逐级向上传播到文档根节点

2. 事件监听的第三个参数

addEventListener方法的第三个参数决定了事件处理的阶段：

element.addEventListener('click', callback, useCapture);

useCapture为true：在捕获阶段触发回调
useCapture为false（默认）：在冒泡阶段触发回调

3. 事件捕获与冒泡的示例

考虑以下HTML结构：

预览

<div id="outer"><div id="middle"><div id="inner"></div></div>
</div>

为三个元素添加点击事件监听：

document.getElementById('outer').addEventListener('click', () => {console.log('Outer - Capture');
}, true);document.getElementById('middle').addEventListener('click', () => {console.log('Middle - Capture');
}, true);document.getElementById('inner').addEventListener('click', () => {console.log('Inner - No Capture');
});document.getElementById('middle').addEventListener('click', () => {console.log('Middle - No Capture');
});document.getElementById('outer').addEventListener('click', () => {console.log('Outer - No Capture');
});

当点击最内层的div时，输出顺序为：

Outer - Capture
Middle - Capture
Inner - No Capture
Middle - No Capture
Outer - No Capture

4. 手动控制事件传播

可以通过以下方法控制事件传播：

stopPropagation()：阻止事件继续传播（捕获或冒泡）
stopImmediatePropagation()：不仅阻止传播，还阻止当前元素上的其他同类型事件监听器执行
return false：在DOM0级事件处理函数中使用，相当于同时调用stopPropagation()和preventDefault()

5. 示例：阻止事件冒泡

document.getElementById('inner').addEventListener('click', (e) => {console.log('Inner clicked');e.stopPropagation(); // 阻止事件继续冒泡
});document.getElementById('middle').addEventListener('click', () => {console.log('Middle clicked'); // 不会触发
});

6. 示例：阻止事件捕获

document.getElementById('outer').addEventListener('click', (e) => {console.log('Outer - Capture');e.stopPropagation(); // 阻止事件继续捕获
}, true);document.getElementById('middle').addEventListener('click', () => {console.log('Middle - Capture'); // 不会触发
}, true);

7. 事件委托（Event Delegation）

利用事件冒泡原理，可以将事件监听器添加到父元素，从而处理所有子元素的事件：

预览

<ul id="list"><li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>

document.getElementById('list').addEventListener('click', (e) => {if (e.target.tagName === 'LI') {console.log('Clicked on:', e.target.textContent);}
});

8. 支持冒泡的事件与不支持的事件

大多数事件支持冒泡，如click、keydown、submit等。但也有一些事件不支持冒泡，如：

focus
blur
mouseenter
mouseleave
load
unload
abort

对于不支持冒泡的事件，可以使用捕获阶段进行事件处理。

9. 事件传播的实际应用

事件委托：减少事件监听器数量，提高性能
模态框关闭：点击模态框外部关闭模态框
表单验证：在父元素监听所有输入框的变化
实现自定义事件系统：通过事件传播实现组件间通信

10. 浏览器兼容性考虑

IE8及以下版本不支持事件捕获
使用标准的addEventListener方法替代attachEvent/detachEvent
事件对象在不同浏览器中的获取方式不同（e || window.event）

理解事件捕获和冒泡的机制，以及如何手动控制事件传播，是实现复杂交互和优化性能的关键。合理利用事件委托可以减少事件监听器数量，提高应用性能。

proxy 的原理及优点，ES5 中实现代理的方式

Proxy是ES6引入的新特性，用于创建一个对象的代理，从而可以对该对象的基本操作进行拦截和自定义。其核心原理是通过构造函数new Proxy(target, handler)创建代理对象，其中target是被代理的对象，handler是包含各种拦截方法的对象。

Proxy的拦截能力

Proxy可以拦截多种操作，包括但不限于：

get(target, prop, receiver)：拦截属性读取
set(target, prop, value, receiver)：拦截属性设置
has(target, prop)：拦截in操作符
deleteProperty(target, prop)：拦截delete操作
ownKeys(target)：拦截Object.getOwnPropertyNames等方法
apply(target, thisArg, args)：拦截函数调用（当目标是函数时）
construct(target, args, newTarget)：拦截new操作符

优点分析

全面的元编程能力：Proxy可以拦截对象的几乎所有基本操作，提供了比ES5更强大的元编程能力。例如：

const person = { name: 'John', age: 30 };
const proxy = new Proxy(person, {get(target, prop) {console.log(`Getting property "${prop}"`);return target[prop];},set(target, prop, value) {console.log(`Setting property "${prop}" to "${value}"`);target[prop] = value;return true;}
});proxy.age = 31; // 输出: Setting property "age" to "31"
console.log(proxy.name); // 输出: Getting property "name" \n John

非侵入式数据拦截：不需要修改原始对象，直接通过代理对象进行操作，符合开闭原则。
响应式系统基础：Vue 3.0使用Proxy替代Object.defineProperty实现响应式系统，解决了深度监听和数组变异方法的问题。例如：

function reactive(obj) {return new Proxy(obj, {get(target, prop) {track(target, prop); // 依赖收集return Reflect.get(target, prop);},set(target, prop, value) {const oldValue = target[prop];const result = Reflect.set(target, prop, value);if (oldValue !== value) {trigger(target, prop); // 触发更新}return result;}});
}

函数和构造函数拦截：可以拦截函数调用和构造函数调用，实现AOP（面向切面编程）等功能。

ES5中实现代理的方式

在ES5中，主要通过Object.defineProperty()方法实现对象属性的拦截，但存在明显局限性：

function defineReactive(obj, key, val) {Object.defineProperty(obj, key, {enumerable: true,configurable: true,get() {console.log(`Getting key "${key}"`);return val;},set(newVal) {console.log(`Setting key "${key}" to "${newVal}"`);val = newVal;}});
}const person = {};
defineReactive(person, 'name', 'John');
console.log(person.name); // 输出: Getting key "name" \n John
person.name = 'Mike'; // 输出: Setting key "name" to "Mike"

ES5实现的局限性

深度监听需要递归处理：Object.defineProperty只能监听对象的一层属性，深层属性需要递归处理。
无法监听数组变化：对数组的push、pop等变异方法无法自动监听，需要手动处理。
新增/删除属性无法监听：只能监听已存在的属性，新增或删除属性需要额外处理。
函数和构造函数无法拦截：Object.defineProperty只能处理对象属性，无法拦截函数调用和构造函数。

ES5与Proxy的对比

特性	Object.defineProperty	Proxy
监听方式	侵入式，需修改原对象	非侵入式，通过代理对象
深度监听	需要递归实现	自动处理深层属性
数组监听	需手动处理变异方法	自动监听数组操作
新增/删除属性	无法监听	可通过ownKeys拦截
函数/构造函数拦截	不支持	支持apply/construct
性能	较差（递归开销）	较好（原生支持）

Proxy提供了更强大、更全面的元编程能力，是ES6中推荐的对象代理方式。而ES5的Object.defineProperty由于其局限性，在现代框架中已逐渐被替代。理解两者的差异有助于在不同场景下选择合适的实现方式。

DOM1/DOM2/DOM3 事件模型的区别

DOM事件模型经历了三个主要发展阶段：DOM0级、DOM1级、DOM2级和DOM3级。每个阶段都引入了新特性和改进，以下是它们的主要区别：

DOM0级事件模型

这是最早的事件处理方式，直接将事件处理函数赋值给DOM元素的事件属性：

// HTML
<button id="btn">Click me</button>// JavaScript
const btn = document.getElementById('btn');
btn.onclick = function() {console.log('Button clicked');
};// 移除事件
btn.onclick = null;

特点

简单直接，兼容性好（所有浏览器支持）
每个事件只能绑定一个处理函数，后绑定的会覆盖前一个
事件处理函数中的this指向DOM元素本身
只支持事件冒泡，不支持事件捕获
移除事件时只需将属性设为null

DOM1级事件模型

DOM1级标准（1998年）主要关注文档结构，并未定义事件处理模型，因此DOM1级实际上没有引入新的事件机制。

DOM2级事件模型

DOM2级标准（2000年）引入了更灵活的事件处理机制，主要特点包括：

统一的事件注册方法：使用addEventListener和removeEventListener方法

const btn = document.getElementById('btn');// 添加事件监听
btn.addEventListener('click', function() {console.log('First handler');
});btn.addEventListener('click', function() {console.log('Second handler');
});// 移除事件（必须使用同一个函数引用）
const handler = function() {console.log('Third handler');
};
btn.addEventListener('click', handler);
btn.removeEventListener('click', handler);

事件流模型：支持完整的事件流（捕获阶段 → 目标阶段 → 冒泡阶段）

通过addEventListener的第三个参数控制事件处理阶段：

// 在捕获阶段处理事件
btn.addEventListener('click', function() {console.log('Capture phase');
}, true);// 在冒泡阶段处理事件（默认）
btn.addEventListener('click', function() {console.log('Bubbling phase');
}, false);

事件对象标准化：所有浏览器统一使用event对象，包含以下重要属性和方法：
- event.target：事件触发的实际元素
- event.currentTarget：当前正在处理事件的元素
- event.type：事件类型
- event.preventDefault()：阻止默认行为
- event.stopPropagation()：阻止事件传播

DOM3级事件模型

DOM3级标准（2004年）在DOM2级基础上进一步扩展，主要改进包括：

更多事件类型：新增了如keyup、keydown、DOMContentLoaded等事件类型
自定义事件：支持创建和分发自定义事件

// 创建自定义事件
const customEvent = new Event('customEvent', { bubbles: true, cancelable: true });// 分发事件
element.dispatchEvent(customEvent);// 监听自定义事件
element.addEventListener('customEvent', function(e) {console.log('Custom event fired');
});

事件属性扩展：增加了更多事件相关属性，如KeyboardEvent中的key和code属性
事件命名空间：支持事件命名空间，便于管理和移除相关事件（部分浏览器支持）

三级事件模型对比

特性	DOM0级	DOM2级	DOM3级
事件绑定方式	直接赋值	addEventListener	addEventListener
多事件处理函数	不支持	支持	支持
事件流	仅冒泡	捕获+目标+冒泡	捕获+目标+冒泡
事件类型	有限	丰富	更丰富，新增自定义事件
事件对象兼容性	差异大	标准化	进一步标准化
移除事件	设置为null	需要相同函数引用	需要相同函数引用

实际应用建议

优先使用DOM2/DOM3级事件模型，因为它们提供了更灵活的事件处理方式
对于需要兼容旧浏览器的场景，可以结合使用DOM0级和DOM2级模型
在需要细粒度控制事件传播时，利用事件捕获和冒泡机制
使用自定义事件实现组件间通信和解耦

理解DOM事件模型的发展历程和差异，有助于在实际开发中选择合适的事件处理方式，提高代码的可维护性和兼容性。

类组件与函数组件的区别（详细说明）

在React中，组件是构建UI的基本单元，主要分为类组件（Class Component）和函数组件（Function Component）两种类型。它们在语法、特性和使用场景上有显著差异。

1. 语法结构

类组件使用ES6的class关键字定义，继承自React.Component，并必须包含render方法：

class ClassComponent extends React.Component {constructor(props) {super(props);this.state = { count: 0 };}render() {return (<div><p>Count: {this.state.count}</p><button onClick={() => this.setState({ count: this.state.count + 1 })}>Increment</button></div>);}
}

函数组件是纯JavaScript函数，接收props作为参数并返回JSX：

function FunctionComponent(props) {return (<div><p>Name: {props.name}</p></div>);
}// 或使用箭头函数
const FunctionComponent = (props) => (<div><p>Name: {props.name}</p></div>
);

2. 状态管理

类组件通过this.state和this.setState管理状态：

class ClassComponent extends React.Component {state = { count: 0 };increment = () => {this.setState({ count: this.state.count + 1 });};render() {return (<button onClick={this.increment}>Count: {this.state.count}</button>);}
}

函数组件最初是无状态的，只能通过props接收数据。但引入Hooks后，可以使用useState管理状态：

const FunctionComponent = (props) => {const [count, setCount] = useState(0);const increment = () => {setCount(count + 1);};return (<button onClick={increment}>Count: {count}</button>);
};

3. 生命周期方法

类组件有完整的生命周期方法，如componentDidMount、componentDidUpdate、componentWillUnmount等：

class ClassComponent extends React.Component {componentDidMount() {console.log('Component mounted');}componentDidUpdate(prevProps, prevState) {if (prevState.count !== this.state.count) {console.log('Count updated');}}componentWillUnmount() {console.log('Component will unmount');}render() {return <div>Class Component</div>;}
}

函数组件没有生命周期方法，但可以使用useEffect Hook模拟：

const FunctionComponent = () => {// 相当于componentDidMount和componentDidUpdateuseEffect(() => {console.log('Component mounted or updated');// 相当于componentWillUnmountreturn () => {console.log('Component will unmount');};}, []); // 依赖项为空数组时，只在挂载和卸载时执行return <div>Function Component</div>;
};

4. 性能优化

类组件可以通过shouldComponentUpdate、React.PureComponent进行性能优化：

class ClassComponent extends React.PureComponent {render() {return <div>{this.props.value}</div>;}
}

函数组件可以使用React.memo进行浅比较优化：

const FunctionComponent = React.memo((props) => {return <div>{props.value}</div>;
});

5. this指向问题

类组件中，事件处理函数的this默认不绑定，需要手动绑定：

class ClassComponent extends React.Component {constructor(props) {super(props);this.handleClick = this.handleClick.bind(this);}handleClick() {console.log(this); // 指向组件实例}render() {return <button onClick={this.handleClick}>Click</button>;}
}

函数组件没有this指向问题，因为它是纯函数：

const FunctionComponent = () => {const handleClick = () => {console.log('Clicked');};return <button onClick={handleClick}>Click</button>;
};

6. 高阶组件与Render Props

类组件更常用于实现高阶组件（HOC）和Render Props模式：

// 高阶组件示例
const withLogging = (WrappedComponent) => {return class extends React.Component {componentDidMount() {console.log('Component mounted');}render() {return <WrappedComponent {...this.props} />;}};
};

函数组件通过Hooks可以更简洁地实现相同功能：

const useLogging = () => {useEffect(() => {console.log('Component mounted');}, []);
};const FunctionComponent = () => {useLogging();return <div>Component</div>;
};

7. 代码复杂度与可维护性

类组件的代码通常更冗长，包含更多样板代码（如constructor、render等）。函数组件代码更简洁，尤其是使用Hooks后，可以将相关逻辑组织在一起，提高可维护性。

8. 适用场景

类组件：
- 需要使用复杂的状态管理和生命周期方法
- 需要访问this上下文
- 实现高阶组件或Render Props模式
- 代码库中已有大量类组件，需要保持一致性
函数组件：
- 展示型组件（无状态组件）
- 使用Hooks管理状态和副作用
- 代码更简洁、更易于测试和维护
- 遵循React的函数式编程范式

9. 发展趋势

React团队推荐优先使用函数组件和Hooks，因为它们使代码更简洁、更易于测试和维护。类组件在未来不会被移除，但新功能（如Concurrent Mode）将更侧重于函数组件。

理解类组件和函数组件的区别，有助于在不同场景下选择合适的组件类型，写出更高效、更易维护的React代码。

React 类组件中 state 的特点及更新机制

在React类组件中，state是组件内部的状态管理系统，用于存储和管理组件的数据。理解state的特点和更新机制是掌握React组件开发的关键。

1. state的基本特点

私有性：state是组件私有的，只能在组件内部访问和修改
响应式：state的变化会触发组件重新渲染
不可变性：不应该直接修改state，而应使用setState方法
动态性：state可以在组件生命周期中动态更新

2. state的初始化

在类组件中，state通常在构造函数中初始化：

class Counter extends React.Component {constructor(props) {super(props);this.state = {count: 0,isLoading: false};}render() {return <div>Count: {this.state.count}</div>;}
}

也可以使用类属性语法简化初始化：

class Counter extends React.Component {state = {count: 0};render() {return <div>Count: {this.state.count}</div>;}
}

3. 使用setState更新state

setState是React提供的更新state的方法，它有两种形式：

对象形式：适用于不依赖当前state的更新

increment = () => {this.setState({ count: this.state.count + 1 });
};

函数形式：适用于依赖当前state的更新（如递增操作）

increment = () => {this.setState(prevState => ({count: prevState.count + 1}));
};

4. setState的异步特性

setState是异步的，React可能会将多次setState调用合并为一次以提高性能。因此，直接读取this.state可能会得到旧值：

// 错误示例：可能无法得到预期结果
this.setState({ count: this.state.count + 1 });
console.log(this.state.count); // 可能输出旧值// 正确做法：使用回调函数
this.setState({ count: this.state.count + 1 },() => {console.log(this.state.count); // 输出更新后的值}
);

5. 批量更新与合并策略

在同一事件处理函数中多次调用setState，React会合并这些更新：

// 合并为一次更新，只触发一次重新渲染
this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });// 最终count只增加1

使用函数形式可以避免这个问题：

// 每次调用都基于最新的state
this.setState(prevState => ({ count: prevState.count + 1 }));
this.setState(prevState => ({ count: prevState.count + 1 }));
this.setState(prevState => ({ count: prevState.count + 1 }));// 最终count增加3

6. 状态更新的合并规则

当使用对象形式的setState时，React会浅合并新的state到当前state：

this.state = {count: 0,user: { name: 'John', age: 30 }
};// 只更新count，user保持不变
this.setState({ count: 1 });// 合并user对象，name保持不变，age被更新
this.setState({ user: { age: 31 } });

7. 状态更新的生命周期

当调用setState时，React会执行以下步骤：

更新state
触发shouldComponentUpdate（如果存在）
如果shouldComponentUpdate返回true，继续执行render
生成新的虚拟DOM，与旧的虚拟DOM比较
只更新需要更新的真实DOM节点

8. 状态提升（Lifting State Up）

当多个组件需要共享状态时，React推荐将状态提升到最近的共同父组件：

class Parent extends React.Component {state = {count: 0};increment = () => {this.setState({ count: this.state.count + 1 });};render() {return (<div><ChildA count={this.state.count} /><ChildB onIncrement={this.increment} /></div>);}
}

9. 状态与不可变数据

为了确保状态更新能够被React正确检测，应该始终保持state的不可变性：

// 错误：直接修改state
this.state.items.push(newItem);// 正确：创建新数组
this.setState(prevState => ({items: [...prevState.items, newItem]
}));// 或者使用concat
this.setState(prevState => ({items: prevState.items.concat(newItem)
}));

10. 状态管理库的使用

对于复杂应用，通常会使用状态管理库如Redux或MobX。这些库提供了更可预测的状态管理方式：

// Redux示例
import { connect } from 'react-redux';class Counter extends React.Component {increment = () => {this.props.dispatch({ type: 'INCREMENT' });};render() {return <button onClick={this.increment}>{this.props.count}</button>;}
}export default connect(state => ({ count: state.count }))(Counter);

理解React类组件中state的特点和更新机制，有助于编写更可预测、更高效的React应用，避免常见的陷阱和错误。

React 函数组件的特性（Hook 相关）

React Hooks是ES6引入的新特性，用于在不编写class的情况下使用state和其他React特性。函数组件结合Hooks提供了更简洁、更灵活的组件编写方式，成为React开发的主流模式。

1. useState：状态管理

useState是最基本的Hook，用于在函数组件中添加状态：

import React, { useState } from 'react';const Counter = () => {// 声明一个名为count的状态变量，初始值为0const [count, setCount] = useState(0);return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
};

特性：

可以声明多个state变量
不会自动合并对象，需要手动合并
支持函数式更新，适用于依赖前一个状态的场景

const [state, setState] = useState({ count: 0, name: 'John' });// 更新部分状态
setState(prevState => ({...prevState,count: prevState.count + 1
}));

2. useEffect：副作用处理

useEffect用于处理组件中的副作用，如数据获取、订阅、DOM操作等：

import React, { useState, useEffect } from 'react';const DataFetcher = () => {const [data, setData] = useState(null);const [loading, setLoading] = useState(true);useEffect(() => {// 模拟API调用fetch('https://api.example.com/data').then(response => response.json()).then(data => {setData(data);setLoading(false);});// 清理函数（可选）return () => {// 取消订阅、清除定时器等操作};}, []); // 依赖项数组为空，表示只在挂载和卸载时执行return loading ? <p>Loading...</p> : <p>Data: {data}</p>;
};

特性：

相当于componentDidMount、componentDidUpdate和componentWillUnmount的组合
通过依赖项数组控制执行时机
多个useEffect可以按顺序组织相关逻辑

3. useContext：上下文共享

useContext用于在不编写嵌套组件的情况下访问React上下文：

// 创建上下文
const UserContext = React.createContext();// 父组件
const Parent = () => {const user = { name: 'John', age: 30 };return (<UserContext.Provider value={user}><Child /></UserContext.Provider>);
};// 子组件
const Child = () => {const user = useContext(UserContext);return <p>Name: {user.name}</p>;
};

4. useReducer：复杂状态管理

useReducer是useState的替代方案，适用于复杂状态逻辑：

const initialState = { count: 0 };function reducer(state, action) {switch (action.type) {case 'increment':return { count: state.count + 1 };case 'decrement':return { count: state.count - 1 };default:throw new Error();}
}const Counter = () => {const [state, dispatch] = useReducer(reducer, initialState);return (<>Count: {state.count}<button onClick={() => dispatch({ type: 'increment' })}>+</button><button onClick={() => dispatch({ type: 'decrement' })}>-</button></>);
};

5. useCallback：缓存函数引用

useCallback用于缓存函数引用，避免不必要的重新渲染：

const MyComponent = ({ items, onAdd }) => {// 只有当onAdd变化时才会重新创建const handleClick = useCallback(() => {onAdd('new item');},[onAdd]);return <button onClick={handleClick}>Add Item</button>;
};

6. useMemo：缓存计算结果

useMemo用于缓存计算结果，避免重复计算：

const MyComponent = ({ a, b }) => {// 只有当a或b变化时才会重新计算const expensiveValue = useMemo(() => {return computeExpensiveValue(a, b);}, [a, b]);return <div>Expensive Value: {expensiveValue}</div>;
};

7. useRef：访问DOM或保存值

useRef用于获取DOM节点引用或在多次渲染之间保存值：

const TextInputWithFocusButton = () => {const inputEl = useRef(null);const onButtonClick = () => {// `current` 指向已挂载到DOM上的文本输入元素inputEl.current.focus();};return (<><input ref={inputEl} type="text" /><button onClick={onButtonClick}>Focus the input</button></>);
};

8. 自定义Hook：复用状态逻辑

自定义Hook是一种特殊的函数，它可以调用其他Hook，用于复用状态逻辑：

// 自定义Hook：获取窗口宽度
const useWindowWidth = () => {const [width, setWidth] = useState(window.innerWidth);useEffect(() => {const handleResize = () => setWidth(window.innerWidth);window.addEventListener('resize', handleResize);return () => window.removeEventListener('resize', handleResize);}, []);return width;
};// 使用自定义Hook
const DisplayWidth = () => {const width = useWindowWidth();return <p>Window width: {width}</p>;
};

9. Hook使用规则

只在函数组件或自定义Hook中调用Hook
不要在循环、条件或嵌套函数中调用Hook
使用ESLint插件 enforce-hooks-rules 确保正确使用

10. 与类组件的对比优势

代码更简洁：消除了class的样板代码
状态逻辑复用：通过自定义Hook更方便地复用状态逻辑
副作用管理更清晰：useEffect按相关性组织副作用，而非生命周期方法
避免this指向问题：函数组件中没有this指向问题
更好的类型推断：更容易与TypeScript集成

React Hooks通过提供更简洁、更灵活的方式管理状态和副作用，使函数组件成为React开发的首选。掌握各种Hook的特性和使用场景，能够编写出更高效、更易维护的React代码。

React Hooks 的底层实现原理

React Hooks 的底层实现依赖于 JavaScript 的闭包和链表数据结构。每个函数组件都有一个与之关联的"记忆单元"链表，链表中的每个节点对应一个 Hook。Hooks 的调用顺序必须保持稳定，这是 React 能够正确识别和管理每个 Hook 状态的关键。

1. 链表结构与记忆单元

每个函数组件都有一个内部的"记忆链表"（memory list），链表中的每个节点存储着：

当前 Hook 的状态值（如 useState 的状态）
回调函数（如 useEffect 的回调）
依赖项数组（如 useEffect 的第二个参数）
指向下一个 Hook 的指针

当组件首次渲染时，React 会为每个 Hook 创建一个记忆单元并添加到链表中。后续渲染时，React 会按照相同的顺序遍历这个链表，恢复每个 Hook 的状态。

2. useState 的实现原理

// 简化的useState实现
let memoizedState = []; // 组件的记忆数组
let cursor = 0; // 当前Hook的指针function useState(initialState) {// 从记忆数组中获取当前状态const currentCursor = cursor;const state = memoizedState[currentCursor] !== undefined? memoizedState[currentCursor]: initialState;// 定义setState函数const setState = (newState) => {// 如果是函数式更新，则执行函数if (typeof newState === 'function') {newState = newState(state);}// 更新记忆数组中的状态memoizedState[currentCursor] = newState;// 触发组件重新渲染scheduleUpdate();};// 移动指针到下一个Hookcursor++;return [state, setState];
}

3. useEffect 的实现原理

// 简化的useEffect实现
let memoizedEffects = [];
let effectCursor = 0;function useEffect(callback, dependencies) {// 获取上一次的依赖项const lastDependencies = memoizedEffects[effectCursor];// 判断是否需要执行副作用let shouldRun = true;if (lastDependencies) {// 比较依赖项是否变化shouldRun = !dependencies.every((dep, i) => Object.is(dep, lastDependencies[i]));}// 存储当前依赖项memoizedEffects[effectCursor] = dependencies;// 计划执行副作用if (shouldRun) {scheduleCallback(() => {// 执行副作用前先清理上一次的副作用const cleanup = callback();// 存储清理函数memoizedEffects[effectCursor].cleanup = cleanup;});}// 移动指针effectCursor++;
}

4. 为什么 Hook 调用顺序很重要？

由于 Hooks 依赖于调用顺序来正确恢复状态，任何条件性的 Hook 调用都会破坏这个顺序，导致状态混乱：

// 错误示例：条件性调用Hook
if (condition) {useState(1); // 这可能导致Hook调用顺序不一致
}

React 通过 ESLint 插件 enforce-hooks-rules 强制要求 Hooks 必须在顶层调用，确保调用顺序稳定。

5. 状态持久化与闭包

每次组件渲染时，都会创建新的函数实例，但 Hooks 的状态通过闭包保持持久化：

function Counter() {const [count, setCount] = useState(0);// 每次渲染都会创建新的handleClick函数const handleClick = () => {// 但通过闭包访问的是同一个count状态setCount(count + 1);};return <button onClick={handleClick}>{count}</button>;
}

6. 与类组件的对比

类组件的状态存储在实例(this)上，而 Hooks 的状态存储在组件的记忆链表中
类组件的方法共享同一个实例状态，而 Hooks 的每个回调函数通过闭包捕获自己的状态快照
Hooks 通过链表和闭包避免了类组件的一些问题，如this指向问题和复杂的生命周期管理

理解 React Hooks 的底层实现原理，有助于正确使用 Hooks，避免常见的陷阱，如依赖项遗漏、闭包陷阱等。同时也能更好地理解为什么 Hook 有"只在顶层调用"和"只在 React 函数中调用"的规则。

useEffect 的执行原理及依赖项处理

useEffect 是 React 中用于处理副作用的核心 Hook，其执行机制和依赖项处理是理解 React 异步逻辑的关键。

1. 基本执行流程

useEffect 的执行分为三个主要阶段：

渲染阶段：组件渲染时，React 会记录 useEffect 的回调函数和依赖项
提交阶段：组件渲染完成后，React 会检查依赖项是否变化
执行阶段：如果依赖项变化或无依赖项数组，React 会执行回调函数

2. 依赖项数组的作用

依赖项数组控制 useEffect 回调的执行时机：

无依赖项数组：每次渲染后都执行
空数组：只在组件挂载和卸载时执行
有依赖项：仅当依赖项变化时执行

// 每次渲染后执行
useEffect(() => {console.log('Rendered');
});// 只在挂载和卸载时执行
useEffect(() => {console.log('Mounted');return () => {console.log('Unmounted');};
}, []);// 当count变化时执行
useEffect(() => {console.log(`Count changed to ${count}`);
}, [count]);

3. 依赖项比较算法

React 使用浅比较（Object.is）来判断依赖项是否变化：

// 简化的依赖项比较算法
function areDependenciesEqual(oldDeps, newDeps) {if (oldDeps === null || newDeps === null || oldDeps.length !== newDeps.length) {return false;}for (let i = 0; i < oldDeps.length; i++) {if (!Object.is(oldDeps[i], newDeps[i])) {return false;}}return true;
}

4. 清理函数的执行时机

useEffect 可以返回一个清理函数，用于在组件卸载或下次副作用执行前清理资源：

useEffect(() => {// 订阅事件const subscription = api.subscribe(data => {setData(data);});// 清理函数return () => {subscription.unsubscribe(); // 取消订阅};
}, []); // 只在挂载和卸载时执行

清理函数的执行时机：

组件卸载时一定会执行
如果有依赖项数组，下次副作用执行前会执行上一次的清理函数
如果没有依赖项数组，每次渲染后都会执行清理函数和新的副作用

5. 与生命周期方法的对比

useEffect	类组件生命周期方法
无依赖项数组	componentDidMount + componentDidUpdate
空依赖项数组	componentDidMount + componentWillUnmount
有依赖项数组	特定props/state变化时的componentDidUpdate
清理函数	componentWillUnmount

6. 异步操作的正确处理

直接在 useEffect 中使用异步操作会导致问题，因为异步操作的回调函数捕获的是旧的状态：

// 错误示例：异步操作捕获旧状态
useEffect(() => {const fetchData = async () => {const result = await api.getData(props.id);setData(result); // 可能使用旧的props.id};fetchData();
}, [props.id]); // 依赖项中缺少setData

正确的处理方式：

// 正确示例：使用useRef保存最新值
const latestId = useRef(props.id);useEffect(() => {latestId.current = props.id;const fetchData = async () => {const result = await api.getData(latestId.current);setData(result);};fetchData();
}, [props.id]);

7. 依赖项包含函数的处理

当依赖项包含函数时，需要确保函数引用稳定，避免不必要的重新执行：

// 使用useCallback优化
const fetchData = useCallback(async () => {const result = await api.getData(props.id);setData(result);
}, [props.id]); // 只有props.id变化时才会重新创建函数useEffect(() => {fetchData();
}, [fetchData]); // 依赖稳定的函数引用

8. 性能优化技巧

合理设置依赖项数组，避免不必要的副作用执行
使用 useMemo 和 useCallback 缓存引用类型的值
对于只需要执行一次的副作用，使用空依赖项数组
对于频繁变化的依赖项，考虑使用 useRef 或自定义 Hook 来避免重新执行

理解 useEffect 的执行原理和依赖项处理机制，有助于编写更高效、更可靠的 React 组件，避免常见的性能问题和逻辑错误。

当 useEffect 依赖项包含引用类型时，如何避免死循环？

当 useEffect 的依赖项包含引用类型（如对象、数组、函数）时，由于引用比较的特性，容易导致依赖项频繁变化，从而引发副作用的无限循环执行。以下是几种常见的解决方案：

1. 使用 useMemo 缓存对象和数组

useMemo 可以缓存计算结果，确保引用类型的值在依赖项不变的情况下保持稳定：

const [count, setCount] = useState(0);// 缓存对象，只有count变化时才会重新创建
const options = useMemo(() => ({count: count,label: `Count is ${count}`
}), [count]);useEffect(() => {console.log('Options changed:', options);// 处理options
}, [options]); // 依赖缓存的options

2. 使用 useCallback 缓存函数

useCallback 是 useMemo 的特殊版本，专门用于缓存函数：

const [data, setData] = useState([]);// 缓存fetchData函数，只有dependency变化时才会重新创建
const fetchData = useCallback(() => {fetch(`/api/data?param=${dependency}`).then(res => res.json()).then(data => setData(data));
}, [dependency]);useEffect(() => {fetchData();
}, [fetchData]); // 依赖缓存的fetchData函数

3. 将引用类型提取到组件外部

如果引用类型的值不需要依赖组件内部状态，可以将其定义在组件外部：

// 定义在组件外部，避免每次渲染时创建新对象
const STATIC_OPTIONS = {timeout: 5000,retry: 3
};function MyComponent() {useEffect(() => {fetchData(STATIC_OPTIONS);}, []); // 空依赖数组，只执行一次return <div>Component</div>;
}

4. 使用 useRef 保存引用类型

useRef 创建的对象在组件生命周期内保持不变，可以用来存储引用类型：

const [count, setCount] = useState(0);
const optionsRef = useRef({});// 更新ref.current，但不触发重新渲染
useEffect(() => {optionsRef.current = {count: count,timestamp: Date.now()};
}, [count]);useEffect(() => {// 使用ref.current访问最新的optionsconsole.log('Options:', optionsRef.current);// 处理副作用
}, []); // 只在挂载时执行，避免循环

5. 使用深比较自定义 Hook

可以创建一个自定义 Hook 来进行深比较，而不是使用浅比较：

import { useEffect, useRef } from 'react';function useDeepCompareEffect(callback, dependencies) {const currentDependenciesRef = useRef();// 如果依赖项变化，则更新refif (!isEqual(currentDependenciesRef.current, dependencies)) {currentDependenciesRef.current = dependencies;}useEffect(callback, [currentDependenciesRef.current]);
}// 使用示例
useDeepCompareEffect(() => {console.log('Deep dependencies changed');
}, [complexObject]);

6. 从依赖项中排除不必要的引用

如果某些引用类型的值在副作用中并不需要，可以从依赖项中排除：

const [data, setData] = useState([]);
const [query, setQuery] = useState('');// 虽然fetch函数依赖setData，但setData在组件生命周期内是稳定的
// 因此可以从依赖项中排除
const fetchData = () => {fetch(`/api/search?query=${query}`).then(res => res.json()).then(data => setData(data));
};useEffect(() => {fetchData();
}, [query]); // 只依赖query，不依赖fetchData或setData

7. 使用 useReducer 合并状态

useReducer 可以将多个状态合并为一个状态对象，减少依赖项数量：

const initialState = {count: 0,loading: false,data: null
};function reducer(state, action) {switch (action.type) {case 'INCREMENT':return { ...state, count: state.count + 1 };case 'FETCH_SUCCESS':return { ...state, loading: false, data: action.payload };default:return state;}
}function MyComponent() {const [state, dispatch] = useReducer(reducer, initialState);useEffect(() => {// 使用dispatch，不需要依赖任何状态dispatch({ type: 'FETCH_DATA' });}, []); // 空依赖数组
}

8. 谨慎使用空依赖数组

在某些情况下，可以使用空依赖数组来确保副作用只执行一次，但需要确保不会捕获到过时的状态：

const [count, setCount] = useState(0);
const latestCount = useRef(count);// 更新ref以保存最新的count
useEffect(() => {latestCount.current = count;
});// 只在挂载时执行，使用latestCount.current访问最新值
useEffect(() => {const interval = setInterval(() => {console.log('Current count:', latestCount.current);}, 1000);return () => clearInterval(interval);
}, []);

9. 避免在依赖项中包含匿名函数

匿名函数每次渲染都会重新创建，导致依赖项变化：

// 错误：每次渲染创建新函数
useEffect(() => {// 处理副作用
}, [() => console.log('Function')]); // 每次都是新引用// 正确：使用useCallback
const myFunction = useCallback(() => {console.log('Stable function');
}, []);useEffect(() => {myFunction();
}, [myFunction]); // 引用稳定

10. 使用 Primitive 值作为依赖项

尽量使用原始值（如字符串、数字）作为依赖项，而不是引用类型：

const [user, setUser] = useState({ id: 1, name: 'John' });// 错误：依赖整个user对象
useEffect(() => {fetchUser(user.id);
}, [user]);// 正确：只依赖需要的属性
useEffect(() => {fetchUser(user.id);
}, [user.id]);

通过合理使用这些技术，可以有效避免当 useEffect 依赖项包含引用类型时出现的死循环问题，同时确保副作用能够正确响应相关状态的变化。

对 React Hook 的理解与实际应用场景

React Hooks 是 React 16.8 引入的新特性，允许在不编写 class 的情况下使用 state 和其他 React 特性。Hooks 通过函数式的方式解决了 class 组件的一些痛点，如状态逻辑复用困难、生命周期方法复杂等问题。

1. 核心设计目标

状态逻辑复用：通过自定义 Hook 更方便地复用状态相关逻辑
简化复杂组件：将相关的副作用逻辑组织在一起，而非分散在不同的生命周期方法中
消除 class 的困惑：解决 this 指向问题、减少样板代码
更好的类型推断：更容易与 TypeScript 集成

2. 常用内置 Hook 及其应用场景

useState：管理组件内部状态

const [count, setCount] = useState(0);// 复杂状态管理
const [formData, setFormData] = useState({name: '',email: ''
});

应用场景：表单输入、计数器、切换状态等

useEffect：处理副作用

// 数据获取
useEffect(() => {fetchData().then(data => setData(data));
}, []);// 订阅事件
useEffect(() => {const subscription = api.subscribe(data => setData(data));return () => subscription.unsubscribe();
}, []);

应用场景：数据获取、DOM 操作、定时器、事件监听等

useContext：共享状态

const UserContext = createContext();// 提供上下文
<UserContext.Provider value={user}><ChildComponent />
</UserContext.Provider>// 消费上下文
const user = useContext(UserContext);

应用场景：主题切换、用户认证状态、全局配置等

useReducer：复杂状态管理

const initialState = { count: 0 };function reducer(state, action) {switch (action.type) {case 'increment':return { count: state.count + 1 };case 'decrement':return { count: state.count - 1 };default:throw new Error();}
}const [state, dispatch] = useReducer(reducer, initialState);

应用场景：多状态联动、复杂状态转换逻辑

useCallback：缓存函数引用

const memoizedCallback = useCallback(() => {doSomething(a, b);},[a, b]
);

应用场景：性能优化、防止子组件不必要的重新渲染

useMemo：缓存计算结果

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

应用场景：复杂计算、防止子组件不必要的重新渲染

useRef：访问 DOM 或保存值

const inputRef = useRef(null);// 访问DOM
<input ref={inputRef} type="text" />// 保存可变值
const previousValue = useRef(null);

应用场景：DOM 操作、保存定时器 ID、跨渲染保存值

3. 自定义 Hook 的应用场景

自定义 Hook 是复用状态逻辑的最佳方式，常见应用场景包括：

数据获取：封装 API 请求逻辑

function useFetch(url) {const [data, setData] = useState(null);const [loading, setLoading] = useState(true);const [error, setError] = useState(null);useEffect(() => {setLoading(true);fetch(url).then(res => res.json()).then(data => setData(data)).catch(error => setError(error)).finally(() => setLoading(false));}, [url]);return { data, loading, error };
}

表单处理：封装表单状态管理

function useForm(initialValues) {const [values, setValues] = useState(initialValues);const handleChange = (e) => {setValues({ ...values, [e.target.name]: e.target.value });};const handleSubmit = (e) => {e.preventDefault();onSubmit(values);};return { values, handleChange, handleSubmit };
}

事件监听：封装事件监听逻辑

function useEventListener(eventName, handler, element = window) {const savedHandler = useRef();// 保存最新的处理函数useEffect(() => {savedHandler.current = handler;}, [handler]);useEffect(() => {const eventListener = (event) => savedHandler.current(event);// 添加事件监听element.addEventListener(eventName, eventListener);// 清理函数return () => {element.removeEventListener(eventName, eventListener);};}, [eventName, element]);
}

4. Hook 的优势与挑战

优势：

代码复用性更强：通过自定义 Hook 可以更方便地复用状态逻辑
代码组织更清晰：相关的逻辑可以组织在同一个 Hook 中
减少样板代码：消除了 class 的样板代码和 this 指向问题
更好的类型支持：函数组件更容易与 TypeScript 集成
更细粒度的性能优化：通过 useCallback 和 useMemo 可以更精确地控制组件渲染

挑战：

学习曲线较陡：需要理解闭包、依赖项数组等概念
容易误用：不正确的依赖项数组可能导致无限循环或过时状态
调试难度增加：副作用的执行时机可能不如生命周期方法直观

5. 最佳实践

遵循 Hook 规则：只在顶层调用 Hook，只在 React 函数中调用 Hook
使用 ESLint 插件 enforce-hooks-rules 确保正确使用
合理拆分 Hook：将不同职责的逻辑拆分为多个小的 Hook
避免过度依赖：不是所有组件都需要 Hook，简单组件可以继续使用函数组件
测试自定义 Hook：使用 @testing-library/react-hooks 测试自定义 Hook

React Hooks 通过提供更简洁、更灵活的方式管理状态和副作用，使函数组件成为 React 开发的首选。掌握各种 Hook 的特性和应用场景，能够编写出更高效、更易维护的 React 代码。

React 重新渲染的逻辑机制

React 的重新渲染机制是理解组件性能和行为的关键。当组件的状态（state）或属性（props）发生变化时，React 会决定是否需要重新渲染组件及其子组件。

1. 基本重新渲染触发条件

React 组件会在以下情况下触发重新渲染：

组件自身的 state 发生变化（通过 setState 或 useState）
组件的 props 发生变化（父组件重新渲染时传递新的 props）
组件的 context 发生变化（使用 useContext 或 Context.Consumer）
组件调用 forceUpdate（强制重新渲染）
父组件重新渲染（无论 props 是否变化，子组件都会接收到新的 props 对象）

2. 重新渲染的执行流程

当触发重新渲染时，React 会执行以下步骤：

状态更新：调用 setState 或 useState 更新状态
调度阶段：React 将更新加入调度队列，可能会合并多个更新
渲染阶段：
- 调用组件函数（函数组件）或 render 方法（类组件）
- 生成新的虚拟 DOM 树
- 与旧的虚拟 DOM 进行比较（Diff 算法）
提交阶段：
- 根据比较结果，只更新需要变化的真实 DOM
- 执行副作用（如 useEffect）

3. 虚拟 DOM 比较（Diff 算法）

React 使用虚拟 DOM 比较算法来确定哪些部分需要更新：

树比较：React 不会跨层级比较节点，只会比较同一层级的节点
组件比较：
- 如果是同一类型的组件，保持组件实例不变，只更新 props
- 如果是不同类型的组件，销毁旧组件，创建新组件
元素比较：
- 如果是相同类型的元素（如都是<div>），保持节点不变，只更新属性
- 如果是不同类型的元素，替换整个节点

4. 性能优化技术

React 提供了多种方式来避免不必要的重新渲染：

shouldComponentUpdate（类组件）

class MyComponent extends React.PureComponent {shouldComponentUpdate(nextProps, nextState) {// 自定义比较逻辑return this.props.value !== nextProps.value;}
}

React.PureComponent（类组件）

class MyComponent extends React.PureComponent {// 自动进行浅比较
}

React.memo（函数组件）

const MyComponent = React.memo((props) => {return <div>{props.value}</div>;
});

useMemo 和 useCallback

// 缓存计算结果
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);// 缓存函数引用
const memoizedCallback = useCallback(() => {doSomething(a, b);},[a, b]
);

5. 闭包陷阱与状态捕获

由于函数组件每次渲染都会创建新的函数实例，可能会捕获过时的状态：

function Counter() {const [count, setCount] = useState(0);useEffect(() => {const id = setInterval(() => {// 每次都捕获初始的count值（0）setCount(count + 1); // 每次都设置为1}, 1000);return () => clearInterval(id);}, []);return <div>{count}</div>;
}

解决方案：

// 使用函数式更新
setCount(prevCount => prevCount + 1);// 或使用useRef保存最新值
const latestCount = useRef(count);
latestCount.current = count;// 在回调中使用latestCount.current

6. 状态管理库的影响

使用状态管理库（如 Redux、MobX）时，重新渲染机制会有所不同：

Redux：
- 组件通过 connect 或 useSelector 订阅状态
- 当状态变化时，会比较前后的 props 是否不同
- 使用 shallowEqual 进行浅比较，避免不必要的重新渲染

// 使用useSelector
const count = useSelector(state => state.count);// 自动进行浅比较

MobX：
- 使用 observer 包装组件
- 自动追踪组件使用的可观察状态
- 只有被追踪的状态变化时，组件才会重新渲染

// 使用observer
const Counter = observer(() => {const { count } = useStore();return <div>{count}</div>;
});

7. 常见误解与最佳实践

误解1：重新渲染意味着DOM更新

实际上，重新渲染只是生成新的虚拟DOM并进行比较，只有必要时才会更新真实DOM。

误解2：所有状态变化都会触发重新渲染

如果组件继承自 React.PureComponent 或使用 React.memo，React 会进行浅比较，只有当 props 或 state 发生变化时才会重新渲染。

最佳实践：

使用 React.memo 包裹纯函数组件
使用 useMemo 和 useCallback 缓存引用类型的值
避免在 render 方法中创建新的对象或函数
使用不可变数据结构，确保状态变化能被正确检测
使用 React DevTools 的 Profiler 工具分析性能瓶颈

理解 React 的重新渲染机制，有助于编写更高效的组件，避免不必要的渲染，提升应用性能。

React useState 调用后重新渲染的结果判断（代码题）

useState 的基本渲染逻辑

在 React 中，useState 是用于为函数组件添加状态的 Hook。当调用 setState 更新状态时，组件会触发重新渲染。重新渲染的结果判断需结合以下核心机制：

状态更新与渲染触发：
调用 setState 时，React 会将状态变更放入队列，异步触发组件重新渲染。即使新状态与旧状态相同（如 setCount(prevCount => prevCount)），若未做特殊处理，组件仍会执行渲染流程，但 render 阶段的实际更新会被合并或跳过（依赖于 React.memo 或 useMemo 等优化）。
函数组件的渲染特性：
函数组件每次渲染都会重新执行函数体，因此 useState 的调用需保持顺序一致性（即不能在条件语句中调用），否则会导致状态错乱。

代码示例与结果分析

示例1：基础状态更新

import React, { useState } from 'react';function Counter() {const [count, setCount] = useState(0);console.log('组件渲染');const handleClick = () => {setCount(count + 1);console.log('点击时 count:', count); // 输出点击时的旧值 0};return (<div><button onClick={handleClick}>点击</button><p>计数: {count}</p></div>);
}

结果分析：

首次渲染时，count 为初始值 0，控制台输出“组件渲染”。
点击按钮时，setCount 触发状态更新，此时 count 在点击回调中仍为旧值 0（异步更新特性）。
组件重新渲染，count 变为 1，控制台再次输出“组件渲染”。

示例2：函数式更新与依赖关系

import React, { useState, useEffect } from 'react';function Example() {const [num, setNum] = useState(1);const [obj, setObj] = useState({ value: 1 });useEffect(() => {console.log('useEffect 执行，num:', num);}, [num]);const handleNum = () => {setNum(num + 1);};const handleObj = () => {setObj({ ...obj, value: obj.value + 1 }); // 正确方式：创建新对象};const handleWrongObj = () => {obj.value += 1; // 错误方式：直接修改旧对象setObj(obj);};return (<div><button onClick={handleNum}>更新 num</button><button onClick={handleObj}>正确更新 obj</button><button onClick={handleWrongObj}>错误更新 obj</button><p>num: {num}, obj.value: {obj.value}</p></div>);
}

结果分析：

更新 num：每次点击 handleNum，num 递增，useEffect 因依赖 num 触发，组件正常重新渲染。
正确更新 obj：通过 { ...obj } 创建新对象，setObj 触发渲染，useEffect 若依赖 obj 会执行（因引用地址变更）。
错误更新 obj：直接修改旧对象时，obj 的引用地址未变，setObj(obj) 虽触发渲染，但 useEffect（若依赖 obj）不会执行，且可能导致组件内其他依赖 obj 的 useMemo/useCallback 失效。

特殊场景：状态未更新的情况

相同引用类型状态：若 setState 传入的对象/数组与旧状态引用相同（如 setObj(obj) 且未修改内容），React 会进行浅比较，可能跳过渲染（需配合 React.memo 或 useMemo）。
异步更新与批量处理：在 setTimeout 或原生事件回调中调用 setState，可能因不在 React 事务中导致同步更新，但通常 setState 仍是异步的。
条件渲染中的状态依赖：若 useState 调用被包裹在条件语句中，会导致组件卸载后重新挂载时状态丢失，需保证 useState 始终在函数顶层调用。

总结渲染结果的判断逻辑

是否触发渲染：调用 setState 且状态发生有效变更（基本类型值不同，或引用类型地址不同）时，组件会重新渲染。
渲染时机：setState 是异步的，更新后的状态在当前回调中不可见，需在下次渲染周期中获取。
性能优化：通过 React.memo、useMemo、useCallback 避免无意义的渲染，或使用 useReducer 处理复杂状态逻辑。

对 React Fiber 架构的了解程度

Fiber 架构的背景与核心目标

React Fiber 是 React 16 后引入的全新架构，其核心目标是解决传统同步渲染（Stack Reconciler）中因长任务阻塞主线程导致的界面卡顿问题。传统架构采用递归方式处理组件更新，一旦任务耗时过长（超过浏览器每帧约 16ms 的时间预算），会阻塞用户交互；而 Fiber 架构通过将渲染任务拆分为可中断的小任务，实现任务的优先级调度和暂停恢复，提升应用的响应性。

Fiber 的核心概念与数据结构

Fiber 节点：
- 每个组件实例对应一个 Fiber 节点，构成链表结构（双链表），替代了传统的调用栈。
- 节点包含组件状态、副作用（如需要更新的 DOM 操作）、优先级等信息。
- 关键属性：tag（节点类型，如函数组件/类组件/原生节点）、stateNode（组件实例或 DOM 节点）、return（父节点）、child（子节点）、sibling（兄弟节点）。
任务调度机制：
- 可中断的渲染：将渲染任务拆分为多个小单元（work unit），每个单元执行完后检查是否有更高优先级的任务（如用户输入），若有则暂停当前任务，优先处理高优先级任务。
- 优先级分类：紧急任务（如用户输入事件）、高优先级任务（动画）、中优先级任务（网络响应）、低优先级任务（非紧急数据更新），确保关键交互不被阻塞。

Fiber 架构的渲染流程

Fiber 渲染流程分为两个阶段：** reconciliation phase（协调阶段）** 和 commit phase（提交阶段）。

Reconciliation Phase（可中断）：
- 工作循环（work loop）：通过 requestIdleCallback 或 requestAnimationFrame 调度 Fiber 任务，遍历 Fiber 树，计算需要更新的组件（diff 过程）。
- 任务中断与恢复：若当前任务执行时间过长（超过 5ms），会暂停并保存当前状态（Fiber 节点的更新进度），优先处理浏览器事件，之后从断点继续执行。
- 副作用标记：在遍历过程中，为需要更新的节点标记副作用（如删除、更新、插入 DOM）。
Commit Phase（不可中断）：
- 一次性执行所有标记的副作用（DOM 更新），此时主线程会被阻塞，但因操作集中且耗时较短，用户感知不明显。
- 触发 componentDidMount/componentDidUpdate 等生命周期钩子（类组件中）。

Fiber 架构的优势

响应性提升：避免长任务阻塞，用户输入、动画等高优先级任务可优先处理，减少界面卡顿。
任务优先级调度：根据任务类型（如交互事件、数据更新）分配不同优先级，保证关键交互的流畅性。
增量渲染：大列表或复杂组件的更新可分批次处理，避免一次性渲染导致的性能瓶颈（如 React.lazy 与 Suspense 的配合使用）。

实际应用中的体现

列表渲染优化：长列表渲染时，Fiber 可暂停渲染低优先级的列表项，优先处理用户滚动事件，避免滚动卡顿（如 react-virtualized 等库的底层依赖）。
异步组件加载：通过 Suspense 配合 React.lazy，在加载异步组件时，Fiber 可先渲染已准备好的内容，待组件加载完成后再更新，提升用户体验。
错误边界处理：Fiber 架构中，组件渲染错误不会导致整个应用崩溃，而是通过 ErrorBoundary 捕获并处理，保证其他组件正常显示。

与传统架构的对比

特性	传统 Stack Reconciler	Fiber Reconciler
渲染方式	同步递归，不可中断	异步分块，可中断恢复
任务处理	无优先级，按顺序执行	按优先级调度，高优先级优先
界面响应性	长任务易卡顿	可中断，保证交互流畅性
内存占用	递归栈消耗内存较多	链表结构，内存管理更灵活

React 新特性 useDeferredValue 的作用

useDeferredValue 的设计背景

在 React 应用中，当某个状态的更新频率较高（如用户输入实时搜索），可能导致组件频繁重新渲染，影响性能。useDeferredValue 是 React 18 引入的新 Hook，其核心作用是将高优先级状态更新延迟为低优先级任务，避免因频繁更新导致的界面卡顿，同时保证用户交互的响应性。

基本用法与核心逻辑

useDeferredValue 接收两个参数：需要延迟的状态值 value 和一个配置对象 options（可选，用于设置优先级）。它会返回一个延迟处理后的状态值 deferredValue，当 value 更新时，deferredValue 不会立即更新，而是等待高优先级任务完成后再异步更新。

示例：搜索框防抖优化

import React, { useState, useDeferredValue } from 'react';function SearchComponent() {const [query, setQuery] = useState('');// 延迟处理 query，降低更新优先级const deferredQuery = useDeferredValue(query);// 当 deferredQuery 变化时，执行搜索请求（低优先级任务）// 注意：这里需配合 useMemo 或 useEffect 依赖 deferredQueryconst searchResult = useMemo(() => {if (!deferredQuery) return [];// 模拟网络请求或复杂计算return performSearch(deferredQuery);}, [deferredQuery]);const handleInput = (e) => {setQuery(e.target.value);// 此时 query 立即更新，输入框实时响应，但 searchResult 的更新会被延迟};return (<div><input type="text" value={query} onChange={handleInput} /><div>搜索结果: {searchResult.join(', ')}</div></div>);
}

逻辑说明：

用户输入时，query 立即更新，输入框实时显示内容（高优先级任务，保证交互响应）。
deferredQuery 延迟更新，等待输入暂停后再触发搜索请求（低优先级任务，避免频繁请求）。

与防抖/节流的区别

机制不同：
- 防抖（debounce）和节流（throttle）是通过函数包装控制调用频率，属于外部逻辑；
- useDeferredValue 是 React 内部的优先级调度机制，直接作用于状态更新，无需手动处理函数调用。
应用场景差异：
- 防抖适用于“用户停止操作后执行一次”（如搜索框输入完成后搜索）；
- 节流适用于“限制单位时间内执行次数”（如按钮点击防重发）；
- useDeferredValue 更适合“将状态更新拆分为高优先级（界面响应）和低优先级（数据处理）”的场景，无需关心时间间隔，仅依赖 React 的任务调度。

配置选项与优先级控制

useDeferredValue 的第二个参数 options 可配置 timeoutMs（延迟毫秒数）或 priority（优先级）：

timeoutMs：设置延迟更新的最小时间，类似防抖的等待时间。
priority：设置任务优先级，可选值为 priority.Low、priority.Medium、priority.High（需从 react 中导入）。

示例：自定义优先级

import { useDeferredValue, priority } from 'react';// 低优先级延迟，适合非紧急更新
const deferredValue = useDeferredValue(value, { priority: priority.Low });
// 自定义延迟 300ms
const deferredValue = useDeferredValue(value, { timeoutMs: 300 });

与其他 Hook 的配合使用

useMemo + useDeferredValue：
通过 useMemo 依赖 deferredValue，确保复杂计算或副作用仅在延迟更新后执行，避免频繁触发。
useEffect + useDeferredValue：
在 useEffect 中监听 deferredValue，处理网络请求等副作用，确保高优先级状态更新不阻塞网络任务。

应用场景总结

实时输入场景：搜索框、文本编辑器等，输入时界面实时响应，数据处理（搜索、拼写检查）延迟执行。
复杂列表过滤：当列表根据筛选条件动态更新时，延迟处理筛选条件，避免大量数据渲染导致的卡顿。
图表数据更新：图表根据数据实时更新时，延迟数据处理，保证视图交互流畅（如拖拽图表元素时，数据计算稍后执行）。

注意事项

useDeferredValue 不会影响状态的最终更新，仅延迟更新的时机，适用于“最终状态正确即可，中间过程可忽略”的场景。
若 value 更新过于频繁（如每秒数十次），可能导致 deferredValue 始终无法跟上 value 的变化，此时需结合防抖等外部机制优化。
该 Hook 依赖 React 18 的并发渲染特性（Concurrent Mode），需在应用中启用 ReactDOM.createRoot 或设置 concurrent: true。

组件通信的方式有哪些？

组件通信的核心场景与分类

在前端框架（如 React、Vue）中，组件通信是构建复杂应用的基础，根据组件间的层级关系和数据流向，通信方式可分为以下几类：

一、父子组件通信（Parent to Child & Child to Parent）

** props 传递（父→子）**

原理：父组件通过 props 向子组件传递数据或函数，子组件通过 props 接收并使用。

示例（React）：

// 父组件
function Parent() {const message = '来自父组件';const handleClick = () => console.log('父组件方法被调用');return <Child message={message} onButtonClick={handleClick} />;
}// 子组件
function Child({ message, onButtonClick }) {return (<div><p>{message}</p><button onClick={onButtonClick}>点击通知父组件</button></div>);
}

特点：单向数据流，清晰可控，是最常用的父子通信方式。

回调函数（子→父）
- 原理：父组件将回调函数作为 props 传给子组件，子组件在特定事件中调用该函数并传递数据。
- 示例（React）：见上方 onButtonClick 回调。

refs 引用（子→父）

原理：通过 ref 获取子组件实例，直接调用子组件方法或访问其属性。

示例（React）：

function Parent() {const childRef = useRef(null);const focusChildInput = () => {if (childRef.current) childRef.current.focusInput();};return (<div><Child ref={childRef} /><button onClick={focusChildInput}>聚焦子组件输入框</button></div>);
}function Child(props, ref) {const inputRef = useRef(null);const focusInput = () => inputRef.current.focus();return <input ref={inputRef} />;
}

注意：避免过度使用 refs，可能破坏组件封装性。

二、兄弟组件通信（Sibling to Sibling）

通过共同父组件中转

原理：兄弟组件通过父组件作为中间层，父组件维护状态并通过 props 分别传递给兄弟组件，子组件通过回调函数向父组件更新状态。

示例（React）：

function Parent() {const [count, setCount] = useState(0);const increment = () => setCount(count + 1);const decrement = () => setCount(count - 1);return (<div><CounterDisplay count={count} /><CounterButtons onIncrement={increment} onDecrement={decrement} /></div>);
}function CounterDisplay({ count }) {return <p>当前计数: {count}</p>;
}function CounterButtons({ onIncrement, onDecrement }) {return (<div><button onClick={onIncrement}>+1</button><button onClick={onDecrement}>-1</button></div>);
}

事件总线（Event Bus）

原理：通过全局事件机制，兄弟组件订阅和发布事件，实现通信。

示例（通用方案）：

// 事件总线工具
const eventBus = {events: {},on(eventName, callback) {if (!this.events[eventName]) this.events[eventName] = [];this.events[eventName].push(callback);},emit(eventName, data) {if (this.events[eventName]) {this.events[eventName].forEach(callback => callback(data));}}
};// 组件A（发布事件）
eventBus.emit('sibling-event', { message: '来自组件A' });// 组件B（订阅事件）
eventBus.on('sibling-event', (data) => {console.log(data.message); // 输出：来自组件A
});

注意：适用于轻量级场景，大型应用中可能导致事件管理混乱。

三、跨层级组件通信（跨多层级）

Context（上下文）

原理：通过 Provider 和 Consumer 建立数据传递链，避免逐层传递 props（“props 钻透”问题）。

示例（React）：

// 创建 Context
const ThemeContext = React.createContext('light');// 顶层组件提供 Context
function App() {const [theme, setTheme] = useState('light');const toggleTheme = () => setTheme(theme === 'light' ? 'dark' : 'light');return (<ThemeContext.Provider value={{ theme, toggleTheme }}><Header /><MainContent /></ThemeContext.Provider>);
}// 深层组件消费 Context
function Footer() {const { theme } = useContext(ThemeContext);return <p>当前主题: {theme}</p>;
}

特点：适合传递全局状态（如主题、用户信息），但频繁更新 Context 可能导致下层组件不必要的重新渲染。

Redux/Mobx 等状态管理库

原理：通过全局状态树管理数据，组件通过订阅状态变化获取数据，通过 actions 触发更新。

示例（Redux）：

// 定义 action
const increment = () => ({ type: 'INCREMENT' });// 定义 reducer
const counterReducer = (state = 0, action) => {switch (action.type) {case 'INCREMENT': return state + 1;default: return state;}
};// 组件中使用
function Counter() {const count = useSelector(state => state.counter);const dispatch = useDispatch();return <button onClick={() => dispatch(increment())}>{count}</button>;
}

特点：适合复杂应用的状态管理，提供标准化的数据流，但引入额外学习成本。

四、其他通信方式

全局变量/单例模式
- 原理：通过全局对象（如 window 变量）或单例类共享数据。
- 示例：
```
// 全局状态
window.appState = { count: 0 };// 组件A更新状态
window.appState.count += 1;// 组件B读取状态
console.log(window.appState.count);
```
- 注意：缺乏封装性，易导致命名冲突和状态不可控，仅适用于简单场景。

URL 地址栏（hash/query）

原理：通过 URL 的 hash 或 query string 传递数据，适用于页面间通信或组件刷新后保持状态。

示例：

// 跳转时传递参数
window.location.href = '/page?data=123';// 读取参数
const params = new URLSearchParams(window.location.search);
const data = params.get('data');

Web Storage（localStorage/sessionStorage）

原理：通过浏览器本地存储共享数据，适用于跨页面或刷新后保持状态。

示例：

// 存储数据
localStorage.setItem('userData', JSON.stringify({ name: '张三' }));// 读取数据
const userData = JSON.parse(localStorage.getItem('userData'));

通信方式选择建议

场景	推荐方式	优势	劣势
父子组件简单通信	props + 回调函数	清晰可控，符合单向数据流	多层级时需逐层传递
兄弟组件通信	父组件中转 / 事件总线	实现简单	事件总线可能导致状态混乱
跨多层级组件通信	Context / 状态管理库	避免 props 钻透，适合全局状态	频繁更新可能影响性能
跨页面或持久化存储	Web Storage / URL	数据持久化	操作异步，不适合实时通信
复杂应用状态管理	Redux/Mobx 等状态管理库	标准化数据流，便于调试	学习成本高，代码量增加