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

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

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

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

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

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+ 访问!

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

相关推荐
雯0609~11 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ14 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z20 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
程序猿进阶34 分钟前
堆外内存泄露排查经历
java·jvm·后端·面试·性能优化·oom·内存泄露
彭世瑜44 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40444 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序1 小时前
vue3 封装request请求
java·前端·typescript·vue
临枫5411 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript