你绝对应该知道的 11 个高级 React 面试问题（附详细答案）

感谢阅读

1.什么是React 虚拟 DOM？

虚拟 DOM是一种概念，其中真实 DOM的虚拟表示保存在内存中，并通过诸如ReactDOM之类的库与实际 DOM 同步。

虚拟DOM是一个代表内存中真实 DOM 的对象。由于DOM更新是任何 Web 应用不可或缺的一部分，但却是前端领域最昂贵的操作，因此虚拟 DOM用于检查应用中需要更新的部分，并仅更新这些部分，从而显著提升性能。

2.为什么我们需要transpile React代码？

React代码是用JSX编写的，但是没有浏览器可以直接执行JSX，因为它们是构建为只读的常规JavaScript。

因此我们需要使用Babel之类的工具将JSX转换为JavaScript，以便浏览器可以执行它。

keys3.在React中的意义是什么？

Keys在React中用于识别唯一的VDOM元素及其驱动UI 的相应数据；通过回收现有的DOM元素，它们可以帮助React优化渲染。

Key帮助React识别哪些项目已更改、添加或删除，使其能够重用已经存在的DOM元素，从而提高性能。

例如：

const Todos = ({ todos }) => {
  return (
    <div>
      {todos.map((todo) => (
        <li>{todo.text}</li>
      ))}
    </div>
  );
};

这将导致每次更改时都会创建新的DOM 元素todos，但添加keyprop ( <li key={todo.id}>{todo.text}</li>) 将导致“拖动”标签内的DOM 元素ul并仅更新必要的li元素。

refs4.在React中的意义是什么？

Refs是允许您在渲染之间保留数据的变量，就像变量一样state，但与state变量不同的是，更新refs不会导致组件重新渲染。

Refs通常用于（但不限于）存储对DOM 元素的引用。

5. 设计React应用程序样式最常用的方法是什么？

CSS 类

React允许为组件指定类名，就像为HTML中的DOM元素设置类名一样。

当开发人员在开发传统的 Web 应用程序后首次开始使用React时，他们通常会选择CSS 类，因为他们已经熟悉这种方法。

内联 CSS

使用内联 CSS 为React元素添加样式，可以将样式完全限定在元素范围内。但是，某些样式功能不适用于内联样式。例如，像 这样的伪类的样式。:hover

预处理器（Sass、Stylus 和 Less）

React项目经常使用预处理器。这是因为，它们像CSS一样，开发人员非常了解它们，而且如果将React集成到旧版应用程序中，它们通常已经在使用了。

CSS-in-JS 模块（Styled Components、Emotion 和 Styled-jsx）

CSS-in-JS 模块是React应用程序样式设计的热门选择，因为它们与React组件紧密集成。例如，它们允许样式在运行时根据React props 进行更改。此外，默认情况下，大多数此类系统会将所有样式限定在相应的组件中。

6. React有哪些性能优化策略？

使用 useMemo

useMemo是一个用于缓存 CPU 开销大函数的React hook 。由于组件重新渲染而反复调用CPU 开销大函数可能会导致渲染速度变慢。

useMemo钩子可以用来缓存此类函数。通过使用useMemo，CPU 开销较大的函数仅在需要时才会被调用。

useCallback可以用来获得类似的结果。

延迟加载

延迟加载是一种用于减少 React 应用加载时间的技术。通过在用户浏览应用程序时加载组件，它有助于将 Web 应用程序性能风险降至最低。

7.什么是道具钻孔以及如何避免它？

在开发React应用程序时，有时需要将数据从层次结构中较高的组件传递到深度嵌套的组件。为了在这些组件之间传递数据，我们从源组件传递 props，并继续将 prop 传递给层次结构中的下一个组件，直到到达深度嵌套的组件。

使用的缺点prop drilling是原本不应该知道数据的组件可以访问数据，而且代码变得更难维护。

Prop drilling可以使用Context API或某种形式的状态管理库来避免。

8. 该组件是什么StrictMode？为什么要使用它？

<StrictMode />是React内置的一个组件，用于提供组件中潜在问题的额外可见性。假设应用程序正在以开发模式运行。在这种情况下，任何问题都会记录到开发控制台，但如果应用程序正在正式模式运行，则不会显示这些警告。

开发人员使用它<StrictMode />来查找诸如弃用的生命周期方法和遗留模式等问题，以确保所有React组件都遵循当前的最佳实践。

<StrictMode />可以应用于应用程序组件层次结构的任何级别，从而允许在代码库中逐步采用它。

9. Reactsynthetic events中有什么？

Synthetic events将不同浏览器原生事件的响应合并成一个API，确保跨浏览器的事件一致性。无论应用程序在哪个浏览器中运行，事件都是一致的。

const Component = () => {
  const handleClick = (e) => {
    e.preventDefault(); // synthetic event
    console.log("link clicked");
  };

  return <a onClick={(e) => handleClick}>Click me</a>;
};

10.为什么不建议state直接更新，而是使用setState调用？

常规的更新方式state是使用setState调用。如果不使用它，用户仍然可以修改状态，但不会更新DOM来反映新的状态。

const Component = () => {
  const [count, setCount] = useState(0);
  // let [count, setCount] = React.useState(0);

  const handleClickUpdate = () => {
    setCount((c) => c + 1);
    // count = count + 1; // will not update the DOM
  };

  return (
    <>
      {count}
      <button onClick={handleClickUpdate}>Click me</button>
    </>
  );
};

11. Reactportals中有什么？

动图

Portal是一种推荐的方法，用于将子项渲染到父组件DOM 层次结构之外的DOM节点中。

const Portal = ({ children }) => {
  // NOTE: it is advisable to create a new DOM node for the portal
  const portalRoot = document.getElementById("portal-root");

  return ReactDOM.createPortal(children, portalRoot);
};

感谢阅读

需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我

想看看我正在做什么吗？查看我的个人网站和GitHub

想联系我吗？请在LinkedIn上联系我

关注我的博客，每两周在Medium上获取最新资讯

常问问题

这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。

1. 我是初学者，该如何学习前端 Web 开发？
   可以参考以下文章：

   1. 前端流行语
   2. 前端开发路线图
   3. 前端项目构想
   4. 从初学者过渡到中级前端开发人员

2. 你能指导我吗？
   
   抱歉，我工作已经很忙了，没时间指导任何人。