半山烟雨的博客

Appearance

redux 中的 action 是什么？ ​

查看详情

Action 是把数据从应用（页面上或接口请求返回处）传递到 store 的有效载荷，它是 store 数据的唯一来源。Action 本质上是一个包含 type 字段的 JS 对象。

redux 中的 reducer 是什么？ ​

查看详情

Reducers 指定了如何响应 actions 并更新 store，actions 只是描述了有事情发生了这一事实，而reducer描述如何更新 store。

redux 的工作流程 ​

查看详情
  • 用户点击按钮或者进入视图 dispatch 一个 action
  • store 自动调用 reducer，并传入两个参数：当前 state 和接收的 action，reducer 会返回新的 state
  • state 一旦有变化，store 就会调用监听函数，来更新 view

react-redux 是如何工作的？ ​

查看详情

react-redux 利用 react 的 context API 将 react 和 redux 绑定起来。react-redux 提供了三个主要的 API: Provider, usDispatch, useSelector。这三个 API 的作用是：

  • Provider: 用于将 redux 的 store 注入当前应用
  • usDispatch: 提供更改 redux 的 store 的能力
  • useSelector: 提供订阅 redux 的 store 的能力

useSelector的实现原理是什么？ ​

查看详情

useSelector 通过使用 React context 获取 Redux store，使用 selector 函数提取所需状态，并订阅 store 的变化。当 store 中的状态发生变化且影响到当前组件时，useSelector 会重新计算选取的状态并触发组件更新，从而实现数据与视图的同步。

  • selector 返回的结果可以是任何值，而不仅仅是一个对象。selector 的返回值将被作为 useSelector() hook 的返回值被使用。
  • 当 dispatch 一个 action 时，useSelector() 将对 selector 的前一个结果值和当前的结果值做一个引用比较。如果它们不同，该组件将被强制重新渲染。如果它们相同，组件将不会重新渲染。
  • useSelector() 默认使用严格的 === 引用全等检查，而不是浅层全等比较。可以修改useSelector的第二个参数以修改比较方式。

reselect 作用 ​

查看详情

  1. 提高性能: 在没有 Reselect 的情况下，每当 Redux store 更新时，所有依赖该 store 的组件都会重新计算其需要的数据，即使这些数据实际上没有变化。这会导致性能问题，尤其是在大型应用中。Reselect 通过记忆功能解决了这个问题。只要输入参数（通常是 Redux store 的某些部分状态）没有变化，selector 就不会重新计算结果，从而避免了不必要的重新渲染和性能开销。

  2. 简化代码: Reselect 使得创建和组合 selector 更加简洁和直观。它支持将多个简单的 selector 组合成一个复杂的 selector，从而使代码更具可读性和可维护性。

redux-thunk的作用是什么 ​

查看详情

redux-thunk 是一个 Redux 中间件，它的主要作用是让 Redux 能够处理异步操作。Redux 的设计理念是通过纯函数（reducer）来管理应用状态，但是在实际应用中，常常需要处理异步操作（例如，网络请求、定时任务等）。redux-thunk 通过扩展 Redux 的 dispatch 功能，使得 action creator 可以返回一个函数（thunk），而不仅仅是一个普通的 action 对象。

redux-toolkit是什么 ​

查看详情

Redux Toolkit（RTK）是 Redux 官方推荐的工具集，旨在简化 Redux 的使用，减少样板代码，提高开发效率。它提供了一系列简洁而强大的工具和最佳实践，以帮助开发者更容易地构建 Redux 应用。RTK 包含几个核心 API，如 configureStore、createSlice、createAsyncThunk 等。

除了redux之外还有哪些react的数据管理库？它们都有什么优缺点 ​

查看详情
  1. Redux Toolkit (RTK)：Redux 官方推荐的现代写法
  • 优点：
    • 配置少，封装了 createSlice、createAsyncThunk 等工具；
    • 内置不可变数据处理（immer），无需手动深拷贝；
    • 官方标准，生态最丰富，和各种中间件高度兼容；
    • 支持 TypeScript 良好。
  • 缺点： -仍需要一定样板代码（actions、slice、reducers）； -学习曲线比极简库略陡。
  1. Zustand：极简的状态管理库，由 Jotai 作者开发，React 生态中爆红的“轻量 Redux 替代品”。
  • 优点：
    • 使用纯函数 API，几行代码搞定状态；
    • 无需 Provider，直接 import 全局 store；
    • 支持中间件（devtools、persist）但可选；
    • 性能优秀，不依赖 Context 重新渲染机制。
  • 缺点：
    • 状态逻辑分散，缺乏 Redux 那种清晰的 action/reducer 流程；
    • 没有官方强约束，团队规范需要自己约定；
    • 异步逻辑、数据流可视化工具不如 Redux 生态完善。