React

1. 说说对 React 的理解？有哪些特性？

2. 说说 Real DOM 和 Virtual DOM 的区别？优缺点？

3. state 和 props 有什么区别？

6. 说说 React 中的 setState 执行机制

7. 说说 React 的事件机制？

8. React 事件绑定的方式有哪些？区别？

9. React 构建组件的方式有哪些？区别？

10. React 中组件之间如何通信？

11. React 中的 key 有什么作用？

12. 说说对 React refs 的理解？应用场景？

13. 说说对受控组件和非受控组件的理解？应用场景？

15. 说说对 React Hooks 的理解？解决了什么问题？

17. 说说 react 中引入 css 的方式有哪几种？区别？

18. 在 react 中组件间过渡动画如何实现？

19. 说说你对 Redux 的理解？其工作原理？

20. 说说对 Redux 中间件的理解？常用的中间件有哪些？实现原理？

21. 你在 React 项目中是如何使用 Redux 的? 项目结构是如何划分的？

22. 说说你对 React Router 的理解？常用的 Router 组件有哪些？

23. 说说 React Router 有几种模式？实现原理？

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

26. 说说你是如何提高组件的渲染效率的？在 React 中如何避免不必要的 render？

27. 说说 React diff 的原理是什么？

28. 说说对 Fiber 架构的理解？解决了什么问题？

29. 说说 React Jsx 转换成真实 DOM 过程？

30. 说说 React 性能优化的手段有哪些？

31. 说说你在 React 项目是如何捕获错误的？

32. 说说 React 服务端渲染怎么做？原理是什么？

33. 说说你在使用 React 过程中遇到的常见问题？如何解决?

18. 路由实现原理

ajax 出现以前，一个页面对应一个路由。路由跳转会导致页面刷新，用户体验不好。

ajax 出现后，用户可以不用刷新页面就更新页面内容。于是就有了单页面应用。

单页面应用就是所有的页面内容都在一个 html 中，通过路由跳转来实现页面组件的切换。页面跳转本质就是组件切换。

现在主流的路由实现有两种方法：

hash 路由：通过#后面的内容动态切换路由。其实就是锚点的功能。

history 路由：通过 history API 来处理。当用户触发跳转的时候，通过pushState或者replaceState来更新浏览器历史记录。 回退的时候通过popState来更新浏览器历史记录。

19. redux

主要就三块内容：

• store：一个全局状态对象
• reducer: 根据 action type 来对 state 操作，进而更新 state
• action: 改变状态的唯一方式是 dispatch action

三大原则:

• 单一数据源
• state 是只读的：改变 state 的唯一方式是通过 dispatch action
• reducer 必须是一个纯函数,避免了副作用。确保了同样的 state 对应同样的视图

9. react 事件机制

react 中 onClick,onMouseOver 等小驼峰形式的方法，并不是原生的 dom 事件，而是 react 自己实现的一套事件机制。也就是合成事件。

主要原理就是利用事件代理，将所有节点的事件添加到 root 节点上（react16.8 以前是添加到 document 上）。然后点击的时候，在冒泡阶段触发 root 节点的合成事件，根据具体的触发节点，执行响应的操作。

react 类组件需要手动绑定 this，主要是因为事件触发过程中，事件处理函数是作为回调添加的。如果不手动绑定 this, 回调中的 this 是 undefined。

10. react fiber 架构

react fiber 其实就是一种数据结构, 也是一个工作单元。fiber 是一个链表。其实为了解决性能问题引入的。

浏览器一帧的渲染时间只有 16ms。且 js 引擎与 UI 线程是异步的。如果一直执行 js，会导致没有时间渲染和处理用户操作。这回带来卡帧。

react15 的时候 render 的方法是递归实现的。一旦开始执行 render 就无法中止，直到执行完毕。当 js 的执行时间超过 16ms 的时候，页面就会很卡。因此 react 团队引入了 fiber，把这部分同步的任务拆分成了异步可中断的任务。

也就是说优先渲染页面，有空闲时间再执行 js，也就是在每帧的空闲时间执行 js。这样处理后，js 不再阻塞浏览器绘制页面，也就不存在卡顿的问题了。

11. react 调度机制

React 调度器会根据任务的优先级，动态地决定何时执行哪个任务。具体来说，React 会采取以下步骤来处理任务优先级：

• 任务入队： 当有任务需要执行时，React 将其添加到调度队列中，并为每个任务分配相应的优先级。

• 任务调度： 调度器会根据当前任务队列中的任务优先级，决定下一个要执行的任务。优先级高的任务会在优先级低的任务之前执行。

• 时间片分配： React 使用时间片（time-slicing）来分配任务的执行时间。时间片是指在一段时间内可以执行的任务数量。当时间片用尽时，调度器会暂停当前任务，执行下一个任务，并在下次时间片到来时继续之前的任务。

• 中断和恢复： 如果需要响应更高优先级的任务，React Fiber 允许中断当前任务的执行，并在下次时间片到来时恢复执行。这种机制保证了高优先级任务的及时响应。

12. 优先级概念

由于 fiber 是可中断的任务。因此 react 针对不同的任务分配了不同的优先级。一般的任务都是普通优先级。预加载的是低优先级的任务。

13. commit & render

• render

将 jsx 转化成虚拟 dom 的过程。也就是把 jsx 翻译成 react.createElement()，然后再转化成对应的对象的过程。 转化过程中，对象是记录在 fiber 中的。 等下次更新的时候，会进行新旧 fiber 的对比，也就是 diff 算法，然后找出需要更新的部分。这个过程成为协调。

• commit

将虚拟 dom 应用到实际 dom 的过程。react 生成了一个更新队列，包括插入，更新和删除操作。然后 react 在 commit 阶段，把这些变更应用到实际 dom 上，也就是 document.createElement，removeElement 这些操作。这一步会尽可能批量执行 dom，以便于提高性能。

14. hooks 原理

• useState

useState 长存与内存。可以使用闭包，或者 module scope 来存储状态。

useState 是批量更新的。一次操作后，会把该次操作的所有状态添加到队列中，然后批量处理。

useState 完成后，进行组件更新（每个组件就是一个 fiber 节点）。

• useEffect