1. 自我介绍
  2. 两列布局，左定宽，右适应
  3. 重排和重绘是什么，如何降低重排重绘的性能开销？
  4. 如何判断一个变量是 Array？
  5. 宏任务和微任务是什么？说出给定异步代码的输出结果（setTimeout+Promise）
  6. Typescript 常用泛型（似乎是想问内置工具泛型）
  7. Typescript 语法：keyof typeof obj
  8. React ErrorBoundary 是什么？
  9. 为什么 React Hooks 必须保证有序性和确定性（不能放进分支语句）？
  10. 对 React 组件性能调优的认识
  11. 开放性问题：说一下做项目过程中遇到过哪些难点，是如何解决的
  12. 代码实现：写一个自定义 Hook，实现 forceUpdate 的功能
  13. 代码实现：数组拍平

setTimeout + Promise 异步代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
setTimeout(() => console.log(0));

new Promise((resolve) => {
  console.log(1);
  resolve(2);
  console.log(3);
}).then((o) => console.log(o));

new Promise((resolve) => {
  console.log(4);
  resolve(5);
})
  .then((o) => console.log(o))
  .then(() => console.log(6));

// 1342560

类似于 forceUpdate 的自定义 Hook：

1
2
3
4
5
6
7
function useForceUpdate() {
  const [state, setState] = React.useState(false);

  return () => {
    setState(!state);
  };
}

数组拍平

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 递归实现
function flat_1(arr) {
  const result = [];

  for (const item of arr) {
    if (Array.isArray(item)) {
      result.push(...flat(item));
    } else {
      result.push(item);
    }
  }

  return result;
}

// 借助toString
function flat_2(arr) {
  return arr.toString().split(",").map(Number);
}