高优先级知识点，需要熟练掌握。

1. 18 道 react 面试

• 网址 (opens new window)

• 网址 (opens new window)

• 网址 (opens new window)

1. react 原理

网址 (opens new window)

1. React Hooks 当中的 useEffect 是如何区分生命周期钩子的

useEffect 可以看成是 componentDidMount，componentDidUpdate 和 componentWillUnmount 三者的结合。

2. 为什么不能用数组下标来作为 react 组件中的 key？

1. 在数组头部或中部插入或删除元素： 所有 key 对应的节点的值发生更改，进行重新渲染。造成性能损耗
2. 而如果使用数组中唯一值来作为 key：不管是在何处插入或删除节点，其他 key 对应的节点的值未发生更改，只需插入或删除操作的数组节点。

3. React Fiber 是什么？(https://fe.ecool.fun/topic-answer/7830d575-2143-47c3-b938-2f9448a7465e?orderBy=updateTime&order=desc&tagId=13)

Fiber 的中文翻译叫纤程，与进程、线程同为程序执行过程，Fiber 就是比线程还要纤细的一个过程。纤程意在对渲染过程实现进行更加精细的控制。

1. Fiber 把一个渲染任务分解为多个渲染任务，而不是一次性完成，把每一个分割得很细的任务视作一个"执行单元"，React 就会检查现在还剩多少时间，如果没有时间就将控制权让出去，故任务会被分散到多个帧里面，中间可以返回至主进程控制执行其他任务，最终实现更流畅的用户体验。

2. 即是实现了"增量渲染"，实现了可中断与恢复，恢复后也可以复用之前的中间状态，并给不同的任务赋予不同的优先级，其中每个任务更新单元为 React Element 对应的 Fiber 节点。

3.1 链表树 3.2 双缓冲双缓冲 3.3 时间切片 3.4 优先级调度

4. React 有哪些性能优化的方法？

1. 减少计算的量。 -> 对应到 React 中就是减少渲染的节点 或者 降低组件渲染的复杂度
2. 利用缓存
3. 精确重新计算的范围

5.redux 就是一个实现上述集中管理的容器，遵循三大基本原则：

1. 单一数据源
2. state 是只读的
3. 使用纯函数来执行修改

React 生命周期方法是什么？

React 组件的生命周期方法分为三个阶段：挂载、更新、卸载。

挂载阶段

• constructor：组件初始化
• componentWillMount（已废弃）：组件挂载前调用
• componentDidMount：组件挂载后调用，适合进行 DOM 操作或数据请求

更新阶段

• componentWillReceiveProps（已废弃）：父组件传递新的 props 时调用
• shouldComponentUpdate：判断组件是否需要重新渲染
• componentWillUpdate（已废弃）：组件更新前调用
• componentDidUpdate：组件更新后调用

卸载阶段

• componentWillUnmount：组件卸载前调用，适合清理定时器、事件监听等

---

注意：新版 React 推荐使用 componentDidMount、shouldComponentUpdate、componentDidUpdate、componentWillUnmount，并用 Hooks 替代部分生命周期方法。

6. 说说 React render 方法的原理？在什么时候会被触发？