React相关面试题。

React面试题合集

• 「2021」高频前端面试题汇总之React篇（上） (opens new window)
• 35 道咱们必须要清楚的 React 面试题 (opens new window)

题目

• React setState是同步还是异步的? (opens new window)
• 什么是refs, 他的作用 (opens new window)

React 函数组件和class组件区别

提示

class组件特点：

• 有组件实例
• 有生命周期
• 有 state 和 setState

函数组件特点：

• 没有组件实例
• 没有生命周期
• 没有 state 和 setState，只能接收 props
• 函数组件是一个纯函数，执行完即销毁，无法存储 state

class 组件存在的问题：

• 大型组件很难拆分和重构，变得难以测试
• 相同业务逻辑分散到各个方法中，可能会变得混乱
• 复用逻辑可能变得复杂，如 HOC 、Render Props
• 所以 react 中更提倡函数式编程，因为函数更灵活，更易拆分，但函数组件太简单，所以出现了hook，hook就是用来增强函数组件功能的。

React浅析Hooks API的优点

提示

解决函数组件的缺点

1. 函数组件没有state；
2. 函数组件没有生命周期。

Hooks的优点

1. class组件比起 函数组件多了几行似乎不太能用三两句话就能理解的代码，这是我推崇函数组件的主要原因。
2. Hook使你在无需修改组件结构的情况下复用状态逻辑。我们经常维护一些组件，组件起初很简单，但是逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致。
3. Hooks将组件中相互关联的部分拆分成更小的函数，并且使你在非 class 的情况下可以使用更多的 React 特性。 Hook 提供了问题的解决方案，无需学习复杂的函数式或响应式编程技术。
4. React 组件一直更像是函数，而Hooks则拥抱了函数，使得React的框架理念更接近于Javascript。
5. Hook 和现有代码可以同时工作，你可以渐进式地使用，无需放弃原有的class组件。

什么是虚拟DOM，为什么要用他

提示

虚拟DOM就是用来模拟DOM结构的一个js对象。

优点： 1.虚拟 dom 相当于在 js 和 真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。减少对真实DOM的操作 2.虚拟 DOM 本质上是 JavaScript 对象，可以跨平台，例如服务器渲染、Weex 开发等。 3.虚拟 DOM 可以维护程序的状态，通过对比两次状态的差异更新真实 DOM。

Hooks

• useEffect和useLayoutEffect的区别 (opens new window)
• useMemo,useCallback的区别 (opens new window)
• useMemo,useCallback的区别 (opens new window)

生命周期

• 为什么废弃react生命周期函数？为什么弃用componentWillReceiveProps (opens new window)

合成事件

简要概述

简要概述

某元素触发事件后 -> 冒泡到document上(合成事件都绑定到document上) -> 实例化成统一的react event -> dispatchEvent将事件交由对应的处理器执行

为什么要使用合成事件机制?

1. 更好的兼容性和跨平台
2. 挂载到document上, 减少内存消耗, 避免频繁解绑
3. 方便事件的统一管理

• React 合成事件和原生事件的区别 (opens new window)
• React源码分析6 — React合成事件系统 (opens new window)
• react中事件处理时为什么要手动绑定this?以及合成事件 (opens new window)

源码分析合集

• React源码分析目录 (opens new window)