前端

服务端

计算机基础

React 函数组件和类组件是 React 中创建组件的两种不同方式。它们有几个主要区别：

1. **语法**：

   - **函数组件**：使用 JavaScript 函数（或箭头函数）定义，它接收一个 `props` 参数并返回 JSX。函数组件通常更简洁。
     ```jsx
     function Welcome(props) {
       return <h1>Hello, {props.name}</h1>;
     }
     ```
   - **类组件**：使用 ES6 类来定义，它扩展自 `React.Component`，必须包含一个 `render()` 方法，该方法返回 JSX。
     ```jsx
     class Welcome extends React.Component {
       render() {
         return <h1>Hello, {this.props.name}</h1>;
       }
     }
     ```
2. **状态管理**：

   - **函数组件**：在 React 16.8 之前，函数组件不具备状态（state）和生命周期方法。但随着 React Hooks 的引入，函数组件可以使用 `useState` 和其他 Hooks 来管理状态和生命周期。
   - **类组件**：具有内置的状态和生命周期方法。它们使用 `this.state` 和 `this.setState` 来管理组件的状态，以及一系列的生命周期函数（如 `componentDidMount`，`componentShouldUpdate` 等）来执行副作用操作。
3. **生命周期方法**：

   - **函数组件**：通过使用 React Hooks（如 `useEffect`），函数组件可以执行与类组件生命周期方法相似的操作，但它们不直接拥有生命周期方法。
   - **类组件**：具有完整的生命周期方法，可以在组件的不同阶段执行代码。
4. **`this` 关键字**：

   - **函数组件**：不使用 `this` 关键字。所有的数据（包括 props 和 state）都通过函数参数或 Hooks 访问。
   - **类组件**：需要使用 `this` 关键字来访问 props、state 和类方法。
5. **优化性能**：

   - **函数组件**：因为它们没有类实例，理论上可以更轻量。并且可以通过使用 `React.memo` 进行性能优化。
   - **类组件**：可以使用 `shouldComponentUpdate` 或 `PureComponent` 来优化性能，但这些通常比函数组件中的优化方法更复杂。
6. **钩子(Hooks)**：

   - **函数组件**：可以使用 Hooks，如 `useState`、`useEffect` 等，使得在不使用类的情况下也能拥有类似的功能。
   - **类组件**：无法使用 Hooks，必须依靠类本身的特性和生命周期。
7. **部署和维护**：

   - **函数组件**：通常来说，由于它们更加简洁，函数组件更容易编写和维护。它们也更容易分割成更小的函数。
   - **类组件**：可能会更加冗长，特别是当涉及到多个生命周期方法和状态管理时，这可能使得维护和重构变得更加困难。
8. **代码复用**：

   - **函数组件**：可以通过自定义 Hooks 实现逻辑的复用。
   - **类组件**：通常通过高阶组件（HOCs）或渲染道具（Render Props）来实现逻辑的复用。


React 函数组件和 class 组件之间的区别

React 的合成事件（SyntheticEvent）是 React 为了跨浏览器兼容性而实现的一个事件封装。合成事件的原理可以总结为以下几个关键点：

### 1. 事件封装

React 为了解决原生事件在不同浏览器中的兼容问题，实现了一套自己的事件系统。这个系统模拟原生事件系统，但是提供了一致的接口和行为。当事件发生时（如用户点击一个按钮），React 会创建一个合成事件的实例，这个实例包含了所有事件的信息，无论在哪个浏览器上。

### 2. 事件冒泡

在 React 中，所有的事件都会自动应用事件冒泡（bubbling），即事件会从触发它的最深的节点开始，逐层向上传播到最外层的节点。合成事件同样遵循这个机制，这意味着您只需要在一个高层节点上监听事件，就能处理下层节点的相应事件。

### 3. 事件委托

React 并不会将事件处理器直接绑定到真实的 DOM 元素上，而是使用了一种叫做事件委托的技术。React 在最顶层的文档节点上（通常是`document`）添加了一个单一的事件监听器，用来监听所有支持的事件类型。当一个事件发生时，React 会根据这个事件的目标和冒泡路径，来决定哪些注册的事件处理器需要被调用。

### 4. 合成事件对象池

出于性能考虑，React 实现了一个合成事件的对象池。每当一个事件发生并且事件处理器被调用时，React 从池中分配一个合成事件对象，并填充事件的相关信息。一旦事件处理器被调用，这个对象会被清空，并回收到池中以供后续的事件重复使用。这个过程减少了垃圾回收的压力和合成事件对象的创建成本。

### 5. 与原生事件的关系

尽管 React 使用了合成事件，但它仍然是基于原生事件的。当原生事件被触发时，React 的事件委托机制会处理这个事件，并创建一个合成事件传递给相应的事件处理器。开发者在编写事件处理函数时，操作的是由 React 提供的合成事件，而不是直接操作原生 DOM 事件。

### 实例

假设我们有一个按钮的点击事件，我们希望在点击时打印出事件对象：

```jsx
class MyComponent extends React.Component {
  handleClick = (event) => {
    console.log(event); // 这里的 event 是一个 SyntheticEvent 的实例
    console.log(event.nativeEvent); // 这里可以访问原生的 DOM 事件对象
  };

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}
```

这段代码中，`handleClick` 方法接收一个合成事件的实例。我们可以访问此对象的所有属性和方法，如同处理一个原生事件一样。但由于它是合成的，它在所有浏览器中的行为都是一致的。

综上所述，React 的合成事件系统提供了一种高效且一致的方式来处理浏览器间的事件差异，并优化了性能，同时简化了事件处理的复杂性。

React 的合成事件的原理是什么？

在JavaScript中实现高效的字符串前缀匹配通常可以通过以下几种方式：

### 1. 原生字符串方法
使用字符串的`startsWith()`方法，这是最简单直接的方法，性能也相当好。

```javascript
function isPrefix(str, prefix) {
    return str.startsWith(prefix);
}

// 使用示例
console.log(isPrefix('javascript', 'java')); // 输出: true
console.log(isPrefix('javascript', 'script')); // 输出: false
```

### 2. 正则表达式
利用正则表达式的`^`锚点来匹配字符串的开头。

```javascript
function isPrefix(str, prefix) {
    let regex = new RegExp('^' + escapeRegExp(prefix));
    return regex.test(str);
}

// 为了安全性，对特殊字符进行转义，防止注入攻击
function escapeRegExp(string) {
    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

// 使用示例
console.log(isPrefix('javascript', 'java')); // 输出: true
console.log(isPrefix('javascript', 'script')); // 输出: false
```

### 3. 字符串切片比较
通过截取原字符串前N个字符，然后与前缀进行比较。

```javascript
function isPrefix(str, prefix) {
    return str.slice(0, prefix.length) === prefix;
}

// 使用示例
console.log(isPrefix('javascript', 'java')); // 输出: true
console.log(isPrefix('javascript', 'script')); // 输出: false
```

### 4. 循环比较
逐个字符比较，这通常不是最高效的方法，但在某些特定情况下可能是必要的。

```javascript
function isPrefix(str, prefix) {
    if (str.length < prefix.length) return false;
    for (let i = 0; i < prefix.length; i++) {
        if (str[i] !== prefix[i]) {
            return false;
        }
    }
    return true;
}

// 使用示例
console.log(isPrefix('javascript', 'java')); // 输出: true
console.log(isPrefix('javascript', 'script')); // 输出: false
```

### 5. 使用内置方法 `indexOf`
检查前缀是否在字符串的开头位置。

```javascript
function isPrefix(str, prefix) {
    return str.indexOf(prefix) === 0;
}

// 使用示例
console.log(isPrefix('javascript', 'java')); // 输出: true
console.log(isPrefix('javascript', 'script')); // 输出: false
```

每种方法都有其适用场景，一般而言，如果只需要简单的前缀匹配，推荐使用`startsWith()`方法，因为它简单且意图明确。如果需要对匹配进行更复杂的控制，可能会选择正则表达式。在处理大量数据或性能至关重要的情况下，可以进行基准测试以确定哪种方法最有效。

javascript 如何实现高效的字符串前缀匹配

JavaScript 是一种动态类型语言，这意味着在声明变量时不需要指定数据类型，数据类型会在脚本执行时自动确定。JavaScript 的数据类型主要分为两大类：原始数据类型和对象类型。

### 原始数据类型

1. **undefined**：表示变量未定义，即声明了变量但未初始化。
2. **null**：表示一个空值。
3. **boolean**：布尔类型，有两个值：`true` 和 `false`。
4. **string**：表示文本数据，例如 `"Hello, World!"`。
5. **number**：可以是整数或浮点数，例如 `42` 或 `3.14159`。
6. **bigint**：表示大于2^53 - 1的整数。
7. **symbol**：表示唯一的、不可变的数据值。

### 对象类型

- **Object**：JavaScript 中的对象是键值对的集合，几乎所有的 JavaScript 值都是对象类型的，包括数组、函数以及其他内置对象。

### 类型检测的方法

在 JavaScript 中，检测变量的类型常用的有几种方法：

1. `typeof` 运算符：用来检测一个变量的类型，对于原始数据类型非常有效，但对于对象类型和 `null`，会有一些局限性。

```javascript
let num = 42;
console.log(typeof num); // "number"

let str = "Hello";
console.log(typeof str); // "string"

let flag = true;
console.log(typeof flag); // "boolean"

let bigIntNumber = 1234567890123456789012345678901234567890n;
console.log(typeof bigIntNumber); // "bigint"

let sym = Symbol('foo');
console.log(typeof sym); // "symbol"

let und;
console.log(typeof und); // "undefined"

let obj = { key: 'value' };
console.log(typeof obj); // "object"

let arr = [1, 2, 3];
console.log(typeof arr); // "object", 尽管它是数组

let func = function() {};
console.log(typeof func); // "function", 函数是对象的一种特殊类型

let nul = null;
console.log(typeof nul); // "object", 这是一个历史上的错误
```

2. `instanceof` 运算符：用来检测一个对象是否是另一个对象的实例。

```javascript
let arr = [1, 2, 3];
console.log(arr instanceof Array); // true
console.log(arr instanceof Object); // true

let d = new Date();
console.log(d instanceof Date); // true

// 注意，instanceof 无法检测原始数据类型
```

3. `Array.isArray()`：用来确定一个值是否是数组。

```javascript
let arr = [1, 2, 3];
console.log(Array.isArray(arr)); // true
```

4. 对象的 `constructor` 属性：可以用来判断对象的构造函数。

```javascript
let arr = [1, 2, 3];
console.log(arr.constructor === Array); // true

let obj = {};
console.log(obj.constructor === Object); // true
```

5. `Object.prototype.toString.call()`：这是一个通用的类型检测方法，可以准确判断各种类型的值。

```javascript
let d = new Date();
console.log(Object.prototype.toString.call(d)); // "[object Date]"

let num = 42;
console.log(Object.prototype.toString.call(num)); // "[object Number]"

let str = "Hello";
console.log(Object.prototype.toString.call(str)); // "[object String]"
```

注意，当使用类型检测方法时，应当根据具体情况选择最适合的方法，因为每种方法都有其适用场景和限制。

javascript 的类型以及如何检测

React 的虚拟DOM（VDOM）是React用于提升应用性能的核心概念之一。它是对真实DOM的一个轻量级抽象。虚拟DOM本质上是一个JavaScript对象，它是真实DOM结构的一个简化版本。React使用虚拟DOM来模拟真实DOM的更新，这样就可以最小化对真实DOM的操作，因为真实DOM操作的开销通常比较大。

当组件的状态变化时，React会创建一个新的虚拟DOM树并将其与上一次的虚拟DOM树进行比较。这个过程被称为Diff算法。通过Diff算法，React可以确定实际DOM需要进行的最小更新。以下是Diff算法的简要步骤：

1. **树的比较**：React首先比较两棵树的根节点，如果根节点的类型不同（例如从`<div>`变到`<span>`），React会销毁旧树并建立一棵新树。如果类型相同，则保留根节点，并继续进行递归比较。

2. **组件的比较**：如果是React组件节点，React会检查组件的类型是否相同。如果相同，组件将接收新的props并重新渲染。然后，React会比较返回的虚拟DOM。

3. **子元素的比较**：当比较两个相同类型的元素时，React会继续比较它们的子元素。React有两种不同的策略来比较子元素：
    - **同层比较**：React只比较同一层级的子元素。如果在不同层级有相同的元素，React不会尝试复用这些元素。
    - **key属性**：当开发者提供了key属性时，React会使用这个key来匹配旧的虚拟DOM树中的元素和新的虚拟DOM树中的元素。这有助于保持状态和提高性能，特别是在处理列表时。

4. **更新DOM**：一旦Diff算法确定了需要变更的最小部分，React会批量执行这些更新，尽量减少对真实DOM的操作，从而提高性能。

**例子**：

假设有一个列表，列表项组件`<ListItem />`有一个唯一的`key`属性，并且列表的状态更新导致列表项的顺序颠倒。由于每个`<ListItem />`都有唯一的`key`，React能够识别出这些组件只是顺序改变了，而不是完全不同的组件。因此，React仅会改变DOM中这些列表项的顺序，而不是销毁整个列表并重新创建，这大大提高了性能。

**总结**：

React的虚拟DOM和Diff算法共同工作，以提供高效的更新机制。虚拟DOM使得React可以在内存中进行计算，而Diff算法确保只对真实DOM做必要的、最小的修改。这种机制使得React在处理大型、动态的应用时能够保持良好的性能。

React 的 vdom 是什么？以及虚拟DOM 是如何做 diff 算法的？

### 什么是"use strict"？

`"use strict";` 是一个JavaScript中的指令，也称作严格模式（strict mode），它用于将整个脚本或单个函数置于一个更加严格的操作环境中。当在代码的开始处使用该指令时，它有助于捕获一些常见的编程错误，同时防止或抛出错误，以及在某些情况下提高编译器的优化水平。由于这些原因，它会改善代码的运行速度和效率。

### 使用它有什么优点？

1. **提前捕获错误：** 严格模式会在代码执行前就发现一些错误，这些在非严格模式下可能不会被检测到。例如，对不可写的属性赋值，或对只读属性（如`undefined`，`NaN`）赋值。

2. **避免意外的全局变量：** 在严格模式下，如果不使用`var`、`let`或`const`来声明变量，将会抛出错误，这样可以避免全局变量的隐式声明，减少代码中的潜在错误。

3. **消除`this`的混乱：** 在严格模式下，如果没有指定上下文对象，函数内的`this`值将是`undefined`，这比默认指向全局对象要安全。

4. **更安全的`eval`：** 严格模式下，`eval`函数内部声明的变量不会影响到外部作用域，这使得`eval`的使用更加安全。

5. **提高编译器优化：** 代码在执行之前可以进行更多的检查，这为JavaScript引擎的优化打下基础，可能会提高执行速度。

### 使用它有什么缺点？

1. **兼容性问题：** 在老旧的浏览器或JavaScript环境中，可能不支持严格模式，或者其行为与新版的解释器不一致。

2. **代码修改成本：** 如果要在已有项目中引入严格模式，可能需要对现有代码进行较大范围的修改，以确保兼容性和正确性。

3. **学习曲线：** 对于初学者来说，严格模式下的某些限制可能会增加学习难度，因为它们需要更好地理解JavaScript的工作原理。

4. **可能隐藏的问题：** 在非严格模式写的代码中可能含有在严格模式中会失败的部分，如果不进行彻底的测试，这些隐藏的问题在切换到严格模式后可能会导致运行时错误。

### 示例：

以下是一个简单的例子，展示了在使用严格模式时变量必须声明，否则会抛出错误：

```javascript
"use strict";

function myFunction() {
  undeclaredVariable = 123; // 这里会抛出错误，因为变量没有声明
}

myFunction();
```

如果没有`"use strict";` 指令，上面的代码中的`undeclaredVariable`会被创建为一个全局变量，这可能是一个潜在的问题。使用严格模式，我们可以避免这种情况。

什么是"use strict";？使用它有什么优缺点？​

`bind`、`call`和`apply`都是JavaScript中的函数对象的方法，它们都可以用来改变函数的`this`指向。每个方法的使用场景和方式有所不同：

### call
`call`方法可以让我们在调用一个函数的同时，指定函数内部`this`的值，也就是改变函数运行时的上下文。`call`的第一个参数是`this`要指向的对象，其余参数依次传入。

**例子**：
```javascript
function introduce(name, age) {
  console.log(`My name is ${name}, and I am ${age} years old. I work as a ${this.job}.`);
}

const person = {
  job: 'developer'
};

introduce.call(person, 'Alice', 30); // 输出：My name is Alice, and I am 30 years old. I work as a developer.
```

在以上例子中，我们使用`call`将`introduce`函数内部的`this`绑定到`person`对象，同时传入了`name`和`age`作为参数。

### apply
`apply`方法与`call`非常相似，区别在于`apply`传入参数的方式。`apply`的第一个参数同样是`this`的值，但第二个参数是一个数组，数组中包含了所有传给函数的参数。

**例子**：
```javascript
function introduce(name, age) {
  console.log(`My name is ${name}, and I am ${age} years old. I work as a ${this.job}.`);
}

const person = {
  job: 'developer'
};

introduce.apply(person, ['Alice', 30]); // 输出：My name is Alice, and I am 30 years old. I work as a developer.
```

在这个例子中，`apply`被用来将`introduce`函数的`this`绑定到`person`对象，参数以数组形式传入。

### bind
`bind`方法创建一个新的函数，可以在稍后时间里执行，它允许我们绑定`this`及初始参数。与`call`和`apply`不同，`bind`并不立即执行函数，而是返回一个改变了上下文`this`后的新函数。

**例子**：
```javascript
function introduce(name, age) {
  console.log(`My name is ${name}, and I am ${age} years old. I work as a ${this.job}.`);
}

const person = {
  job: 'developer'
};

const boundIntroduce = introduce.bind(person, 'Alice', 30);
boundIntroduce(); // 输出：My name is Alice, and I am 30 years old. I work as a developer.
```

在这里，`bind`被用来创建了一个新的`introduce`函数，该函数的`this`被永久绑定到`person`对象。

**总结**：`call`和`apply`都是立即调用函数，但是参数传递方式不同；`call`将参数按顺序传递，而`apply`则是传入参数数组。而`bind`则是返回一个新的函数，可以在以后任何时间点调用，其`this`值和参数都已经预设好了。

bind、call、apply 的区别

在优化Go代码的性能时，可以考虑以下几个方面：

1. **使用性能更好的算法和数据结构**：选择合适的算法和数据结构是提升性能的关键。例如，使用哈希表（如`map`）而不是列表（`slice`）进行查找操作，可以显著降低时间复杂度。

2. **并发执行**：Go语言的并发是其一大特色。通过`goroutine`和`channel`，可以简化并发编程，利用多核CPU优势，提高程序性能。但需注意合理设计并发，避免资源竞争和死锁。

3. **避免内存分配**：频繁的内存分配和回收会导致性能下降。可以通过复用对象、减少临时对象的创建等方式优化。使用内置的性能分析工具如`pprof`查看内存分配情况，有助于发现问题并优化。

4. **优化内存访问模式**：减少缓存未命中，可以通过减少数据结构的大小，优化数据布局，或者尽量让热点数据在内存中连续集中。

5. **编译器优化**：利用Go编译器的优化选项，例如通过设置`-gcflags "-m"`查看编译器的优化决策，或使用较新版本的Go编译器，因为每个版本的编译器都可能在优化方面有所改进。

6. **减少锁的使用**：锁会导致运行时开销和潜在的竞争条件。尽可能使用无锁编程技术，或者使用更为精细的锁，如读写锁（`sync.RWMutex`），以减少锁的竞争。

7. **使用性能分析工具**：Go提供了多种性能分析工具，如`pprof`进行CPU和内存分析，`trace`工具查看程序运行时的调度情况和垃圾回收统计等。定期进行性能分析，可以帮助识别瓶颈，有针对性地进行优化。

通过这些策略，可以有效地提升Go代码的运行效率和整体性能。

如何优化Go代码的性能？

在使用Yarn管理npm模块时，如果需要调试特定的模块，可以采取以下步骤：

1. **本地链接模块**：首先，如果对某个npm模块进行修改并想实时反映这些更改，可以在模块的目录下运行 `yarn link`。这会创建一个全局链接。然后在项目目录下运行 `yarn link [模块名]`，将这个链接关联到你的本地项目中。

2. **查看详细日志**：在运行Yarn命令时，可以加上 `--verbose` 参数，这样Yarn会打印出更详细的输出信息，帮助你了解命令背后的具体执行过程和状态。

3. **使用调试工具**：对于Node.js环境中运行的模块，可以使用Node的内置调试工具，如 `node --inspect` 或 `node --inspect-brk`，配合Chrome DevTools进行源代码的断点调试。

4. **分析依赖树**：使用 `yarn why [模块名]` 命令来分析为什么某个模块被安装，它的依赖来源，以及版本信息等。

5. **环境变量**：可以利用环境变量来控制和调试npm模块的行为。例如，设置 `NODE_ENV=development` 可以让某些模块启用开发模式，可能会输出更多的调试信息或启用额外的功能。

通过以上步骤，可以有效地调试和管理通过Yarn安装的npm模块。

Yarn 如何调试npm模块？

在处理GraphQL中的错误时，通常采用以下几种策略：

1. **使用错误字段**：在GraphQL响应中，通常包括一个`errors`字段，用来包含任何在查询过程中发生的错误。务必确保每个错误都包括足够的信息，例如错误类型、错误消息和可能的错误位置。

2. **定义错误类型**：创建自定义错误类型来更准确地描述遇到的具体问题。例如，可以定义`AuthenticationError`、`ValidationError`等，这有助于客户端更好地理解错误并作出相应处理。

3. **错误处理策略**：在服务器端实现错误处理逻辑，如使用try/catch块捕获异常，并将它们转换为GraphQL错误。这样可以在逻辑层面统一错误处理方式，便于维护和调试。

4. **使用错误日志**：记录错误日志对于后续的错误分析和监控非常重要。确保记录关键信息，如错误发生的时间、错误类型、相关的用户和请求数据等。

5. **客户端错误处理**：在客户端也应实现错误处理逻辑，如根据错误类型显示不同的错误消息或执行不同的操作。这样可以提升用户体验，让用户明白发生了什么问题，以及可能的解决方案。

6. **避免敏感信息泄露**：在设计错误信息时，需注意不要暴露敏感信息，如数据库细节或系统架构，这可能会带来安全风险。

通过上述方法，可以有效地管理和处理GraphQL中的错误，同时提高系统的健壮性和用户的体验。

面试题手册

React 函数组件和 class 组件之间的区别

React 的合成事件的原理是什么？

javascript 如何实现高效的字符串前缀匹配

javascript 的类型以及如何检测

React 的 vdom 是什么？以及虚拟DOM 是如何做 diff 算法的？

什么是"use strict";？使用它有什么优缺点？

bind、call、apply 的区别

如何优化Go代码的性能？

Yarn 如何调试npm模块？

如何处理GraphQL中的错误？

面试题手册

React 函数组件和 class 组件之间的区别

React 的合成事件的原理是什么？

javascript 如何实现高效的字符串前缀匹配

javascript 的类型以及如何检测

React 的 vdom 是什么？以及虚拟DOM 是如何做 diff 算法的？

什么是"use strict";？使用它有什么优缺点？​

bind、call、apply 的区别

如何优化Go代码的性能？

Yarn 如何调试npm模块？

如何处理GraphQL中的错误？

什么是"use strict";？使用它有什么优缺点？