面试前端八股文十问十答第九期

最新推荐文章于 2024-09-27 18:45:08 发布

程序员小白条

最新推荐文章于 2024-09-27 18:45:08 发布

阅读量1.1k

点赞数 21

分类专栏：面试八股文系列文章标签：面试前端职场和发展八股文项目实战 React 面试必备

本文链接：https://blog.csdn.net/qq_67358181/article/details/137423332

版权

面试八股文系列专栏收录该内容

147 篇文章 30 订阅

订阅专栏

面试前端八股文十问十答第九期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）React 事件机制，React 16 和 React 17 事件机制的不同

React 事件机制是指在 React 应用中处理用户交互的方式。在 React 16 中，事件处理是通过合成事件来实现的，即将所有事件委托给 document，并通过事件冒泡和事件委托来处理事件。这种方式效率较高，但可能会导致一些事件处理的问题。而在 React 17 中，事件处理机制进行了一些优化，使用了新的事件代理系统来处理事件，避免了一些潜在的问题，并提高了事件处理的性能。

2）class component

class component 是 React 中的一种组件类型，通过 ES6 的 class 语法来定义组件。class component 是 React 16 之前主要的组件类型，它可以包含状态（state）和生命周期方法（lifecycle methods），并通过 this 来访问组件的状态和方法。在 React 16.8 之后，引入了 Hooks，使函数组件也可以拥有状态和生命周期的特性，逐渐替代了 class component。

3）对函数式编程的理解

函数式编程是一种编程范式，它将计算视为数学函数的求值，并避免使用状态和可变数据。函数式编程强调函数的纯粹性和不可变性，通过组合函数和使用高阶函数来实现复杂的功能。在 React 中，函数式编程的思想被广泛应用，例如使用纯函数来处理组件的渲染逻辑，使用 Hooks 来管理组件的状态和副作用，以及通过函数式组件来实现组件的复用和组合。函数式编程可以使代码更加简洁、可维护和可测试。

4）react hooks

React Hooks 是 React 16.8 版本引入的新特性，它允许在函数组件中使用状态和其他 React 特性，如生命周期方法和上下文。Hooks 提供了一种更简洁、可复用和易于测试的方式来编写组件逻辑，使函数组件可以拥有类组件的功能。常用的 Hooks 包括 useState、useEffect、useContext、useReducer 等。

5）为什么不能在条件语句中写 hook

不能在条件语句中写 Hook 的原因是因为 React 要求在每次组件渲染时，Hook 的调用顺序必须保持一致。如果在条件语句中写 Hook，可能会导致 Hook 的调用顺序发生变化，从而引发一些意想不到的 bug。为了避免这种情况，React 规定 Hook 必须在函数组件的最顶层使用，不能在循环、条件语句或嵌套函数中调用。

6）HOC 和 hook 的区别

HOC（Higher Order Component）和 Hook 是 React 中用于组件复用和逻辑抽象的两种不同方式。HOC 是一种模式，它是一个接收组件并返回新组件的函数。HOC 可以用来包装组件，添加额外的功能或逻辑，例如添加验证、权限控制等。而 Hook 是一种函数，用于在函数组件中复用状态和逻辑。Hook 提供了一种更简洁和直观的方式来共享组件之间的状态和行为。区别在于，HOC 是通过包装组件来实现复用逻辑，而 Hook 是通过在函数组件中调用 Hook 函数来实现逻辑的复用。另外，HOC 可能会导致组件层级嵌套过深，而 Hook 可以更好地解决这个问题。

7）useEffect 和 useLayoutEffect 区别

useEffect 和 useLayoutEffect 都是 React 中用于处理副作用的 Hook。它们之间的主要区别在于触发时机不同。useEffect 是在组件渲染之后执行，而 useLayoutEffect 是在 DOM 更新之前执行。useEffect 会在浏览器绘制完成后执行，而 useLayoutEffect 会在浏览器绘制之前执行，可以在浏览器绘制之前同步地修改 DOM。

8）useEffect 依赖为空数组与 componentDidMount 区别

当 useEffect 的依赖项为空数组时，useEffect 只会在组件挂载后执行一次，相当于 componentDidMount。这是因为 useEffect 的依赖项为空数组时，表示该 effect 不依赖于任何值，只需在组件挂载和卸载时执行一次即可。而 componentDidMount 是 class 组件中的生命周期方法，只在组件挂载后执行一次。

9）React.memo() 和 React.useMemo() 的区别

React.memo() 和 React.useMemo() 都是用于性能优化的 Hook。React.memo() 是一个高阶组件，用于对组件进行浅比较，避免不必要的重新渲染。React.useMemo() 是一个 Hook，用于记忆计算结果，只在依赖项变化时重新计算。区别在于，React.memo() 是对组件进行浅比较的优化，而 React.useMemo() 是对计算结果进行记忆的优化。

10）React.useCallback() 和 React.useMemo() 的区别

React.useCallback() 和 React.useMemo() 都是用于性能优化的 Hook。React.useCallback() 用于返回一个记忆化的回调函数，只在依赖项变化时重新创建。React.useMemo() 用于返回一个记忆化的值，只在依赖项变化时重新计算。区别在于，React.useCallback() 返回的是一个函数，而 React.useMemo() 返回的是一个值。React.useCallback() 通常用于优化传递给子组件的回调函数，而 React.useMemo() 通常用于优化计算结果。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

Github & Gitee 前后端总计已经 1000+ Star，1.5W+ 访问！

⭐点赞⭐收藏⭐不迷路！⭐