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

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

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

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

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

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

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

相关推荐
懒大王爱吃狼1 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
劲夫学编程1 小时前
leetcode:杨辉三角
算法·leetcode·职场和发展
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
鱼跃鹰飞9 小时前
大厂面试真题-简单说说线程池接到新任务之后的操作流程
java·jvm·面试
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询