Hello World

Appearance

On This Page

面试题[React] ​

1. React 基础知识 ​

1.1 什么是 JSX？它与 HTML 有什么区别？ ​

1.2 Function Component 相比 Class Component 有哪些优势 ​

1.3 React Hooks ​

1.4 React Context ​

1.5 React 的错误边界（Error Boundary） ​

1.6 Fiber 架构 ​

2. React 拓展知识 ​

2.1 函数式编程是什么？有哪些应用场景？ ​

函数式编程（Functional Programming，简称 FP）是一种编程范式，它将计算机程序视为数学中的函数计算，强调函数的输入输出是确定的，不会受到外部状态的影响。函数式编程一般采用无副作用、不可变数据等特性，使得代码更加模块化、可复用、易于测试和推理等。

函数式编程中的函数是一等公民，即可以像其他类型的数据一样被传递、赋值、返回等。函数式编程也强调函数的高阶抽象能力，通过组合和柯里化等技巧实现复杂的功能。

函数式编程适用于需要处理大量数据的场景，例如数据分析、机器学习、图像处理等。在这些场景中，函数式编程的无副作用、不可变数据等特性可以提高程序的性能和稳定性。函数式编程还适用于需要编写高度可复用的代码库、需要构建高层次抽象的系统等场景。

除此之外，函数式编程还可以用于实现异步编程、事件驱动编程、响应式编程等，它们都是函数式编程的应用场景。例如在 JavaScript 中，Promise 和 RxJS 都是基于函数式编程的思想实现的。

总之，函数式编程是一种强调函数抽象、模块化、不可变性等特性的编程范式，适用于处理大量数据、实现高度可复用代码库、构建高层次抽象的系统等场景。

2.2 函数式编程中的无副作用 ​

函数式编程的一个核心概念是无副作用（Referential Transparency），也就是函数的执行只依赖于输入参数，不会对外部环境产生影响。副作用指的是函数执行过程中对外部环境进行了修改或产生了其他可观察的行为，比如修改全局变量、写入文件、发送网络请求等。

函数式编程强调无副作用的好处在于：

  1. 可靠性：由于函数的结果仅取决于输入参数，相同的输入永远得到相同的输出，不会受到外部环境的变化影响，因此更容易推断和验证函数的行为。
  2. 可测试性：函数无副作用意味着可以更容易地进行单元测试，只需关注输入和输出，而无需关心函数内部的状态变化。
  3. 可组合性：无副作用的函数更容易进行组合，通过将多个函数连接在一起，形成更复杂的功能，而不需要担心它们之间的相互影响。

然而，并非所有的程序都可以完全避免副作用，因为现实世界中很多任务都需要与外部环境进行交互。在函数式编程中，通常会将具有副作用的操作封装在纯函数的边界之外，以保持主要的业务逻辑的纯洁性。

函数式编程并不是要完全消除副作用，而是通过限制和管理副作用的方式来提高程序的可靠性、可测试性和可组合性。

2.3 Redux 和 Mobx 和其它 React 状态管理的区别 ​

2.4 React 应用的生产环境中，怎么定位到具体错误代码行数 ​

在 React 应用的生产环境中，要定位具体的错误代码行数，可以采取以下几种方法：

  1. 使用 Source Map：
    • 在构建生产版本时生成 Source Map 文件。Source Map 是一个映射文件，可以将压缩后的代码映射回原始的开发代码，包括行数、列数等信息。
    • 当生产环境中出现错误时，浏览器会根据 Source Map 将错误定位到原始代码的行数和列数，从而帮助你准确定位问题所在。
  2. 错误边界（Error Boundary）：
    • 在 React 应用中使用错误边界来捕获并处理组件中的错误。你可以在错误边界的 componentDidCatch 方法中记录错误信息，包括错误的堆栈信息。
    • 在错误信息中包含堆栈信息，可以帮助你定位到具体出错的组件和代码行数。
  3. 使用监控和日志工具：
    • 集成监控和日志工具，如 Sentry、Bugsnag 等，这些工具可以捕获前端错误，并提供详细的错误信息，包括出错的文件、行数等。
    • 通过这些工具提供的错误报告，你可以快速定位到具体的代码行数，并了解错误发生的上下文信息。
  4. 手动添加调试信息：
    • 在代码中添加额外的调试信息，例如使用 console.log 输出变量的值或标识代码执行到了哪个阶段。
    • 这种方法虽然相对简单，但需要手动添加代码，并且可能会影响代码的性能和可读性。
  5. 使用浏览器开发者工具：
    • 在浏览器的开发者工具中，可以查看 JavaScript 控制台中的错误信息，并通过点击错误信息来跳转到具体的代码行数。
    • 这种方法适用于快速定位到错误发生的地方，但可能无法精确定位到原始的开发代码行数，特别是在代码经过压缩和混淆的情况下。

综上所述，结合使用 Source Map、错误边界、监控工具和浏览器开发者工具，可以帮助你在 React 应用的生产环境中准确定位到具体的错误代码行数。

2.5 React 应用中实现页面切换时保存数据不丢失并记忆滚动条位置 ​

在 React 应用中实现页面切换时保存数据不丢失并记忆滚动条位置，可以采取以下几种优化策略，以提升用户体验并减少页面闪烁：

1、使用 React Router 中的 <Route> 组件的 key 属性：

在 <Route> 组件中设置唯一的 key 属性，使得当路由切换时，React 不会重新渲染相同的组件，而是复用已经挂载过的组件，从而保留组件的状态和数据。

jsx
<Route key={location.pathname} path="/" exact component={Home} />
<Route key={location.pathname} path="/about" component={About} />

2、在组件中使用 React.memo 进行优化：

对于纯函数组件，可以使用 React.memo 进行包裹，以避免不必要的重新渲染。这样可以确保页面切换时只有必要的组件会重新渲染，减少页面闪烁。

jsx
const MemoizedComponent = React.memo(MyComponent);

3、使用 window.sessionStorage 或 window.localStorage 进行数据存储：

在组件卸载前将需要保存的数据存储到 sessionStorage 或 localStorage 中，在组件重新挂载时再从中恢复数据。这样可以确保数据不会在页面切换时丢失。

4、记忆滚动条位置：

  • 在页面切换时，监听 window 的 scroll 事件，将滚动条位置保存到状态或 sessionStorage 中。
  • 在页面重新加载或切换回来时，从状态或 sessionStorage 中恢复滚动条位置，使得用户可以无缝地恢复到之前的滚动位置。

5、使用 React 的 useEffect 钩子进行数据保存和恢复：

在组件中使用 useEffect 钩子监听组件的卸载和挂载事件，在卸载前将需要保存的数据存储起来，在挂载时再从存储中恢复数据。

jsx
useEffect(() => {
  // 在组件卸载前保存数据
  return () => {
    // 在组件重新挂载时恢复数据
  };
}, []);

通过以上优化策略，可以在页面切换时保持数据不丢失并记忆滚动条位置，同时减少页面闪烁，提升用户体验。