React面试题二_react saga面试题目-CSDN博客

本文链接：https://blog.csdn.net/m0_59498406/article/details/135421739

一、React都有哪些hooks，如何使用?

1)useState：用于在函数组件中使用状态（state）。它返回一个数组，第一个元素是当前状态的值，第二个元素是更新状态的函数。可以通过调用这个函数来更新状态的值。

2)useEffect：用于在函数组件中执行副作用操作，例如网络请求、订阅事件等。它在组件渲染完成后执行，并且可以通过指定依赖项来控制何时执行或清理副作用。

3)useContext：用于在函数组件中使用上下文（context）。它接收一个上下文对象，并返回该上下文的当前值。

4)useRef：用于在函数组件中创建可变的引用。它返回一个可变的 ref 对象，可以将其与 DOM 元素或其他组件实例关联起来。

5)useMemo：用于在函数组件中进行记忆化计算。它接收一个函数和一个依赖数组，并返回函数的计算结果。只有在依赖项发生变化时，才会重新计算结果。

6)useCallback：用于在函数组件中创建记忆化的回调函数。它接收一个回调函数和一个依赖数组，并返回一个记忆化的回调函数。

7)useReducer：用于在函数组件中管理复杂的状态逻辑。它接收一个 reducer 函数和初始状态，并返回当前状态和 dispatch 函数，用于派发状态更新的操作。

8)useRef：用于在函数组件中创建可变的引用。它返回一个可变的 ref 对象，可以将其与 DOM 元素或其他组件实例关联起来。

二、React中setState执行机制？

在React中，setState 是用于更新组件状态（state）的方法，但它并不立即执行状态的更新，而是触发一系列后续操作，遵循以下执行机制：

setState 调用：当你调用 this.setState(newState, callback) 来更新组件的状态时，React 将新的状态对象 newState 存储在队列中，但不会立即进行状态更新。
状态更新合并：React 会将多个 setState 调用中的状态更新合并成一个单一的状态更新操作，以提高性能。
触发调和过程：React会使用合并后的状态来触发“调和过程”（Reconciliation）。在调和过程中，React会比较新旧状态，计算出需要更新的部分。
生成虚拟DOM：React将新状态映射到虚拟DOM树（Virtual DOM），并与之前的虚拟DOM树进行比较，找出差异。
计算差异：React使用虚拟DOM比较算法来计算新旧虚拟DOM之间的差异。这一过程通常被称为“协调”（Reconciliation）。
更新实际DOM：React将差异应用于实际DOM，只更新需要更改的部分，从而减少浏览器的重排和重绘。
生命周期钩子：如果提供了 setState 的回调函数 callback，React会在状态更新后调用它。通常，callback 用于在状态更新完成后执行一些额外的操作，例如处理动画或获取更新后的DOM节点。

总结一下，React中的setState执行机制包括了将状态更新合并、生成虚拟DOM、计算差异、更新实际DOM和执行回调等步骤。这个机制的设计是为了优化性能，减少不必要的DOM操作，并确保React的渲染和更新是高效和可预测的。这也是React的核心机制之一，帮助开发者构建高性能的用户界面。

三、React的事件机制

React的事件机制是一种用于处理用户界面事件的方式，它建立在原生DOM事件的基础上，提供了一种更高级、更一致的方式来处理事件。以下是React的事件机制的主要特点和工作原理：

1. 合成事件（Synthetic Events）：

React引入了合成事件的概念，它是一种React自己实现的事件系统，用于封装原生浏览器事件。合成事件提供了一致性的接口，无论在不同浏览器中事件如何实际触发，React都可以提供相同的事件对象。

2. 事件绑定：

在React中，你可以使用类似HTML中的onClick、onMouseDown等属性来绑定事件处理程序。这些属性的值通常是一个函数，当事件被触发时，React会调用这些函数。

<button onClick={handleClick}>Click Me</button>

3. 事件处理程序：

事件处理程序是普通的JavaScript函数，它们接收一个合成事件对象作为参数，可以访问事件的信息，如类型、目标、位置等。你可以在事件处理程序中执行任何自定义逻辑。

function handleClick(event) {
  // 访问事件信息
  console.log('Button clicked');
}

4. 事件代理：

React将事件处理程序注册在组件的顶层，然后使用事件代理来处理实际的DOM事件。这意味着React维护一个事件监听器，而不是在每个DOM元素上都添加监听器，以提高性能。

5. 合成事件对象：

React的合成事件对象提供了一致性接口，使开发者不需要关心不同浏览器之间的事件差异。合成事件对象包含了诸如event.type、event.target等属性，以便访问事件的相关信息。

6. 事件冒泡和捕获：

React事件系统也支持事件冒泡和捕获阶段，开发者可以选择在事件的不同阶段处理事件。

7. 阻止默认行为和停止冒泡：

合成事件对象中提供了方法来阻止事件的默认行为（event.preventDefault()）和停止事件冒泡（event.stopPropagation()）。

React的事件机制使开发者能够以一种更一致和高级的方式来处理事件，同时隐藏了浏览器之间的差异。这有助于构建具有复杂交互的用户界面，并提高了开发效率。

四、Redux中间件的理解？常用的中间件有哪些？实现原理？

Redux中间件是一种用于扩展Redux的功能的机制，它允许你在Redux的dispatch过程中添加自定义的逻辑。中间件在Redux应用中的常见用途包括异步操作、日志记录、路由导航、状态持久化等。通过中间件，你可以在action被派发到reducer之前或之后执行一些额外的操作，以满足不同的需求。

Redux中间件的主要原理是基于函数的洋葱模型（Onion Model），它允许你在Redux流程的不同阶段添加自定义逻辑，这些逻辑会按顺序执行。Redux中间件通常由一个函数构成，该函数返回一个函数，这个返回的函数接受`store.dispatch`和`store.getState`等参数，然后返回一个新的`dispatch`函数。这个新的`dispatch`函数可以拦截、修改、延迟或增强action派发的过程。

常用的Redux中间件有：

1. **redux-thunk**：允许你派发函数而不仅仅是普通的action对象，这使得处理异步操作变得容易。当你需要执行异步操作时，可以返回一个函数，该函数接收`dispatch`和`getState`作为参数，然后可以在异步操作完成后再次派发action。

2. **redux-saga**：基于ES6生成器的中间件，用于处理复杂的异步操作、副作用和并发流。它允许你以声明性的方式管理和监视action的流，处理各种复杂的异步任务。

3. **redux-logger**：用于在控制台中记录Redux操作和状态的中间件，用于开发和调试过程。

4. **redux-persist**：用于将Redux状态持久化到本地存储，以便应用程序在重新加载时保持状态。

5. **redux-observable**：基于RxJS的中间件，用于处理异步操作和副作用。它允许你使用RxJS的强大功能来管理和监视action流。

Redux中间件的实现原理是基于函数的装饰器模式，它通过包装`store.dispatch`方法，来拦截和处理action。中间件的核心是一个函数，该函数接受`store.dispatch`作为参数，并返回一个新的函数，这个新函数会在派发action时执行额外的逻辑。这使得中间件可以在不改变Redux核心逻辑的情况下，添加各种自定义功能。

五、受控组件和非受控组件的理解？应用场景？

在React中，受控组件（Controlled Components）和非受控组件（Uncontrolled Components）是两种处理表单元素和用户输入的不同方式。

受控组件（Controlled Components）：

定义：受控组件是一种通过React的状态（state）来控制用户输入的组件。这意味着组件的值和状态受React的控制，通常通过value属性来绑定表单元素的值，以及通过事件处理程序来处理用户输入。
应用场景：受控组件适用于需要在React状态中进行数据处理、验证和响应的情况。它们允许你以一种可预测的方式管理表单数据，对输入数据进行验证和转换，并实现复杂的表单交互逻辑。受控组件通常用于需要对用户输入进行处理的情况，例如表单提交前的数据验证、实时输入搜索和实时反馈。

非受控组件（Uncontrolled Components）：

定义：非受控组件是一种不使用React状态（state）来控制用户输入的组件。它们允许表单元素的值直接由DOM自身管理，而不受React的干预。通常，你通过ref来访问表单元素的值。
应用场景：非受控组件适用于不需要对用户输入进行React状态管理的情况，或者需要与第三方库或既有代码集成的情况。它们可能更容易实现，但在处理复杂的表单逻辑时可能更难维护，因为你需要手动处理数据验证和转换，以及编写自定义逻辑来处理用户输入。

选择受控组件还是非受控组件取决于具体情况。一般来说，对于大多数React应用，受控组件是首选，因为它们提供了更好的数据流控制和React状态管理。然而，非受控组件可能在某些情况下更方便，尤其是当与第三方库或既有代码交互时。

总的来说，受控组件和非受控组件是React中处理表单元素和用户输入的两种不同策略，你可以根据具体需求选择合适的方法。