环境

• NX
• PNPM
• lodash-es
• Jest

从 karma 转移到 Jest 遇到了如下报错

主要原因是 “node_modules” 文件夹中 ESM（ECMAScript Modules） 库不被 Jest 支持。

鉴于 Jest ESM 支持还在几乎不可用的试验阶段，而目前我主要是在公司项目上迁移到 Jest。所以本文主要采用 transformIgnorePatterns 和 moduleNameMapper 两种配置来解决这个问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Test suite failed to runJest encountered an unexpected tokenJest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.By default "node_modules" folder is ignored by transformers.Here's what you can do:    • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.    • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript    • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.    • If you need a custom transformation specify a "transform" option in your config.    • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.You'll find more details and examples of these config options in the docs:https://jestjs.io/docs/configurationFor information about custom transformations, see:https://jestjs.io/docs/code-transformation

以下配置主要以 lodash-es 作为参考。

transformIgnorePatterns

官方文档的解释是：正则表达式模式字符串的数组，在转换之前与所有源文件路径匹配。如果文件路径与任何模式匹配，则不会对其进行转换。
即 transformIgnorePatterns 用于指定在进行代码转换时应该忽略的文件或文件夹。

而在 NX 默认的 Jest 配置中，配置为 node_modules/(?!.*\\.mjs$)。
这个正则表达式的含义是，匹配以 node_modules/ 开头的文件夹路径，但排除那些以 .mjs 为扩展名的文件夹路径。?! 是一个否定预查，表示不匹配这样的文件夹路径。

1

transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],

以上配置意思就是将会把以 .mjs 为扩展名的文件从 ESM 转换为 CommonJS，以支持 Jest。

添加转换 lodash-es

顺便支持一下 PNPM

1
2
3
4
5
6
7

const esModules = ['.*\\.mjs$', 'lodash-es'].join('|');export default {    ...    transformIgnorePatterns: [`node_modules/(?!.pnpm|${esModules})`],    ...}

转换后 failed 数量从 15 减少到 11，但是这么做会有一个转换的过程会有额外的支出，需要 51s。不过第一次转换完后貌似就会缓存然后就不用转换了。

支出更少的方法 moduleNameMapper

这种方法需要库本身有对应的 CommonJS，就不需要转换了。可以跑到 12s

1
2
3
4
5
6
7

export default {    ...    moduleNameMapper: {        '^lodash-es$': 'lodash',    },  ...}

最终配置参考如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/* eslint-disable */const esModules = ['.*\\.mjs$'].join('|');export default {  displayName: 'pc',  preset: '../../jest.preset.js',  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],  coverageDirectory: '../../coverage/apps/pc',  moduleNameMapper: {    '^lodash-es$': 'lodash',  },  transform: {    '^.+\\.(ts|mjs|js|html)$': [      'jest-preset-angular',      {        tsconfig: '<rootDir>/tsconfig.spec.json',        stringifyContentPathRegex: '\\.(html|svg)$',      },    ],  },  transformIgnorePatterns: [`node_modules/(?!.pnpm|${esModules})`],  snapshotSerializers: [    'jest-preset-angular/build/serializers/no-ng-attributes',    'jest-preset-angular/build/serializers/ng-snapshot',    'jest-preset-angular/build/serializers/html-comment',  ],};

参考

1. Jest setup "SyntaxError: Unexpected token export"
2. Configuring Jest · Jest
3. ECMAScript Modules · Jest
4. Configuring Jest · Jest

Promise 是 JavaScript 中的一个重要概念，与前端的工作更是息息相关。因此本文将整理一下 Promise 在日常工作中的应用。

目录

• 概念
• async/await
  • await
  • 错误处理
• Promise 串联
  • 常规处理方法
  • 串联自动化
• Promise 并发
  • 控制批次
  • 简易版并发控制
  • 动态任务队列
  • 第三方库
• 总结

概念

从 MDN | 使用 Promise 中我们能学习到 Promise 的基础使用与错误处理、组合等概念，可以将 Promise 的特点概括为:

• Promise 对象有三种状态，且状态一旦改变就不会再变。其值记录在内部属性 [[PromiseState]] 中：
  • pending: 进行中
  • fulfilled: 已成功
  • rejected: 已失败
• 主要用于异步计算，并且可以将异步操作队列化 (链式调用)，按照期望的顺序执行，返回符合预期的结果。
• 可以在对象之间传递和操作 Promise，帮助我们处理队列
• 链式调用的写法更简洁，可以避免回调地狱

在现实工作中，当我们使用 Promise 时更多是对请求的管理，由于不同请求或任务的异步性。因此我们会根据不同的使用场景处理 Promise 的调度。

async/await

async/await 是基于 Promise 的一种语法糖，使得异步代码的编写和理解更加像同步代码。

当一个函数前通过 async 关键字声明，那这个函数的返回值一定会返回一个 Promise，即便函数返回的值与 Promise 无关，也会隐式包装为 Promise 对象:

1
2
3
4
5
6

async function getAge() {
  return 18;
}

getAge().then(age => console.log(`age: ${age}`))
// age: 18

await

await 操作符通常和 async 是配套使用的，它会等待 Promise 并拆开 Promise 包装直接取到里面的值。当它处于 await 状态时，Promise 还处于 ``，后续的代码将不会被执行，因此看起来像是 “同步” 的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function delayResolve(x, timeout = 2000) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(x);
    }, timeout);
  });
}

async function main() {
  const x = await delayResolve(2, 2000);
  console.log(x);

  const y = await delayResolve(1, 1000);
  console.log(y);
}

main();
// 2
// 1

错误处理

async/await 的错误处理通过是通过 try..catch 来捕获错误。当然，我们也会根据实际业务的需求来 catch 我们真正需要处理的问题。

1
2
3
4
5
6
7
8
9

try {
   const response = await axios.get('https://example.com/user');

   // 处理响应数据
   console.log('User data fetched:', response.data);
 } catch (error) {
   console.error('Error response:', error.response);
   // 做其他错误处理
 }

学习了前文的基础概念后，我们可以更近一步的探讨 Promise 的使用。

Promise 串联

Promise 串联一般是指多个 Promise 操作按顺序执行，其中每个操作的开始通常依赖于前一个操作的完成。这种串行执行的一个典型场景是在第一个异步操作完成后，其结果被用作第二个异步操作的输入，依此类推。

考虑以下场景：加载系统时，需要优先读取用户数据，同时需要用户的数据去读取用户的订单的信息，再需要两者信息生成用户报告。因此这是一个存在前后依赖的场景。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function fetchUserInfo(userId) {
  return axios.get(`/api/users/${userId}`);
}

function fetchUserOrders(userId) {
  return axios.get(`/api/orders/${userId}`);
}

function generateReport(userInfo, orders) {
  // 根据用户信息和订单生成报告
  return {
    userName: userInfo.name,
    totalOrders: orders.length,
    // ...其他报告数据
  };
}

常规处理方法

处理串联请求无非有两种方法：

方法 1: 链式调用 .then()

在这种方法中，我们利用 .then() 的链式调用来处理每个异步任务。这种方式的优点是每个步骤都明确且连贯，但可能导致所谓的“回调地狱”，尤其是在处理多个串联的异步操作时。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

const userId = '12345'; // 假设已知的用户ID

fetchUserInfo(userId)
  .then(response => {
    const userInfo = response.data;
    return fetchUserOrders(userInfo.id); // 使用用户ID获取订单
  })
  .then(response => {
    const orders = response.data;
    return generateReport(userInfo, orders); // 生成报告
  })
  .then(report => {
    console.log('用户报告:', report);
  })
  .catch(error => {
    console.error('在处理请求时发生错误:', error);
  });

方法 2: 使用 async/await

async/await 提供了一种更加直观、类似同步的方式来处理异步操作。它使代码更易于阅读和维护，特别是在处理复杂的异步逻辑时。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

async function getUserReport(userId) {
  try {
    const userInfoResponse = await fetchUserInfo(userId);
    const userInfo = userInfoResponse.data;

    const userOrdersResponse = await fetchUserOrders(userInfo.id);
    const orders = userOrdersResponse.data;

    const report = generateReport(userInfo, orders);
    console.log('用户报告:', report);
  } catch (error) {
    console.error('在处理请求时发生错误:', error);
  }
}

const userId = '12345'; // 假设已知的用户ID
getUserReport(userId);

在这个示例中，使用 async/await 使得代码的逻辑更加清晰和直观，减少了代码的嵌套深度，使错误处理变得简单。

串联自动化

以上是日常工作中最常见的需求.但这里我们还可以发散一下思维，考虑更复杂的情况：

现在有一个数组，数组内有 10 个或更多的异步函数，每个函数都依赖前一个异步函数的返回值需要做处理。在这种请求多了的特殊情况下我们手动维护会显得很冗余，因此可以通过循环来简化逻辑：

方法 1: 通过数组方法 reduce 组合

1
2
3
4
5
6
7
8
9
10
11

const processFunctions = [processStep1, processStep2, processStep3, ...];

processFunctions.reduce((previousPromise, currentFunction) => {
  return previousPromise.then(result => currentFunction(result));
}, Promise.resolve(initialValue))
.then(finalResult => {
  console.log('最终结果:', finalResult);
})
.catch(error => {
  console.error('处理过程中发生错误:', error);
});

方法 2: 循环体和 async/await 的结合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

async function handleSequentialTasks(tasks, initialResult) {
  let result = initialResult;

  try {
    for (const task of tasks) {
      result = await task(result);
    }
    console.log('最终结果:', result);
  } catch (error) {
    console.error('处理过程中发生错误:', error);
  }
}

const tasks = [task1, task2, task3, ...];
handleSequentialTasks(tasks, initialValue);

Promise 并发

并发（Concurrency）在编程中是指多个任务在同一时间段内启动、执行，但不一定同时完成。在 JavaScript 的 Promise 中，并发通常涉及同时开始多个异步操作，并根据它们何时解决（fulfilled）或被拒绝（rejected）来进行相应的处理。

Promise 的并发会比串联的场景更复杂。Promise 对象提供了几个静态方法来处理并发情况，让开发者可以根据不同的使用场景选择合适的方法：

Promise.all(iterable)

Promise.all 静态方法接受一个 Promise 可迭代对象作为输入，当传入的数组中每个都被 resolve 后返回一个 Promise。若任意一个 Promise 被 reject 后就 reject。

1
2
3
4
5
6
7
8
9
10
11

const promise1 = fetch('https://example.com/api/data1');
const promise2 = fetch('https://example.com/api/data2');

Promise.all([promise1, promise2])
  .then(([data1, data2]) => {
    console.log('所有数据已加载:', data1, data2);
  })
  .catch(error => {
    console.error('加载数据时发生错误:', error);
  });

Promise.allSettled(iterable)

Promise.allSettled 方法同样接受一个 Promise 的可迭代对象。不同于 Promise.all，这个方法等待所有传入的 Promise 都被解决（无论是 fulfilled 或 rejected），然后返回一个 Promise，它解决为一个数组，每个数组元素代表对应的 Promise 的结果。这使得无论成功还是失败，你都可以得到每个 Promise 的结果。

1
2
3
4
5
6
7
8
9
10
11
12
13

Promise.allSettled([
  Promise.resolve(33),
  new Promise((resolve) => setTimeout(() => resolve(66), 0)),
  99,
  Promise.reject(new Error("an error")),
]).then((values) => console.log(values));

// [
//   { status: 'fulfilled', value: 33 },
//   { status: 'fulfilled', value: 66 },
//   { status: 'fulfilled', value: 99 },
//   { status: 'rejected', reason: Error: an error }
// ]

Promise.race(iterable)

Promise.race 方法接受一个 Promise 的可迭代对象，但与 Promise.all 和 Promise.allSettled 不同，它不等待所有的 Promise 都被解决。相反，Promise.race 返回一个 Promise，它解决或被拒绝取决于传入的迭代对象中哪个 Promise 最先解决或被拒绝。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

function sleep(time, value, state) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (state === "fulfill") {
        return resolve(value);
      } else {
        return reject(new Error(value));
      }
    }, time);
  });
}

const p1 = sleep(500, "one", "fulfill");
const p2 = sleep(100, "two", "fulfill");

Promise.race([p1, p2]).then((value) => {
  console.log(value); // "two"
  // Both fulfill, but p2 is faster
});

const p3 = sleep(100, "three", "fulfill");
const p4 = sleep(500, "four", "reject");

Promise.race([p3, p4]).then(
  (value) => {
    console.log(value); // "three"
    // p3 is faster, so it fulfills
  },
  (error) => {
    // Not called
  },
);

const p5 = sleep(500, "five", "fulfill");
const p6 = sleep(100, "six", "reject");

Promise.race([p5, p6]).then(
  (value) => {
    // Not called
  },
  (error) => {
    console.error(error.message); // "six"
    // p6 is faster, so it rejects
  },
);

Promise.any(iterable)

Promise.any 接受一个 Promise 的可迭代对象，并返回一个 Promise。它解决为迭代对象中第一个被解决的 Promise 的结果。如果所有的 Promise 都被拒绝，Promise.any 会返回一个 AggregateError 实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, "one");
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(reject, 100, "two");
});

Promise.race([promise1, promise2])
  .then((value) => {
    console.log("succeeded with value:", value);
  })
  .catch((reason) => {
    // Only promise1 is fulfilled, but promise2 is faster
    console.error("failed with reason:", reason);
  });
// failed with reason: two

控制批次

JavaScript 默认提供的并发处理函数很方便我们根据业务场景的不同来处理请求，但显然我们工作中所遇到的需求得考虑更复杂的情况，还需要进一步的封装和扩展我们的 API。

在服务器端编程，我们经常遇到需要批量处理数据的场景。例如，批量修改数据库中的用户数据。在这种情况下，由于数据库操作的性能限制或者 API 调用限制，我们不能直接一口气修改全部，因为短时间内发出太多的请求数据库也会处理不来导致应用性能下降。因此，我们需要一种方法来限制同时进行的操作任务数，以保证程序的效率和稳定性。

我们代入实际业务场景：假设有一个社区组织了一次大型户外活动，活动吸引了大量参与者进行在线报名和付费。由于突发情况（比如恶劣天气或其他不可抗力因素），活动不得不取消。这时，组织者需要对所有已付费的参与者进行退款。

活动组织者发起「解散活动」后，服务端接收到请求后当然也不能一次性全部执行退款的操作啦，毕竟一场活动说不定有上千人。因此我们需要分批次去处理。

在上述社区活动退款的例子中，服务器端处理退款请求的一个有效方法是实施分批次并发控制。这种方法不仅保护了后端服务免受过载，还确保了整个退款过程的可管理性和可靠性。

分批次处理时有以下关键问题需要考虑：

1. 批次大小：确定每个批次中处理的退款请求数量。这个数字应基于服务器的处理能力和支付网关的限制来确定。
2. 批次间隔：设置每个批次之间的时间间隔。这有助于避免短时间内发出过多请求，从而减轻对数据库和支付网关的压力。
3. 错误处理：在处理退款请求时，应妥善处理可能发生的错误，并确保能够重新尝试失败的退款操作。

简易版并发控制

将所有待处理的异步任务（如退款请求）存放在一个 tasks 数组中，在调用并发请求前将 tasks 数组分割成多个小批次，每个批次包含固定数量的请求。每当前一个批次处理完后，才处理下一个批次的请求，直到所有批次的请求都被处理完毕：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

// 假设这些是返回 Promise 的函数
const tasks = [task1, task2, task3, ...];

// 分割任务数组为批次
function splitIntoBatches(tasks, batchSize) {
  let batches = [];
  for (let i = 0; i < tasks.length; i += batchSize) {
    batches.push(tasks.slice(i, i + batchSize));
  }
  return batches;
}

// 处理单个批次的函数
function processBatch(batch) {
  return Promise.all(batch.map(task => task()));
}

// 控制并发的主函数
async function processTasksInBatches(tasks, batchSize) {
  const batches = splitIntoBatches(tasks, batchSize);

  for (const batch of batches) {
    await processBatch(batch);
    // 可以在这里加入日志记录或其他处理
    console.log('一个批次处理完毕');
  }

  console.log('所有批次处理完毕');
}

// 调用主函数，假设每批次处理 10 个任务
processTasksInBatches(tasks, 10);

这种写法实现的并发简单易懂，也易于维护，在一些并发压力不大，比较简单的业务场景来看是足够了。

但如果我们将这种处理方式放在时序图上进行分析，就能发现服务器可能有能力处理更多的并发任务，而这种方法可能没有充分利用可用资源。每个批次开始前会依赖于上一个批次中请求响应时间最慢的那一个，因此我们还可以进一步考虑优化并发实现方案。

动态任务队列

在之前的 “控制批次” 方法中，我们发现固定处理批次的局限性，尤其是在并发任务数量较大时可能导致的资源利用不足。为了解决这个问题，我们可以考虑采用一种更灵活的方法：维护一个动态的任务队列来处理异步请求：

• 任务队列：创建一个任务队列，其中包含所有待处理的异步任务。
• 动态出队和入队：当队列中的任务完成时，它会被移出队列，同时根据当前的系统负载和任务处理能力，从待处理任务列表中拉取新的任务进入队列。
• 并发数控制：设置一个最大并发数，确保任何时候处理中的任务数量不会超过这个限制。

我们封装一个函数，提供 concurrency 参数作为并发限制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

function parallelLimit(tasks, {concurrency = 10}) {
  const results = [];
  const executing = new Set();

  let currentlyRunning = 0;
  let currentIndex = 0;

  return new Promise((resolve) => {
    const next = () => {
      if (currentIndex < tasks.length) {
        // 取出记录数，准备执行
        const index = currentIndex;
        const task = tasks[index];

        currentIndex += 1
        currentlyRunning += 1;

        const resultPromise = task().then((result) => {
          // 任务执行完毕，更新运行数、保存结果
          currentlyRunning -= 1;
          results[index] = result;
          executing.delete(resultPromise);

          // 开启下一个任务
          next();
        });

        executing.add(resultPromise);

        // 当前运行的任务数小于限制并且还有任务未开始时，继续添加任务
        if (currentlyRunning < concurrency && currentIndex < tasks.length) {
          next();
        }
      } else if (currentlyRunning === 0) {
        // 所有任务都已完成
        resolve(results);
      }
    };

    // 初始化
    for (let i = 0; i < Math.min(concurrency, tasks.length); i += 1) {
      next();
    }
  });
}

该函数会在初始阶段会按照并发数先同步执行指定任务数，若某个任务执行完毕后，在执行完毕的回调中会唤醒下一个任务，直至任务队列执行完毕。

以下添加一些测试数据用于测试：

1
2
3
4
5
6
7
8
9
10
11
12
13

function asyncTask(id) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(`任务 ${id} 完成`);
      resolve(`结果 ${id}`);
    }, Math.random() * 2000);
  });
}
const taskArray = Array.from({ length: 10 }, (_, i) => () => asyncTask(i + 1));

parallelLimit(taskArray, {concurrency: 3}).then((results) => {
  console.log('所有任务完成:', results);
});

第三方库

在实际的项目开发中，特别是面临复杂的并发处理需求时，我们更多会考虑使用成熟的第三库来处理业务问题，它们具备更完善的测试用例来检验边界情况。

处理并发的热门库有 RxJS、p-map 和 async.js。

• RxJS 是一个以响应式编程为核心的库，竟然搭配 Angular 在网页端搭配使用，提供了丰富的操作符和方法来处理异步事件和数据流。
• p-map 和 async.js 包的体积更小，更适合在服务端中使用。p-map 专注于提供并发控制功能，而 async.js 提供包括并发控制、队列管理等广泛的异步处理模式，功能会更全。

笔者在 Node.js 环境下只需要处理并发问题，故用的 p-map 会更多一些。下面简要介绍 p-map 的使用：

1
2
3
4
5
6
7
8
9

import pMap from 'p-map';

const list = Array.from({ length: 10 }, (_, i) => i)

pMap(list, asyncTask, { concurrency: 3 })
  .then((results) => {
    console.log('所有任务完成:', results);
  });

p-map 的源码实现很精简，建议想深入复习并发的同学去阅读其底层代码的实现作为参考思路。

总结

在本文中，我们首先回顾了 Promise 的基本概念及其在 JavaScript 异步编程中的常用方法。通过这个基础，我们能够更好地理解如何有效地处理和组织异步代码。

随后，我们深入到并发处理的实际应用场景，探讨了如何根据具体需求选择合适的并发实现策略。我们讨论了从简单的批次控制到更复杂的动态任务队列的不同方法，展示了在不同场景下优化异步任务处理的多种可能性。

但值得注意的是，我们自行实现的并发控制工具在没有做足测试用例测试时，可能不适合直接应用于生产环境。在实际的项目开发中，选择成熟且持续维护的第三方库往往是更安全和高效的选择。比如笔者选择的 p-map 稳定性和可靠性相比上文简单实现的版本将会更好。

参考资料

• MDN | async 函数
• GitHub | p-map

在开发复杂的单页面应用时，我们经常会遇到一个问题：如何高效地在组件或模块之间进行通信？这里，EventBus（事件总线）就派上了用场。简单来说，EventBus 是一种设计模式，它允许不同组件或模块之间通过事件来通信，而无需直接引用彼此。

EventBus 是传统的组件通信解决方案，下面我们将讲解 EventBus 跨组件通信的原理、实现方式以及该如何使用。

原理解析

EventBus 的核心在于提供一个中央机制，允许不同的组件或模块相互通信，而不必直接引用对方。它是一种典型的发布-订阅（pub-sub）模式，这是一种广泛使用的设计模式，用于解耦发送者和接收者。

在这个模式中，EventBus 充当了一个中介的角色：它允许组件订阅那些它们感兴趣的事件，并在这些事件发生时接收通知。同样，当某个事件发生时，比如用户的一个动作或者数据的变化，EventBus 负责将这一消息广播给所有订阅了该事件的组件。

它基于三个核心操作：注册事件（on(event, callback)）、触发事件（emit(event, ...args)）、以及移除事件（off(event, callback)）。因此，EventBus 的基本代码可以看到：

1
2
3
4
5
6
7
8
9
10
11
12
13

class EventBus {
  on(event, callback) {
    // 注册事件监听器
  }

  emit(event, ...args) {
    // 触发事件
  }

  off(event, callback) {
    // 移除事件监听器
  }
}

显然，我们需要有一个私有变量来储存用户的函数，此时为类添加 events 属性。events 属性是一个对象映射，其中每个属性表示一个事件名称，对应的值是一个回调函数的数组，这个数组存储了所有订阅了该事件的回调函数。

1
2
3
4

class EventBus {
  private events: Record<string, Function[]> = {};
  // ...
}

当用户执行订阅事件 on 时，回调函数会被添加到相应事件名称的数组中。这样，同一个事件可以被不同组件或模块订阅，而每个订阅者的回调函数都会被正确地保存在事件队列中。最后，当触发事件 emit 时，事件队列中的每个回调函数都会被执行，实现了事件的触发和通知功能。若已经没有订阅需求，则可以通过 off 移除已经订阅的事件。

代码实现

接下来我们按照前文所述完善我们的代码实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

class EventBus {
  // 事件存储对象，用于保存不同事件的回调函数
  private events: Record<string, Function[]> = {};

  /**
   * 注册事件监听器
   * @param eventName - 事件名称
   * @param callback - 回调函数，当事件触发时执行
   * @returns this - 返回 EventBus 实例，支持链式调用
   */
  public on(eventName: string, callback: Function): this {
    // 检查回调函数是否为函数类型
    if (typeof callback !== "function") {
      throw new Error("EventBus 'on' method expects a callback function.");
    }

    // 如果事件不存在，创建一个空数组用于存储回调函数
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }

    // 将回调函数添加到事件的回调函数列表中
    this.events[eventName].push(callback);

    // 支持链式调用
    return this;
  }

  /**
   * 触发事件
   * @param eventName - 要触发的事件名称
   * @param args - 传递给回调函数的参数
   * @returns this - 返回 EventBus 实例，支持链式调用
   */
  public emit(eventName: string, ...args: any[]): this {
    // 获取事件对应的回调函数列表
    const callbacks = this.events[eventName];
    if (callbacks) {
      // 遍历执行每个回调函数，并传递参数
      callbacks.forEach((callback) => callback(...args));
    }

    // 支持链式调用
    return this;
  }

  /**
   * 移除事件监听器
   * @param event - 要移除的事件名称或事件名称数组
   * @param callback - 要移除的回调函数（可选）
   * @returns this - 返回 EventBus 实例，支持链式调用
   */
  public off(event?: string | string[], callback?: Function): this {
    // 清空所有事件监听器
    if (!event || (Array.isArray(event) && !event.length)) {
      this.events = {};
      return this;
    }

    // 处理事件数组
    if (Array.isArray(event)) {
      event.forEach((e) => this.off(e, callback));
      return this;
    }

    // 如果没有提供回调函数，则删除该事件的所有监听器
    if (!callback) {
      delete this.events[event];
      return this;
    }

    // 移除特定的回调函数
    const callbacks = this.events[event];
    if (callbacks) {
      const index = callbacks.indexOf(callback);
      if (index > -1) {
        callbacks.splice(index, 1);
      }
    }

    // 支持链式调用
    return this;
  }
}

当涉及到一次性的事件监听需求时，我们可以进一步扩展 EventBus，以支持一次性事件监听。允许用户在某个事件触发后，自动移除事件监听器，以确保回调函数只执行一次：

1
2
3
4
5
6
7
8
9
10
11
12
13

class EventBus {
  // other code ...
  public once(eventName: string, callback: Function): this {
    const onceWrapper = (...args: any[]) => {
      this.off(eventName, onceWrapper);
      callback(...args);
    };

    this.on(eventName, onceWrapper);

    return this;
  }
}

使用方式

我们将类的封装到 event-bus.ts 中，通过模块的来管理：

1
2
3

export class EventBus {
  // ...
}

我们现在已经封装好了一个类，若我们像使用则需要实例化。此处再文件内直接实例化一个类：

1
2

// 创建 EventBus 实例并导出
export const eventBus = new EventBus();

这样使用时可以提供两种方式：

1. 引入已经实例化的 eventBus

   1 2 3 4 5 6 7 8 9 10

   import { eventBus } from './event-bus'; // 订阅事件 eventBus.on('eventName', callback); // 触发事件 eventBus.emit('eventName', data); // 移除事件 eventBus.off('eventName', callback);

2. 需要多个独立的事件总线实例时，或者希望在不同模块或组件之间使用不同的事件总线时，可以选择额外实例化 eventBus。这样做的目的可能是为了隔离命名的冲突、组件与模块逻辑隔离等原因。

   1 2 3 4 5 6

   // events.ts import { EventBus } from './event-bus'; // 创建独立的事件总线实例 export const eventBusA = new EventBus(); export const eventBusB = new EventBus();

   1 2 3 4 5 6 7 8 9

   import {eventBusA, eventBusB} from './events' // 在不同模块或组件中使用不同的事件总线 eventBusA.on('eventA', callbackA); eventBusB.on('eventB', callbackB); // 触发不同事件总线上的事件 eventBusA.emit('eventA', dataA); eventBusB.emit('eventB', dataB);

以下是 CodeSandbox 的演示代码：

总结

在本文中，我们深入探讨了 EventBus 的原理，了解了它是如何工作的。我们学习了它的核心操作。除了本文所提及的实现方式，有时候在生产项目中，为了确保代码的可靠性，我们可以考虑使用成熟的第三方库，例如 mitt 或 tiny-emitter。

这些库已经经过广泛的测试和使用，可以提供稳定和可靠的 EventBus 功能。

Redux 是一个强大的状态管理框架，被广泛用于管理应用程序的状态。它的设计理念是让状态的更新可预测和透明。本文将简要探讨 Redux 的核心机制和实际应用。

在 Redux 中，有一个状态对象负责应用程序的整个状态.Redux store 是应用程序状态的唯一真实来源。

如果应用程序想要更新状态，只能通过 Redux store 执行，单向数据流可以更轻松地对应用程序中的状态进行监测管理。

Redux store 是一个保存和管理应用程序状态的 state，使用 Redux 对象中的 createStore() 来创建一个 redux store，此方法将 reducer 函数作为必需参数.

1
2
3

const reducer = (state = 5) => state;

const store = Redux.createStore(reducer);

获取数据

Redux store 对象提供了几种允许你与之交互的方法，可以使用 getState() 方法检索 Redux store 对象中保存的当前的 state。

1
2
3
4
5
6

const store = Redux.createStore(
  (state = 5) => state
);

// 更改此行下方的代码
const currentState = store.getState();

更新状态

由于 Redux 是一个状态管理框架，因此更新状态是其核心任务之一。在 Redux 中，所有状态更新都由 dispatch action 触发，action 只是一个 JavaScript 对象，其中包含有关已发生的 action 事件的信息。

Redux store 接收这些 action 对象，然后更新相应的状态。action 对象中必须要带有 type 属性，reducer 才能根据 type 进行区分处理。
action 除了 type 属性外，还可以附带数据给 reducer 做相应的处理，这个数据是可选的。

我们可以将 Redux action 视为信使，将有关应用程序中发生的事件信息提供给 Redux store，然后 store 根据发生的 action 进行状态的更新。

reducer

reducer 将 state 和 action 作为参数，并且它总是返回一个新的 state。这是 reducer 的唯一的作用，它不应有任何其他的作用。比如它不应调用 API 接口，也不应存在任何潜在的副作用。reducer 只是一个接受状态和动作，然后返回新状态的纯函数。

在 reducer 中一般通过 switch 进行判断 action 的类型，做不同的处理。

订阅事件

store.subscribe() 可以订阅 store 的数据变化，它接收一个回调函数作为参数。当 store 数据更新时会调用该回调函数。

模块划分

当应用程序的状态开始变得越来越复杂时，将状态划分为多个部分可能是个更好的选择。我们可以考虑将不同的模块进行划分，Login 作为一个模块，Account 作为另一个模块。

但对 state 进行模块划分也不能破坏 redux 中将数据存入简单 state 的原则。因此可以生成多个 reducer, 再将它们合并到 root reducer 中。

redux 提供了 combineReducers() 函数对 reducer 进行合并。它接收一个对象作为参数，对象中的 key/value 别分对应着 module name 和相对应的 reducer 函数。

1
2
3
4
5
6
7

const rootReducer = Redux.combineReducers({
  counter: counterReducer,
  auth: authReducer
})

const store = Redux.createStore(rootReducer);

异步

redux 本身是不能直接处理异步操作，因此需要引入中间件来处理这些问题。在 createStore 时，还可以传入第二个可选参数，这个参数就是传递给 redux 的中间件函数。

Redux 提供了 applyMiddleware() 来创建一个中间件，一般处理 redux 异步的中间件有 redux-thunk、redux-saga 等。

redux-thunk

redux-thunk 允许 action 创建函数返回一个函数而不是一个 action 对象。这个返回的函数接收 dispatch 和 getState 作为参数，允许直接进行异步操作和状态的分发。

例如，一个异步获取数据的 thunk 可能如下所示：

1
2
3
4
5
6
7
8
9

function fetchData() {
  return (dispatch, getState) => {
    // 异步操作
    fetch('some-api-url')
      .then(response => response.json())
      .then(data => dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data }))
      .catch(error => dispatch({ type: 'FETCH_DATA_ERROR', error }));
  };
}

redux-saga

redux-saga 是一个更高级的中间件，它使用 ES6 的 Generator 函数来让你以同步的方式写异步代码。saga 监听发起的 action，并决定基于这些 action 执行哪些副作用（如异步获取数据、访问浏览器缓存等）。

一个简单的 saga 可能如下所示：

1
2
3
4
5
6
7
8

function* fetchDataSaga(action) {
  try {
    const data = yield call(fetch, 'some-api-url');
    yield put({ type: 'FETCH_DATA_SUCCESS', payload: data });
  } catch (error) {
    yield put({ type: 'FETCH_DATA_ERROR', error });
  }
}

React 与 Redux

在 React 应用中，Redux 被用来跨组件共享状态。使用 react-redux 库可以方便地将 Redux 集成到 React 应用中。

Provider 组件

Provider 是 react-redux 提供的一个组件，它使 Redux store 对 React 应用中的所有组件可用。通常，我们在应用的最顶层包裹 Provider 并传入 store：

1
2
3
4
5
6
7
8

import { Provider } from 'react-redux';
import { store } from './store';

const App = () => (
  <Provider store={store}>
    <MyRootComponent />
  </Provider>
);

connect 函数

connect 是一个高阶函数，用于将 React 组件连接到 Redux store。它接受两个参数：mapStateToProps 和 mapDispatchToProps，分别用于从 store 中读取状态和向 store 发起 actions。

1
2
3
4
5
6
7
8
9
10
11

import { connect } from 'react-redux';

const mapStateToProps = state => ({
  items: state.items
});

const mapDispatchToProps = dispatch => ({
  fetchData: () => dispatch(fetchData())
});

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

总结

Redux 提供了一种统一、可预测的方式来管理应用程序的状态。通过使用 actions, reducers 和 store，开发者可以以一种高度解耦的方式来管理状态和 UI。

当结合异步处理和 React 集成时，Redux 成为了一个强大的工具，能够提升大型应用程序的开发和维护效率。

二叉树数据结构的学习与笔记。

目录

• 二叉树的储存结构
• 顺序结构转链式结构
• 二叉树的遍历
  • 前序序遍历
  • 中序遍历
  • 后序遍历
  • 层序遍历
• 合并二叉树
• 二叉排序树 (BST)
  • 高度平衡二叉搜索树
  • 判断指定树是否是平衡树

二叉树的储存结构

二叉树有两种储存方式，一种是顺序储存结构，一种是链式储存结构。

顺序储存结构就是二叉树从上至下，每层从左到右给树中节点进行编号:

1

[0,1,2,3,4,5,6]

0 是根节点，1 是根的左节点，2 是根的右节点，3 是根的左节点的左节点，4 是根的左节点的右节点…… 依照这个顺序排列下去。设 i 为顺序表中节点的索引, Qi 代表顺序表上储存的节点, n 为顺序表的长度，则可知:

1. i = 0，Qi 节点是根节点
2. 若 2i+1 < n, 则索引 2i+1 上储存的是 Qi 的左节点。反之，则没有节点。
3. 若 2i+2 < n, 则索引 2i+2 上储存的是 Qi 的右节点。反之，则没有节点。
4. **Qi 的双亲节点的索引为 (i-1)/2**。比如 i=4, (i-1)/2 向下取整等于 1, 索引为 4 的双亲节点为 1。

链式储存的结构大致如下:

1
2
3
4
5
6
7
8
9
10

class TreeNode {
    val: number
    left: TreeNode | null
    right: TreeNode | null
    constructor(val?: number, left?: TreeNode | null, right?: TreeNode | null) {
        this.val = (val===undefined ? 0 : val)
        this.left = (left===undefined ? null : left)
        this.right = (right===undefined ? null : right)
    }
}

顺序结构转链式结构

利用二叉树的性质，可以将顺序储存方式转换为对应的链式结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

class TreeNode {
  constructor(val, left, right) {
    this.val = (val === undefined ? 0 : val)
    this.left = (left === undefined ? null : left)
    this.right = (right === undefined ? null : right)
  }
}

function toLinkedListBinaryTree(list) {
  // 临时用于储存被转换为链表的节点
  const nodelist = [];

  for (let i = 0; i < list.length; i++) {
    const node = new TreeNode(list[i]);
    nodelist.push(node);

    // 根节点没有双亲节点
    if (i > 0) {
      // 由结论 4 可得双亲节点的索引
      const parentIdx = Math.floor((i - 1) / 2);
      const parent = nodelist[parentIdx];

      // 当前层从左向右赋值，若左节点被赋值，则剩下右节点没有被赋值
      if (parent.left) {
        parent.right = node;
      } else {
        parent.left = node;
      }
    }

  }

  return nodelist.shift()
}

// 在 console 进行测试
cnsole.log(toLinkedListBinaryTree([0,1,2,3,4,5,6,7,8,9]));

二叉树的遍历

遍历二叉树是指沿着某条搜索路径周游二叉树，依次对树中的每个节点访问且仅访问一次。

二叉树的遍历方式可以分为递归和非递归方式。遍历算法也可以分为**深度优先搜索 (Depth-First-Search，DFS)和广度优先搜索 (Breadth-First Search)**。

根据二叉树的递归定义，遍历一颗非空二叉树的问题可分为三个子问题: 访问根节点 (D)，遍历左子树 (L)，遍历右子树 (R)。遍历的顺序可分为: DLR (前序)、LDR (中序)、LRD (后序) 和 DRL (前序)、RDL (中序)、RLD (后序)。前三种是先左后右，后三种是先右后左。一般没有提别指明的话，我们谈论二叉树的遍历，都是在讲前三种。

二叉树的前序遍历、中序遍历、后序遍历都可以通过递归方式和非递归方式实现。

前序序遍历

递归形式:

1
2
3
4
5
6
7
8
9
10
11
12
13

function preorderTraversal(root: TreeNode | null): number[] {
    return postorder(root, [])
};

function postorder(root?: TreeNode, result = []): number[] {
    if (!root) return result;

    result.push(root.val);
    postorder(root.left, result);
    postorder(root.right, result);

    return result;
}

中序遍历

递归形式:

1
2
3
4
5
6
7
8
9
10
11
12
13

function inorderTraversal(root: TreeNode | null): number[] {
    return inorder(root, [])
};

function inorder(root?: TreeNode, result = []): number[] {
    if (!root) return result;

    inorder(root.left, result);
    result.push(root.val);
    inorder(root.right, result);

    return result;
}

后序遍历

递归形式:

1
2
3
4
5
6
7
8
9
10
11
12
13

function postorderTraversal(root: TreeNode | null): number[] {
    return postorder(root, [])
};

function postorder(root?: TreeNode, result = []): number[] {
    if (!root) return result;

    postorder(root.left, result);
    postorder(root.right, result);
    result.push(root.val);

    return result;
}

层序遍历

层序遍历就是把二叉树分层，然后每一层从左到右遍历：

层序遍历二叉树很自然就能想到使用 BFS(广度优先搜索) 来遍历每层。

该算法采用一个队列来缓存二叉树的节点，若树不为空，先将二叉树根节点输出，先将根节点入队，再到循环体内出队。若根节点还有左孩子，则将左孩子也添加到队列中。若有右孩子，也将右孩子也添加到队列中。如此下去，直到队列为空:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 按层输出二叉树的值
function levelOrder(root: TreeNode | null) {
  if (!root) return;

  // 队列，先进先出
  const queue = [root];

  while (queue.length) {
    // 取队首的元素
    const node = queue.shift();
    console.log('node --> ', node.val)

    // 若有左右节点，则添加至队列
    if (node.left) queue.push(node.left);
    if (node.right) queue.push(node.right);
  }
};

若想将每一层的值都存入数组中，则可以采用二维数组进行储存:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

function levelOrder(root: TreeNode | null): number[][] {
  if (!root) return [];

  // 最终会返回的结果
  const result = [];
  
  // 队列，先进先出
  const queue = [root];

  while (queue.length) {
    // 当前层级
    const level = [];

    // 当前队列的长度
    const n = queue.length;

    for (let i = 0; i < n; i += 1) {
      const node = queue.shift();
      level.push(node.val);

      // 若有左右节点，则添加至队列
      // 由于已经储存上一轮的节点数，因此这里不会影响 n 的值
      if (node.left) queue.push(node.left);
      if (node.right) queue.push(node.right);
    }

    result.push(level);
  }

  return result;
};

合并二叉树

不考虑副作用的话，可以直接将 root1 作为结果，修改 root1 的值即可。

1
2
3
4
5
6
7
8
9

function mergeTrees(root1?: TreeNode, root2?: TreeNode): TreeNode | null {
    if (!root1 || !root2) return root1 || root2;

    root1.val += root2.val;
    root1.left = mergeTrees(root1.left, root2.left);
    root1.right = mergeTrees(root1.right, root2.right);

    return root1;
};

二叉排序树 (BST)

二叉排序树(Binary Sort Tree)又称二叉查找树，它是一种特殊的二叉树，它或为空树，或具有以下性质的二叉树:

1. 它的右子树非空，则右子树上所有节点的值都大于根节点的值。
2. 它的左子树非空，则左子树上所有节点的值都小于根节点的值。
3. 左右子树各是一颗二叉排序树。

以下为创建二叉排序树的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

function sortedArrayToBST(nums: number[]): TreeNode | null {
    let tree = null, node;

    while(nums.length) {
        node = new TreeNode(nums.shift())
        tree = insertBST(tree, node)
    }

    return tree;
};

function insertBST(tree: TreeNode, node: TreeNode) {
    let parent, p = tree;

    while(p) {
        // parent 指向 p 的双亲
        parent = p;
    
        // 要插入的节点的值小于 p 的值，赋值为左节点
        // 要插入的节点的值大于 p 的值，赋值为右节点
        p  = node.val < p.val ? p.left : p.right;
    }

    if (tree == null) return node;
    
    // console.log('p',parent.val, node.val)
    if(node.val < parent.val) {
        parent.left = node;
    } else {
        parent.right = node;
    }

    return tree;
}

高度平衡二叉搜索树

高度平衡二叉树是一棵满足「每个节点的左右两个子树的高度差的绝对值不超过 1」的二叉树。

Q: 给定已按升序排序的整数数组，将其构建为二叉树。

A: 因为数组已经排过序了，因此可以直接采用二分法进行构建。先去中间的元素，再向两侧递归构建:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function sortedArrayToBST(nums: number[]): TreeNode | null {
    return dfs(nums, 0, nums.length - 1)
};

function dfs(nums: number[], min: number, max: number): TreeNode | null {
    if (min > max) return null;

   // 取中间的索引，先减后加的方式可以避免索引值溢出
    const mid = min + Math.floor((max - min) / 2);

    // 由于是采用二分法，因此左右子树的高度差不会超过 1
    const root = new TreeNode(
        nums[mid],
        dfs(nums, min, mid - 1),
        dfs(nums, mid + 1, max)
    );

    return root;
}

判断指定树是否是平衡树

可以采用自底向上进行遍历，该遍历方法类似于后序遍历:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function isBalanced(root: TreeNode | null): boolean {
    return height(root) !== -1;
};

function height(root?: TreeNode) {
    if (!root) return 0;
    
    const left = height(root.left);
    if (left == -1) return -1;

    const right = height(root.right);
    if (right == -1) return -1;

    // 高度差超过 1
    if (Math.abs(left - right) > 1) return -1;

    // 当前层 + 1
    return Math.max(left, right) + 1;
}

• 时间复杂度：O(n)O(n)，其中 nn 是二叉树中的节点个数。使用自底向上的递归，每个节点的计算高度和判断是否平衡都只需要处理一次，最坏情况下需要遍历二叉树中的所有节点，因此时间复杂度是 O(n)O(n)。
• 空间复杂度：O(n)O(n)，其中 nn 是二叉树中的节点个数。空间复杂度主要取决于递归调用的层数，递归调用的层数不会超过 nn。

最近遇到了个按需请求数据的需求，非常适合用于讲解闭包与链式设计的例子，故来分享一下思路。

大致需求如下: 目前有个 list, list 中每项 item 都是可展开的折叠项。当展开某个折叠项时，需要根据 item 的 code 另外去取 name 的映射。考虑到列表的数据量非常大，且一次性查询过多 code 时，接口的查询效率会明显降低，故采用按需请求映射的方案。

屏蔽与本例无关的属性，瘦身后的 list 数据结构大致如下:

1
2
3
4
5
6

interface DataType {
  code: string;
  paymentTransaction: string[];
}

type ListType = DataType[];

我们知道大型企业中的数据会比较复杂，比较常见的一种情况是数据中有一个 id 或 code 是用于跟另一个数据项相关联的。学习过数据库的同学很容易就联想到了外键这个概念。

现在我们就要取出这些 code 发送给服务端去查询。考虑到 code 可能会有重复，因此可以将 codes 存入 Set 中，利用 Set 的特性去重。除此之外，为了使 name 映射可以被复用，每次从接口返回的 name 映射将会被缓存起来。若下次再触发事件时有对应的 key，便不再查询。

我们可以将这段逻辑抽离出来作为一个依赖收集的函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const mapping = new Map();

function collectionCodes(initCodes?: string[] | Set<string>) {
  const codes = new Set<string>(initCodes)

  return {
    append(code: string) {
      if (!mapping.has(code)) {
        codes.add(code);
      }

      return this;
    },
    empty() {
      return !codes.size;
    },
    value() {
      return codes;
    },
  }
}

collectionCodes 函数是用于收集 codes。它内部利用了闭包的特性将 codes 缓存了起来，并且在添加新的 code 之前会判断 code 在 local 的映射中是否已经存在。append 返回的 this 是经典的链式调用设计，允许多次链式添加。当本次依赖收集结束后，调用 value 方法获取最终的 codes。

可以写一些简单的 mock 数据进行尝试:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

function handleNameMapping(data: DataType) {
  const codes = collectionCodes()
    .append(data.code)
    .append('code-append-1')
    .append('code-append-1')
    .append('code-append-2');

  data.paymentTransaction.forEach(code => codes.append(code));

  if (codes.empty()) {
    console.log('can get values from existing mapping.')
    return;
  }

  // 如果请求的数据需要转为数组，可以 Array.from 进行转换
  const list = Array.from(codes.value());
  console.log('fetch data before, codes --> ', list);

  // mock 获取数据后拿到 name mapping 后，存入 mapping 中的行为.
  // 注意，Set 类型也可以用 forEach 方法，不一定得转为数组才可以操作
  list.forEach(code => mapping.set(code, `random-name-${Math.random()}`))
}

const mockItemData = {
  code: 'code-main',
  paymentTransaction: [
    'code-payment-4',
    'code-payment-1',
    'code-payment-2',
    'code-payment-1',
    'code-payment-3',
  ]
}

handleNameMapping(mockItemData);
// fetch data before, codes -->  (7) ["code-main", "code-append-1", "code-append-2", "code-payment-4", "code-payment-1", "code-payment-2", "code-payment-3"]

handleNameMapping(mockItemData);
// can get values from existing mapping.

handleNameMapping 在发起请求前会做 code 收集，若本次收集中没有需要 fetch 的 code，那就避免发送无用的 HTTP 请求，从而达到了优化的目的。

最终示例的 TS 代码如下。若想直接在控制台尝试效果的话，可以通过 ts 官网中的 Playground 编译为可直接运行的 js 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

interface DataType {
  code: string;
  paymentTransaction: string[];
}

const mapping = new Map();

function collectionCodes(initCodes?: string[] | Set<string>) {
  const codes = new Set<string>(initCodes);

  return {
    append(code: string) {
      if (!mapping.has(code)) {
        codes.add(code);
      }

      return this;
    },
    empty() {
      return !codes.size;
    },
    value() {
      return codes;
    },
  };
}

function handleNameMapping(data: DataType) {
  const codes = collectionCodes()
    .append(data.code)
    .append('code-append-1')
    .append('code-append-1')
    .append('code-append-2');

  data.paymentTransaction.forEach((code) => codes.append(code));

  if (codes.empty()) {
    console.log('can get values from existing mapping.');
    return;
  }

  // 如果请求的数据需要转为数组，可以 Array.from 进行转换
  const list = Array.from(codes.value());
  console.log('fetch data before, codes --> ', list);

  // mock 获取数据后拿到 name mapping 后，存入 mapping 中的行为.
  // 注意，Set 类型也可以用 forEach 方法，不一定得转为数组才可以操作
  list.forEach(code => mapping.set(code, `random-name-${Math.random()}`))
}

const mockItemData = {
  code: 'code-main',
  paymentTransaction: [
    'code-payment-4',
    'code-payment-1',
    'code-payment-2',
    'code-payment-1',
    'code-payment-3',
  ],
};

handleNameMapping(mockItemData);
// fetch data before, codes -->  (7) ["code-main", "code-append-1", "code-append-2", "code-payment-4", "code-payment-1", "code-payment-2", "code-payment-3"]

handleNameMapping(mockItemData);
// can get values from existing mapping.

本例的分析就到此结束了，虽然在本例中链式调用没有充分展示出自己的优势，但也可以作为一个设计思路用于参考。

接下来对 React 性能相关的问题进行知识回顾。

React 代码复用

• Render Props
• 高阶组件 (HOC)
• 自定义 Hooks
• Mixins (已被 React 废弃)

Render props

Render props 是一种在 React 组件之间共享代码的简单技术。具体的行为是:

1. 子组件接收一个用于渲染指定视图的 prop 属性，该属性的类型是函数。
2. 父组件在组件内部定义该函数后，将函数的引入传给子组件
3. 子组件将组件内部 state 作为实参传给从外面传来的函数，并将函数的返回结果渲染在指定的视图区域。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 组件使用
<Mouse render={(x, y) => <span>x: {x}, y: {y}</span>} />

// 组件内部大致实现
class Mouse extends React.Component {
  state = { x: 0, y: 0 };

  render() {
    return (
      <section>
        <header>头部信息</header>
        <main>{this.props.render(this.state)}</main>
        <footer>底部信息</footer>
      </section>
    );
  }
}

准确来说 Render props 是一个用于告知组件需要渲染什么内容的函数属性。props 的命名可以由自己定义，比如用于在内容区域渲染的 prop 名可以叫 render，同时还可以再接收一个 renderHead 的 prop 用于渲染头部的信息。

高阶函数、高阶组件分别是什么？

高阶函数就是接收其它函数作为参数的函数就称之为高阶函数，像数组的 map 、sort、filter 都是高阶函数。

高阶组件(Higher-order component, HOC) 是 React 用于复用组件逻辑的一种高级技巧。它具体的行为是：

函数接收一个组件作为参数，在函数体内定义一个新组件，新组件内编写可复用的逻辑并应用到参数组件中。最后再将新组件作为函数的返回值 return 出去。
redux 中的 connect 函数就是一个高阶组件。

React 性能优化

1. 对比 props/state 新旧值的变化来决定是否渲染组件，参见：父组件在执行 render 时会不会触发子组件的 render 事件？如果会该怎么避免？
2. 列表渲染时每项添加唯一的 key。参见：渲染列表为啥要用 key？
3. 定时器、DOM 事件等在组件销毁时一同销毁，从而避免内存泄露。
4. 代码分割，使用异步组件。
5. Hooks 使用 useMemo 缓存上一次计算的结果，避免重复计算值。

父组件在执行 render 时会不会触发子组件的 render 事件？如果会该怎么避免？

如果父组件渲染后，子组件接收的 props 也跟着发生了改变，那么默认情况下会触发子组件的渲染。

若子组件接受的 props 没有发生改变，那就得判断子组件的状况。

如果子组件是继承于 Component 声明的组件，并且没有使用 shouldComponentUpdate 做避免重复渲染的处理，那么子组件会触发 render 事件。

为了避免重复渲染，类组件可以使用 shouldComponentUpdate 来决定是否进行渲染。也可以将继承于 Component 组件改为继承 PureComponment，该组件会浅对比 Props 是否进行改变，从而决定是否渲染组件。

如果是函数组件，可以通过 React.memo 来对函数组件进行缓存。

渲染列表为啥要用 key？

渲染列表时，如果不给列表子项传 key 的话，React 将默认使用 index 作为 key，同时会在控制台发出警告。

key 在兄弟节点之间必须唯一，要避免使用数组下标 index 作为 key。因为使用数组下标作为 `key 时，若数组的顺序发生了改变，将会影响 Diffing 算法的效率。

若列表的节点是组件的话，还可能会影响组件的 state 数据。因为组件实例是基于 key 来决定是否更新与复用。当顺序发生了变化，则 key 也会相应得被修改，从而导致子组件间的数据错乱。

React 使用的 Diffing 算法是通过 tag 和 key 判断是否是同一个元素(sameNode)。使用唯一的 key 有助于 React 识别哪些元素发生改变，如节点添加或删除。这样有助于减少渲染次数，从而优化性能。

如果数组中的数据没有唯一的 key，可以引入 shortid 预先给数组中每项数据生成唯一的 id：

1
2
3
4
5
6
7
8
9
10

const shortid = require('shortid');

function addId(data) {
  return {
    ...data,
    id: shortid.generate(),
  }
}

const newList = list.map(addId);

若确定没有列表的顺序不会发生变化同时没有其他唯一的 key 来标识列表项时才能使用数组的下标。

虚拟 dom 是如何提升性能的

当组件触发更新时，虚拟 DOM 通过 Diffing 算法比对新旧节点的变化以决定是否渲染 DOM 节点，从而减少渲染提升性能。因为修改真实 DOM 所耗费的性能远比操作 JavaScript 多几倍，因此使用虚拟 DOM 在渲染性能上会高效的多。

简述 React Diffing 算法

Diffing 算法(Diffing Algorithm) 会先比较两个根元素的变化:

1. 当节点类型变化时，将会卸载原有的树而建立新树。如父节点 <div> 标签被修改为 <section> 标签，则它们自身及 children 下的节点都会被重新渲染。
2. 当 DOM 节点类型相同时，保留相同的 DOM 节点，仅更新发生改变的属性。
3. 当组件类型相同时，组件更新时组件实例保持不变，React 将更新组件实例的 props, 并调用生命周期 componentWillReceiveProps() 和 componentwillupdate()，最后再调用 render。若 render 中还有子组件，将递归触发 Diff。
4. 当列表节点发生变化，列表项没有设置 key 时, 那么 Diffing 算法会逐个对比节点的变化。如果是尾部新增节点，那 Diff 算法会 Diff 到列表末尾，仅新增元素即可，不会有其他的性能损耗。若新增的数据不在数组的尾部而是在中间，那么 Diffing 算法比较到中间时判断出节点发生变化，将会丢弃后面所有节点并重新渲染。
5. 当列表节点发生变化，列表项有设置 key 时, React 可以通过 key 来匹配新旧节点间的对应关系，可以很快完成 Diff 并避免重复渲染的问题。

异步组件怎么使用？

1. 通过动态 import() 语法对组件代码进行分割。

2. 使用 React.lazy 函数，结合 import() 语法引入动态组件。在组件首次渲染时，会自动导入包含 MyComponent 的包。

   1	const MyComponent = React.lazy(() => import('./MyComponent'));

3. 在 React.Suspense 组件中渲染 lazy 组件，同时可以使用 fallback 做优雅降级(添加 loading 效果):

   1 2 3

   <React.Suspense fallback={<div>Loading...</div>}> <MyComponent /> </React.Suspense>

4. 封装一个错误捕获组件(比如组件命名为 MyErrorBoundary)，组件内通过生命周期 getDerivedStateFromError 捕获错误信息。当异步组件加载失败时，将捕获到错误信息处理后给用户做错误提示功能。

   1 2 3 4 5

   <MyErrorBoundary> <React.Suspense fallback={<div>Loading...</div>}> <MyComponent /> </React.Suspense> </MyErrorBoundary>

JSX 是如何编译为 js 代码的？

在 React v17 之前，JSX 会被编译为 React.createElement(component, props, ...children) 函数，执行会返回 vnode，vnode 通过 patch 之类的方法渲染到页面。

React v17 之后更新了 JSX 转换规则。新的 JSX 转换不会将 JSX 转换为 React.createElement，而是自动从 React 的 package 中引入新的入口函数(react/jsx-runtime)并调用。这意味着我们不用在每个组件文件中显式引入 React。

怎么对组件的参数做类型约束呢?

要对组件的参数做类型约束的话，可以引入 prop-types 来配置对应的 propTypes 属性。
Flow 和 TypesScript 则可以对整个应用做类型检查。

使用 React 进行项目开发也有好几个项目了，趁着最近有空来对 React 的知识做一个简单的复盘。

React 是单向数据流还是双向数据流？它还有其他特点吗？

React 是单向数据流，数据是从上向下流。它的其他主要特点时:

• 数据驱动视图
• 声明式编写 UI
• 组件化开发

setState

React 通过什么方式来更新数据

React 是通过 setState 来更新数据的。调用多个 setState 不会立即更新数据，而会批量延迟更新后再将数据合并。

除了 setState 外还可以使用 forceUpdate 跳过当前组件的 shouldComponentUpdate diff，强制触发组件渲染(避免使用该方式)。

React 不能直接修改 State 吗？

1. 直接修改 state 不会触发组件的渲染。
2. 若直接修改 state 引用的值，在实际使用时会导致错误的值出现
3. 修改后的 state 可能会被后续调用的 setState 覆盖

setState 是同步还是异步的？

出于性能的考虑，React 可能会把多个 setState 合并成一个调用。

React 内有个 batchUpdate(批量更新) 的机制，在 React 可以控制的区域 (如组件生命周期、React 封装的事件处理器) 设置标识位 isBatchingUpdate 来决定是否触发更新。

比如在 React 中注册的 onClick 事件或是 componentDidMount 中直接使用 setState 都是异步的。若想拿到触发更新后的值，可以给 setState 第二个参数传递一个函数，该函数在数据更新后会触发的回调函数，函数的参数就是更新后最新的值。

不受 React 控制的代码快中使用 setState 是同步的，比如在 setTimeout 或是原生的事件监听器中使用。

setState 小测

输出以下结果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

componentDidMount() {
  this.setState({ count: this.state.count + 1 });
  console.log("1 -->", this.state.count);

  this.setState({ count: this.state.count + 1 });
  console.log("2 -->", this.state.count);

  setTimeout(() => {
    this.setState({ count: this.state.count + 1 });
    console.log("3 -->", this.state.count);
  }, 0);

  setTimeout(() => {
    this.setState({ count: this.state.count + 1 });
    console.log("4 -->", this.state.count);
  }, 0);
}

输出结果为:

1
2
3
4

1 --> 0
2 --> 0
3 --> 2
4 --> 3

解答: 调用 setState 后不会立即更新 state，开头两次调用会被异步合并调用，因此只有一次调用。一轮事件循环结束后，调用第 3、4 次 setState。由于在 setTimeout 中调用是同步更新的，因此都能正常的叠加数据。

React 生命周期

React 的生命周期主要是指组件在特定阶段会执行的函数。以下是 class 组件的部分生命周期图谱:

从上图可以看出：React 的生命周期按照类型划分，可分为 挂载时(Mounting)、更新时(Updating)、卸载时(Unmounting) 。图中的生命周期函数效果如下:

constructor (构造函数)

• 触发条件: 组件初始化时
• 是否可以使用 setState: X
• 使用场景: 初始化 state 或者对方法绑定 this。在构造函数中便于自动化测试。

static getDerivedStateFromProps

Tips: 不常用方法

• 触发条件: 调用 render 函数之前
• 是否可以使用 setState: X
• 函数行为: 函数可以返回一个对象用于更新组件内部的 state 数据，若返回 null 则什么都不更新。
• 使用场景: 用于 state 依赖 props 的情况，也就是状态派生。值得注意的是派生 state 会导致代码冗余，并使组件难以维护。

shouldComponentUpdate

Tips: 不常用方法

• 触发条件: 当 props/state 发生变化
• 是否可以使用 setState: X
• 函数行为: 函数的返回值决定组件是否触发 render，返回值为 true 则触发渲染，反之则阻止渲染。(组件内不写该函数的话，则调用默认函数。默认函数只会返回 true，即只要 props/state 发生变化，就更新组件)
• 使用场景: 组件的性能优化，仅仅是浅比较 props 和 state 的变化的话，可以使用内置的 PureComponent 来代替 Component 组件。

render

• 触发条件: 渲染组件时
• 是否可以使用 setState: X
• 函数行为: 函数的返回值决定视图的渲染效果
• 使用场景: class 组件中唯一必须要实现的生命周期函数。

getSnapshotBeforeUpdate

Tips: 不常用方法

• 触发条件: 在最近一次渲染输出（提交到 DOM 节点）之前调用
• 是否可以使用 setState: X
• 函数行为: 函数的返回值将传入给 componentDidUpdate 第三个参数中。若只实现了该函数，但没有使用 componentDidUpdate 的话，React 将会在控制台抛出警告
• 使用场景: 可以在组件发生更改之前从 DOM 中捕获一些信息（例如，列表的滚动位置）

componentDidMount

• 触发条件: 组件挂载后（插入 DOM 树中）立即调用，该函数只会被触发一次
• 是否可以使用 setState: Y (可以直接调用，但会触发额外渲染)
• 使用场景: 从网络请求中获取数据、订阅事件等

componentDidUpdate

• 触发条件: 组件更新完毕后(首次渲染不会触发)
• 是否可以使用 setState: Y (更新语句须放在条件语句中，不然可能会造成死循环)
• 使用场景: 对比新旧值的变化，进而判断是否需要发送网络请求。比如监听路由的变化

componentWillUnmount

• 触发条件: 组件卸载及销毁之前直接调用
• 是否可以使用 setState: X
• 使用场景: 清除 timer，取消网络请求或清除在 componentDidMount 中创建的订阅等

生命周期阶段

针对 React 生命周期中函数的调用顺序，笔者写了一个简易的 Demo 用于演示: React 生命周期示例

React 组件挂载阶段先后会触发 constuctor、static getDerivedStateFromProps、render、componentDidMount 函数。若 render 函数内还有子组件存在的话，则会进一步递归:

1
2
3
4
5
6
7
8
9
10

[Parent]: constuctor
[Parent]: static getDerivedStateFromProps
[Parent]: render
[Children]: constuctor
[Children]: static getDerivedStateFromProps
[Children]: render
[Children]: componentDidMount
[Children]: 挂载阶段结束!
[Parent]: componentDidMount
[Parent]: 挂载阶段结束!

React 组件更新阶段主要是组件的 props 或 state 发生变化时触发。若组件内还有子组件，则子组件会判断是否也需要触发更新。默认情况下 component 组件是只要父组件发生了变化，子组件也会跟着变化。以下是更新父组件 state 数据时所触发的生命周期函数:

1
2
3
4
5
6
7
8
9
10
11
12

[Parent]: static getDerivedStateFromProps
[Parent]: shouldComponentUpdate
[Parent]: render
[Children]: static getDerivedStateFromProps
[Children]: shouldComponentUpdate
[Children]: render
[Children]: getSnapshotBeforeUpdate
[Parent]: getSnapshotBeforeUpdate
[Children]: componentDidUpdate
[Children]: 更新阶段结束!
[Parent]: componentDidUpdate
[Parent]: 更新阶段结束!

值得注意的是: 在本例 Demo 中没有给子组件传参，但子组件也触发了渲染。但从应用的角度上考虑，既然你子组件没有需要更新的东西，那就没有必要触发渲染吧？

因此 Component 组件上可以使用 shouldComponentUpdate 或者将 Component 组件替换为 PureComponment 组件来做优化。在生命周期图中也可以看到: shouldComponentUpdate 返回 false 时，将不再继续触发下面的函数。

有时你可能在某些情况下想主动触发渲染而又不被 shouldComponentUpdate 阻止渲染该怎么办呢？可以使用 force­Update() 跳过 shouldComponentUpdate 的 diff，进而渲染视图。(需要使用强制渲染的场景较少，一般不推荐这种方式进行开发)

React 组件销毁阶段也没啥好说的了。父组件先触发销毁前的函数，再逐层向下触发:

1
2
3
4

[Parent]: componentWillUnmount
[Parent]: 卸载阶段结束!
[Children]: componentWillUnmount
[Children]: 卸载阶段结束!

其他生命周期

除了上图比较常见的生命周期外，还有一些过时的 API 就没有额外介绍了。因为它们可能在未来的版本会被移除：

• UNSAFE_componentWillMount(): 在组件即将被挂载到页面的时刻自动执行。应该使用 componentDidUpdate 来代替该函数。
• UNSAFE_componentWillUpdate()
• UNSAFE_componentWillReceiveProps()：当父组件某个 props 更新前，可以调用 setState 覆盖内部的某个 state。

上图没有给出错误处理的情况，以下信息作为补充: 当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：

• static getDerivedStateFromError()
• componentDidCatch()

React 组件通信

1. 父组件通过 props 给子组件传递数据。子组件通过触发父组件提供的回调函数来给父组件传递消息或数据
2. React.Context 可以跨层级组件共享数据
3. 自定义事件
4. 引入 Redux/Mobx 之类的状态管理器

React.Context 怎么使用

Context 可以共享对于组件树而言是全局的数据，比如全局主题、首选语言等。使用方式如下：

1. React.createContext 函数用于生成 Context 对象。可以在创建时给 Context 设置默认值：

   1	const ThemeContext = React.createContext('light');

2. Context 对象中有一个 Provider(提供者) 组件，Provider 组件接受一个 value 属性用以将数据传递给消费组件。

   1 2 3

   <ThemeContext.Provider value="dark"> <page /> </ThemeContext.Provider>

3. 获取 Context 提供的值可以通过 contextType 或者 Consumer(消费者) 组件中获取。contextType 只能用于类组件，并且只能挂载一个 Context：

   1 2 3 4 5 6 7 8 9 10 11

   class MyClass extends React.Component { componentDidMount() { let value = this.context; /* 在组件挂载完成后，使用 MyContext 的值执行一些有副作用的操作 */ } render() { let value = this.context; /* 基于 MyContext 的值进行渲染 */ } } MyClass.contextType = MyContext;

   若想给组件挂载多个 Context, 或者在函数组件内使用 Context 可以使用 Consumer 组件:

   1 2 3 4 5 6 7 8 9

   <ThemeContext.Consumer> {theme => ( <UserContext.Consumer> {user => ( <ProfilePage user={user} theme={theme} /> )} </UserContext.Consumer> )} </ThemeContext.Consumer>

Context 通常适用于传递较为简单的数据信息，若数据太过复杂，还是需要引入状态管理(Redux/Mbox)。

函数组件是什么？与类组件有什么区别？

函数组件本质上是一个纯函数，它接受 props 属性，最后返回 JSX。

与类组件的差别在于: 它没有实例、不能通过 extends 继承于其他方法、也没有生命周期和 state。以前函数组件常作为无状态组件，React 16.8+ 可以引入 Hooks 为函数组件支持状态和副作用操作。

Hooks

Hook vs class

类组件的不足:

• 状态逻辑复用难，缺少复用机制。渲染属性和高阶组件导致层级冗余。
• 组件趋向复杂难以维护。生命周期函数混杂不相干逻辑，相干逻辑分散在不同生命周期中。
• this 指向令人困扰。内联函数过度创建新句柄，类成员函数不能保证 this。

Hooks 的优点:

• 自定义 Hook 方便复用状态逻辑
• 副作用的关注点分离
• 函数组件没有 this 问题

Hooks 现有的不足:

• 不能完全取代 class 组件的生命周期，部分不常用的生命周期暂时没有实现。
• Hooks 的运作方式带来了一定的学习成本，需要转换现有的编程思维，增加了心智负担。

Hooks 的使用

描述 Hooks 有哪些常用的方法和大致用途

1. useState: 使函数组件支持设置 state 数据，可用于代替类组件的 constructor 函数。

2. useEffect: 使函数组件支持操作副作用 (effect) 的能力，Hook 第二个参数是 effect 的依赖项。当依赖项是空时，effect 函数仅会在组件挂载后执行一遍。若有一个或多个依赖项时，只要任意一个依赖项发生变化，就会触发 effect 函数的执行。effect 函数里可以做一些如获取页面数据、订阅事件等操作。

   除此之外，useEffect 还可以返回一个函数用于做清除操作，这个清除操作时可选的。常用于清理订阅事件、DOM 事件等。

   1 2 3 4 5 6 7 8 9 10

   // 绑定 DOM 事件 useEffect(() => { document.addEventListener('click', handleClick); // useEffect 回调函数的返回值是函数的话，当组件卸载时会执行该函数 // 若没有需要清除的东西，则可以忽略这一步骤 return () => { document.removeEventListener('click', handleClick); }; }, [handleClick]);

3. useLayoutEffect: useEffect 的 effect 执行的时机是在浏览器完成布局和绘制之后会延迟调用。若想要 DOM 变更的同时同步执行 effect 的话可以使用 useLayoutEffect。它们之间只是执行的时机不同，其他都一样。

4. useContext: 接收一个 Context 对象，并返回 Context 的当前值。相当于类组件的 static contextType = MyContext。

5. useReducer 是 useState 的代替方案，它的工作方式有点类似于 Redux，通过函数来操作 state。适合 state 逻辑较为复杂且包含多个子值，或是新的 state 依赖于旧的 state 的场景。

6. useMemo 主要用于性能优化，它可以缓存变量的值，避免每次组件更新后都需要重复计算值。

7. useCallbck 用于缓存函数，避免函数被重复创建，它是 useMemo 的语法糖。useCallback(fn, deps) 的效果相当于是 useMemo(() => fn, deps)。

Hook 之间的一些差异

1. React.memo 与 React.useMemo：

   memo 针对一个组件的渲染是否重复执行，useMemo 定义一段函数逻辑是否重复执行。

2. React.useMemo 与 React.useCallback：

   useMemo(() => fn) 返回的是一个函数，将等同于 useCallback(fn)。

3. React.useStatus 与 React.useRef：

   React.useStatus 相当于类的 state；React.useRef 相当于类的内部属性。前者参与渲染，后者的修改不会触发渲染。

自定义 Hook 的使用

自定义 Hook 的命名规则是以 use 开头的函数，比如 useLocalStorage 就符合自定义 Hook 的命名规范。
使用自定义 Hook 的场景有很多，如表单处理、动画、订阅声明、定时器等等可复用的逻辑都能通过自定义 Hook 来抽象实现。

在自定义 Hook 中，可以使用 Hooks 函数将可复用的逻辑和功能提取出来，并将内部的 state 或操作的方法从自定义 Hook 函数中返回出来。函数组件使用时就可以像调用普通函数一祥调用自定义 Hook 函数, 并将自定义 Hook 返回的 state 和操作方法通过解构保存到变量中。

下面是 useLocalStorage 的实现，它将 state 同步到本地存储，以使其在页面刷新后保持不变。 用法与 useState 相似，不同之处在于我们传入了本地存储键，以便我们可以在页面加载时默认为该值，而不是指定的初始值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

import { useState } from 'react';

// Usage
function App() {
  // Similar to useState but first arg is key to the value in local storage.
  const [name, setName] = useLocalStorage('name', 'Bob');

  return (
    <div>
      <input
        type="text"
        placeholder="Enter your name"
        value={name}
        onChange={e => setName(e.target.value)}
      />
    </div>
  );
}

// Hook
function useLocalStorage(key, initialValue) {
  // State to store our value
  // Pass initial state function to useState so logic is only executed once
  const [storedValue, setStoredValue] = useState(() => {
    try {
      // Get from local storage by key
      const item = window.localStorage.getItem(key);
      // Parse stored json or if none return initialValue
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // If error also return initialValue
      console.log(error);
      return initialValue;
    }
  });

  // Return a wrapped version of useState's setter function that ...
  // ... persists the new value to localStorage.
  const setValue = value => {
    try {
      // Allow value to be a function so we have same API as useState
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      // Save state
      setStoredValue(valueToStore);
      // Save to local storage
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      // A more advanced implementation would handle the error case
      console.log(error);
    }
  };

  return [storedValue, setValue];
}

注意: 自定义 Hook 函数在定义时，也可以使用另一个自定义 Hook 函数。

Hook 使用约束

1. 只能在函数组件最顶层调用 Hook，不能在循环、条件判断或子函数中调用。
2. 只能在函数组件或者是自定义 Hook 函数中调用，普通的 js 函数不能使用。

class 组件与 Hook 之间的映射与转换

函数组件相比 class 组件会缺少很多功能，但大多可以通过 Hook 的方式来实现。

生命周期

• constructor：class 组件的构造函数一般是用于初始化 state 数据或是给事件绑定 this 指向的。函数组件内没有 this 指向的问题，因此可以忽略。而 state 可以通过 useState/useReducer 来实现。

• getDerivedStateFromProps：getDerivedStateFromProps 一般用于在组件 props 发生变化时派生 state。Hooks 实现同等效果如下:

  1 2 3 4 5 6 7 8 9 10 11 12

  function ScrollView({row}) { const [isScrollingDown, setIsScrollingDown] = useState(false); const [prevRow, setPrevRow] = useState(null); if (row !== prevRow) { // Row 自上次渲染以来发生过改变。更新 isScrollingDown。 setIsScrollingDown(prevRow !== null && row > prevRow); setPrevRow(row); } return `Scrolling down: ${isScrollingDown}`; }

• shouldComponentUpdate: 使用 React.memo 应用到函数组件中后，当 props 发生变化时，会对 props 的新旧值进行前对比，相当于是 PureComponent 的功能。如果你还想自己定义比较函数的话，可以给 React.memo 的第二个参数传一个函数，若函数返回 true 则跳过更新。

  1 2 3

  const Button = React.memo((props) => { return <button>{props.text}</button> });

• render: 函数组件本身就是一个 render 函数。

• componentDidMount / componentDidUpdate / componentWillUnmount:

  useEffect 第二个参数的依赖项为空时，相当于 componentDidMount，组件挂载后只会执行一次。每个 useEffect 返回的函数相当于是 componentWillUnmount 同等效果的操作。若有依赖，则 effect 函数相当于是 componentDidUpdate：

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  // 没有依赖项，仅执行一次 useEffect(() => { const subscription = props.source.subscribe(); // 相当于 componentWillUnmount return () => { subscription.unsubscribe(); }; }, []); // 若有依赖项，相当于 componentDidUpdate // 当 page 发生变化时会触发 effect 函数 useEffect(() => { fetchList({ page }); }, [page]);