2024前端面试准备5-React相关

1. React 事件机制

​ React并不是直接把事件绑定到div的真实DOM上的，而是在document(>=16绑定的document,17开始绑定到root元素，方便微前端处理)处通过事件代理的方式，统一绑定了所有事件，然后根据冒泡上来的事件，将事件内容封装并交给真正的处理函数进行运行。这样的方式不仅仅减少了内存消耗，而且方便了React统一管理和事务机制。

​ 合成事件并不是原生浏览器事件而逝React自己模拟实现的合成事件。在React底层，主要对合成事件做了两件事：

• 事件委托： react会把所有事件绑定到结构的最外层，使用统一的事件监听器，这个事件监听器上维持了一个映射来保存所有组件内部事件监听和处理函数。
• 自动绑定：react组件中，每个方法的上下文都会自动的绑定this为当前组件。

合成事件优点：

​ 1. 兼容所有浏览器，能更好的跨平台。

​ 2. 将事件统一存放，避免了频繁的新增和删除（垃圾回收机制）。

​ 3. 方便react统一管理和事务机制。

2. React 高阶组件（HOC）、Render props、hooks 有什么区别

• HOC：是基于React的组合特性而形成的设计模式，HOC接受一个组件作为参数，返回一个新的组件，是纯函数，没有副作用。优点：逻辑复用不影响被包裹组件的内部逻辑。缺点：props传递过程中容易重名被覆盖、容易层级嵌套过深
• Render props：指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术。具有render prop 的组件接受一个返回React元素的函数，将render的渲染逻辑注入到组件内部。优点：数据共享，可以传递state给调用者。缺点：无法在return语句外访问数据、嵌套地狱。
• hooks: 它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。优点：能解决上述两者的缺点 。注意点：hook只能在组件顶层使用，不可在分支语句中使用。

总结：这三个都是目前React中解决代码复用的主要方式，但是hoc和render props都有特定的使用场景和明显的缺点。hook让组件逻辑复用更简洁明了，同时也解决了hoc和render props的一些缺点。

3. 对React-Fiber的理解，它解决了什么问题？

​ react在渲染时，会递归对比VDOM，找出需要变动的节点，然后同步更新他们，这个过程期间大量的计算，react会占据浏览器资源，导致用户触发的事件得不到响应，并且导致掉帧，让用户感觉明显卡顿。Fiber架构，对这种大量的计算变成可中断的，对整体任务进行切片，分批延时对DOM进行操作，避免一次性操作大量DOM，通过某些合理的调度策略，合理的分配资源，从而提高浏览器的用户响应速度，同时兼顾任务执行效率。

4. PureComponent memo的理解

PureComponent标识一个纯组件，通常用来优化性能，减少render函数的执行次数，从而提高组件的性能。在React中当props或state发生变化时，可以通过生命周期中的shouldComponentUpdate函数执行return false来阻止组件的更新，从而减少不必要的reader执行，purecomponent会对shouldComponentUpdate做一层浅比较，浅比较会忽略属性和或状态突变情况，如果是引用数据类型的数据，只会比较不是同一个地址，而不会比较这个地址里面的数据是否一致。其实也就是数据引用指针没有变化，而数据发生改变的时候render是不会执行的。render函数不执行，省去虚拟DOM的生成和对比过程，达到提升性能的目的。

memo同PureComponent十分类似，不用的点是只能用于函数组件。

5.哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？

1. setState()被调用会触发render，setState传入null时，不会触发render
2. 父组件重新渲染，react中父组件重新渲染，子组件会无条件跟着重新渲染

重写渲染会对比新旧两个VNode，根据差异的类型，更新Vnode。

6.React中可以在render访问refs吗？为什么？

不可以，render 阶段 DOM 还没有生成，无法获取 DOM。DOM 的获取需要在显示和更新的生命周期中获取。

7. 对React的插槽(Portals)的理解

portals可以使得组件可以脱离父组件层级挂载在DOM树的任何位置，一般用于组件有可能被其他元素遮挡时，兼容低版本浏览器使用，例如：对话框，模态窗。

8. 对 React context 的理解

context提供了一个父组件向所有子孙组件共享数据的能力，简单说就是，当你不想在组件树中通过逐层传递props或者state的方式来传递数据时，可以使用Context来实现跨层级的组件数据传递。例如：语言、主题

9. React中什么是受控组件和非控组件？

页面中的所有输入类的DOM如果是现取现用的就是非受控组件，如果是通过setState将输入值存在state中，需要时再从state中取出，数据受state控制的组件，就是受控组件。

10.Class组件与函数组件有什么异同？

组件是 React 可复用的最小代码片段，它们会返回要在页面中渲染的 React 元素。所以无论是函数组件还是类组件，在使用方式和最终呈现效果上都是完全一致的。不同的是Class组件是基于面向对象编程的，它主打的是继承、生命周期等核心概念；而函数组件内核是函数式编程，主打的是 immutable、没有副作用、引用透明等特点。但现在由于 React Hooks 的推出，生命周期概念的淡出，函数组件可以完全取代类组件。其次继承并不是组件最佳的设计模式，官方更推崇“组合优于继承”的设计概念，所以类组件在这方面的优势也在淡出。

11.setState 调用之后发生了什么？是同步还是异步？

在代码调用setSate函数后，React会将传入的参数对象于组件当前的状态合并，然后触发调和过程，经过调和后，React会以相对高效的方式根据新的状态构建React元素树，然后会自动计算出新树与老树的节点差异，根据差异对界面进行最小化重渲染。如果在短时间频繁调用setState，react会将state的改变加入到队列中，在合适的时机，批量更新state和视图，达到提高性能的效果。

setState并不是单纯的异步/同步，会根据批处理状态选择是先存进队啦还是直接更新，在<18的React版本中，如果在React可以控制的地方，就是先存队列异步处理，比如生命周期和合成事件中；如果无法控制的地方，比如绑定的原生事件，定时器等事件中，就只能同步更新。不过在react18以后，无论是什么样的语法环境，setState都是异步更新，但是可以使用flishSync方法，使其变为同步。

12.在React中组件的this.state和setState有什么区别？

this.state通常是用来初始化state的，this.setState是用来修改state值的。如果初始化了state之后再使用this.state，之前的state会被覆盖掉，如果使用this.setState，只会替换掉相应的state值。所以，如果想要修改state的值，就需要使用setState，而不能直接修改state，直接修改state之后页面是不会更新的。

13.对 Redux 的理解，主要解决什么问题？

Redux是一个用来管理数据状态和UI状态的JavaScript应用工具。同VueX一样采用单向数据流模式，Redux 提供了一个叫 store 的统一仓储库，组件通过 dispatch 将 state 直接传入store，不用通过其他的组件。并且组件通过 subscribe 从 store获取到 state 的改变。所有的组件都可以从 store 中获取到所需的 state，当dispatch action改变state的时候，会自动更新页面。首先，用户（通过View）发出Action，发出方式就用到了dispatch方法，然后，Store自动调用Reducer，并且传入两个参数：当前State和收到的Action，Reducer会返回新的State，State—旦有变化，Store就会调用监听函数，来更新View。异步请求可以使用redux-thunk中间件来处理。

14. Redux 和 Vuex 有什么区别

vuex 弱化 dispatch，通过commit进行 store状态的一次更变；取消了action概念，不必传入特定的 action形式进行指定变更；弱化reducer，基于commit参数直接对数据进行转变，使得框架更加简易;

15. 为什么 useState 要使用数组而不是对象

useState 返回的是 array 而不是 object 的原因就是为了降低使用的复杂度，返回数组的话可以直接根据顺序解构，而返回对象的话要想使用多次就需要定义别名了。

16. React Hook 的使用限制和注意点有哪些？

• 不要在循环、条件或嵌套函数中调用 Hook，必须始终在 React函数的顶层使用Hook；

  因为 Hooks 的设计是基于数组实现。在调用时按顺序加入数组中，如果使用循环、条件或嵌套函数很有可能导致数组取值错位，执行错误的 Hook。

• 使用useState时候，使用push，pop，splice等直接更改数组对象的坑，要用不可变数据。

• useState设置状态的时候，只有第一次生效，后期需要更新状态，必须通过useEffect

• 善用useCallback useMemo

17.对虚拟 DOM 的理解？虚拟 DOM 主要做了什么？虚拟 DOM 本身是什么？

从本质上来说，虚拟Dom是一个JS的对象，通过对象的方式来标识DOM结构。将页面的状态抽象为js的对象，配合不同的渲染工具，使跨平台渲染成为可能，通过事务处理机制，将多次DOM修改的结构一次性的更新到页面上，从而有效的减少页面的渲染次数，减少修改DOM导致的重绘重排次数，提高渲染性能。

18.虚拟 DOM 的引入与直接操作原生 DOM 相比，哪一个效率更高，为什么？

虚拟DOM得效率不一定比原生的效率高，比如说值改了一个节点的情况下，多了一层虚拟DOM得计算，怎么都不可能比得过直接操作原生DOM。虚拟 DOM 的优越之处在于，它能够在提供更爽、更高效的研发模式（也就是函数式的 UI 编程方式）的同时，仍然保持一个还不错的性能。