美团前端常见react面试题（附答案）_react time slice-优快云博客

本文链接：https://blog.youkuaiyun.com/beifeng11996/article/details/129273685

本文深入探讨React面试中常见的问题，包括Time Slice的概念，React-Router的不同形式，setState的内部机制，虚拟DOM对性能的提升，以及React Portal的应用场景。还讲解了setState的回调、Redux中间件、React性能优化的生命周期方法、组件和类的定义、虚拟DOM的理解及其优势，以及React Hooks中的useEffect和React Context等核心知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

你对 Time Slice的理解?

时间分片

React 在渲染（render）的时候，不会阻塞现在的线程
如果你的设备足够快，你会感觉渲染是同步的
如果你设备非常慢，你会感觉还算是灵敏的
虽然是异步渲染，但是你将会看到完整的渲染，而不是一个组件一行行的渲染出来
同样书写组件的方式

也就是说，这是React背后在做的事情，对于我们开发者来说，是透明的，具体是什么样的效果呢？

React- Router有几种形式？

有以下几种形式。
HashRouter，通过散列实现，路由要带#。
BrowerRouter，利用HTML5中 history API实现，需要服务器端支持，兼容性不是很好。

调和阶段 setState内部干了什么

当调用 setState 时，React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态
这将启动一个称为和解（reconciliation）的过程。和解（reconciliation）的最终目标是以最有效的方式，根据这个新的状态来更新UI。为此，React将构建一个新的 React 元素树（您可以将其视为 UI 的对象表示）
一旦有了这个树，为了弄清 UI 如何响应新的状态而改变，React 会将这个新树与上一个元素树相比较（ diff ）

通过这样做， React 将会知道发生的确切变化，并且通过了解发生什么变化，只需在绝对必要的情况下进行更新即可最小化 UI 的占用空间

为什么虚拟 dom 会提高性能

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能

具体实现步骤如下:

用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树，插到文档当中;
当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异;
把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。

setState方法的第二个参数有什么用？使用它的目的是什么？

它是一个回调函数，当 setState方法执行结束并重新渲染该组件时调用它。在工作中，更好的方式是使用 React组件生命周期之——“存在期”的生命周期方法，而不是依赖这个回调函数。

export class App extends Component {
   
  constructor(props) {
   
    super(props);
    this.state = {
   
      username: "雨夜清荷",
    };
  }
  render() {
   
    return <div> {
   this.state.username}</div>;
  }
  componentDidMount() {
   
    this.setstate(
      {
   
        username: "有课前端网",
      },
      () => console.log("re-rendered success. ")
    );
  }
}

React Portal 有哪些使用场景

在以前， react 中所有的组件都会位于 #app 下，而使用 Portals 提供了一种脱离 #app 的组件
因此 Portals 适合脱离文档流(out of flow) 的组件，特别是 position: absolute 与 position: fixed的组件。比如模态框，通知，警告，goTop 等。

以下是官方一个模态框的示例，可以在以下地址中测试效果