今年前端面试太难了，记录一下自己的面试题

react 的优化

shouldcomponentUpdate pureCompoment setState

• CPU的瓶颈（当有大量渲染任务的时候，js线程和渲染线程互斥）
• IO的瓶颈 就是网络（如何在网络延迟客观存在的 情况下，减少用户对网络延 迟的感知）（Code Splitting • Data Fetching）比如react.lazy（组件懒加载） suspense(分包在网络上，用的时候在获取)
• Virtual DOM 快么（Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图 进行合理、高效的更新。）

展示组件(Presentational component)和容器组件(Container component)之间有何不同?

一般可以用哪些值作为key

• 最好使用每一条数据中的唯一标识作为key，比如：手机号，id值，身份证号，学号等

• 也可以用数据的索引值（可能会出现一些问题）

前端react面试题详细解答

为什么 useState 要使用数组而不是对象

useState 的用法：

const [count, setCount] = useState(0)

可以看到 useState 返回的是一个数组，那么为什么是返回数组而不是返回对象呢？

这里用到了解构赋值，所以先来看一下ES6 的解构赋值：

数组的解构赋值

const foo = [1, 2, 3];
const [one, two, three] = foo;
console.log(one);    // 1
console.log(two);    // 2
console.log(three);    // 3

对象的解构赋值

const user = {
   
  id: 888,
  name: "xiaoxin"
};
const {
    id, name } = user;
console.log(id);    // 888
console.log(name);    // "xiaoxin"

看完这两个例子，答案应该就出来了：

• 如果 useState 返回的是数组，那么使用者可以对数组中的元素命名，代码看起来也比较干净
• 如果 useState 返回的是对象，在解构对象的时候必须要和 useState 内部实现返回的对象同名，想要使用多次的话，必须得设置别名才能使用返回值

下面来看看如果 useState 返回对象的情况：

// 第一次使用
const {
    state, setState } = useState(false);
// 第二次使用
const {
    state: counter, setState: setCounter } = useState(0) 

这里可以看到，返回对象的使用方式还是挺麻烦的，更何况实际项目中会使用的更频繁。 总结：useState 返回的是 array 而不是 object 的原因就是为了降低使用的复杂度，返回数组的话可以直接根据顺序解构，而返回对象的话要想使用多次就需要定义别名了。

React-Router如何获取URL的参数和历史对象？

（1）获取URL的参数