前端八股总结-React

总结一下React常见问题

（所以记忆是会消失的对吗，一阵不看就忘光了🥹）

0、React18的新特性

并发渲染

自动批处理

suspense

createRoot API（用于启用并发特性）

SSR流式传输

一、useState是如何记住上次的状态的

工作原理是通过在组件内部维护一个状态变量，以及提供一个函数来更新这个状态

每次组件渲染时，useState 都会记住上次的状态值，而不是重新初始化。这是因为 React 通过内部数据结构（如 fiber 树）跟踪状态变化。在组件的每次更新中，React 会查找与当前组件相对应的状态值，并返回它。

二、React生命周期

React生命周期是指组件从创建到销毁的整个过程。

指的是挂载、更新和卸载。

在类组件中通过生命周期方法来管理组件的生命周期。

在函数组件中，则是通过useState钩子来管理的。

useEffect(() => {
    // 组件挂载时执行的代码

    return () => {
        // 组件卸载时执行的清理代码
    };
}, [dependencies]); // 可选的依赖数组

• 挂载和卸载：

如果依赖数组为[]，效果只会在组件挂载的时候执行，在组件卸载的时候清理

• 更新：

如果依赖数组中包含变量，当这些变量发生变化时，useEffect会在每次更新的时候执行。

三、React和Vue的区别

（1）设计理念

React：

React 是一个库，专注于构建用户界面，特别是单页应用（SPA）。它采用了“组件化”设计思想，强调通过组合组件来构建复杂的用户界面。

Vue：

Vue 是一个渐进式框架，可以逐步引入，也可以用于构建大型应用程序。

（2）数据绑定

React：

• React 使用单向数据流。父组件向子组件传递数据，通过 props 进行通信。子组件不能直接修改父组件的状态。
• 需要使用 state 来管理组件的状态。

Vue：

Vue 支持双向数据绑定，通过 v-model 指令可以轻松实现。组件的 data 属性与视图保持同步，视图的变化会自动反映到数据上。

（3）模板语法

React使用JSX语法，Vue使用的是HTML和JS分开的逻辑

四、useMemo和useCallback

useMemo用于记忆（缓存）计算结果，可以避免在每次渲染时重新计算，只有在依赖项发生变化的时候才会重新计算。

useCallback用于记忆（缓存）函数实例，可以避免在每次渲染时创建新的函数实例，只有在依赖项发生变化的时候才会返回新的函数。这对于依赖于函数的子组件特别重要，因为如果传递给子组件的函数在每次渲染时都不同，子组件会被重新渲染，即使它们的 props 没有变化。通过使用 useCallback，你可以确保传递给子组件的函数实例在依赖项不变时保持一致，从而减少不必要的渲染。

五、HOOKS

（1）主要Hook

1、useState

用于在函数组件中添加状态，允许组件响应用户交互、数据请求等事件时更新自身的状态，从而重新渲染组件。

惰性初始状态：接受一个函数作为初始状态的参数，这个函数指挥在初始渲染时执行一次，适用于复杂的初始状态的计算。

2、useEffect

用于在函数组件中管理副作用。副作用指的是组件渲染以外需要执行的操作，例如：数据获取、订阅、手动DOM操作等等。

第一个参数是一个函数，包含副作用的逻辑。React在执行完选然后会调用这个函数。当组件卸载或依赖项更新的时候会调用返回的清理函数。

3、useRef

1、访问DOM元素，通过useRef创建的引用可以直接访问某个DOM元素的属性，而不需要在重新渲染组件的时候改变引用的内容。例如当需要访问某个输入框的值、控制焦点或者直接操作某个元素时，可以使用。

2、保存跨渲染的状态。useRef创建的引用不会因为组件的重新渲染而改变，这让它适合存储不影响渲染逻辑的变量。对于非显示状态的数据useRef是个不错的选择。

（2）为什么hook要保证顺序

为了React可以正确地将状态和副作用和相应的组件实例相关联。由于React是基于虚拟DOM的，对组件状态的更新和管理依赖于Hooks的调用顺序。如果顺序发生变化，React将无法正确识别哪些状态或副作用属于哪个组件。

如果在条件或循环语句调用hook，可能在某些情况下跳过对某些hooks的调用，会导致React认为某个hook的状态已经被销毁或者未定义，从而引发错误。

React在组件每次重新渲染时都会重新执行函数组件，如果hook的调用顺序不一致，React可能会根据上一次的渲染错误地更新state或effect。

React的设计目标之一是性能优化，通过固定的调用顺序，React可以在内部进行更多的优化。例如React可以根据hooks调用的顺序快速识别和比较组件状态，从而高效更新组件。

六、React的并发特性

旨在提升应用的用户体验和性能。这些特性可以让React在不阻塞主线程的情况下更高效地处理用户交互，帮助开发者创建相应迅速的应用。（频繁更新、非紧急更新、渲染性能）

（1）自动批处理

React18之前，只会在事件处理器中自动批处理状态更新，在React18中自动批会在任何更新中自动执行。多个setState调用会自动合并，减少渲染次数，提高性能。

（2）优先级更新

允许React通过优先级更新模型，决定哪些更新应该优先处理。

（3）过渡

transition是一种让React将一些状态更新标记为非紧急。使用startTransition包裹这些更新，React会优先响应紧急更新，标记为过渡的更新会稍后执行。

（4）useDeferredValue和useTransition

useDeferredValue适合在高频率更新时缓解性能问题，用于在渲染非紧急内容时延迟展示结果，避免卡顿。

useTransition用于标记更新为过渡，它会返回一个布尔值表示是否处于过渡状态，以便在过渡状态过程中提供用户反馈。

（5）并发渲染

使得React可以暂停渲染并在需要时恢复。在复杂界面比较有用。并发渲染的核心思想是让 React 可以暂停、恢复或放弃渲染任务，以便用户交互能够优先得到响应。

七、什么样的函数可以称为纯函数？

一个函数要被称为纯函数，必须满足以下条件：

• 输入确定，输出唯一：对于相同的输入，总是返回相同的输出。
• 无副作用：函数运行时不会改变外部状态，也不会依赖外部的可变状态。它只能根据输入进行运算，并返回新的数据，而不会修改任何传入的参数。