React-Redux 性能优化与数据规范化实战指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00502/article/details/148323971

React-Redux 性能优化与数据规范化实战指南

redux 项目地址: https://gitcode.com/gh_mirrors/red/redux

前言

在构建 React-Redux 应用时，随着应用规模的增长，性能问题和数据管理复杂度会逐渐显现。本文将深入探讨如何通过选择器优化、组件渲染优化以及数据规范化来提升应用性能。

选择器优化：使用 createSelector

什么是记忆化选择器

记忆化选择器是一种能够缓存计算结果的选择器函数，当输入参数未发生变化时，直接返回缓存结果，避免重复计算。在 Redux Toolkit 中，我们可以使用 createSelector 来创建这样的选择器。

为何需要记忆化选择器

考虑以下场景：当组件从 Redux store 中获取数据时，如果每次渲染都重新计算选择器结果，即使数据未发生变化，也会造成不必要的计算开销。记忆化选择器可以有效解决这个问题。

实现示例

import { createSelector } from '@reduxjs/toolkit'

// 基础选择器
const selectAllPosts = state => state.posts

// 记忆化选择器
export const selectPostsByUser = createSelector(
  [selectAllPosts, (state, userId) => userId],
  (posts, userId) => posts.filter(post => post.user === userId)
)

组件渲染优化

React-Redux 渲染机制

当使用 useSelector 时，Redux 会在每次 dispatch action 后比较选择器返回的值。如果值发生变化，组件会重新渲染。

优化策略

精细化选择器：只选择组件真正需要的数据
使用浅比较：对于对象/数组，确保只在引用变化时触发渲染
拆分组件：将频繁更新的部分与稳定部分分离

实践案例

// 优化前：整个 posts 数组变化都会导致渲染
const posts = useSelector(state => state.posts)

// 优化后：只有当特定 post 变化时才渲染
const post = useSelector(state => selectPostById(state, postId))

数据规范化

为何需要数据规范化

在社交应用示例中，我们遇到了以下问题：

数据嵌套导致更新困难
重复数据存储浪费内存
查找效率低下

使用 createEntityAdapter

Redux Toolkit 提供了 createEntityAdapter 来简化规范化数据的处理：

import { createEntityAdapter } from '@reduxjs/toolkit'

const postsAdapter = createEntityAdapter({
  sortComparer: (a, b) => b.date.localeCompare(a.date)
})

const initialState = postsAdapter.getInitialState()

// 在 reducer 中使用适配器方法
const postsSlice = createSlice({
  name: 'posts',
  initialState,
  reducers: {
    postAdded: postsAdapter.addOne,
    postUpdated: postsAdapter.updateOne
  }
})

// 自动生成的 selector
export const {
  selectAll: selectAllPosts,
  selectById: selectPostById,
  selectIds: selectPostIds
} = postsAdapter.getSelectors(state => state.posts)

规范化数据结构

规范化后的数据结构通常如下：

{
  entities: {
    "post1": { id: "post1", title: "First Post", user: "user1" },
    "post2": { id: "post2", title: "Second Post", user: "user2" }
  },
  ids: ["post1", "post2"]
}

性能优化实战：通知功能

问题分析

在通知功能实现中，我们面临以下性能挑战：

频繁的通知更新
未读/已读状态管理
时间显示格式化开销

优化方案

批量更新通知：使用 push 和展开运算符一次性添加多个通知
排序优化：在 reducer 中只排序一次
选择性渲染：仅当通知状态变化时更新相关组件

extraReducers(builder) {
  builder.addCase(fetchNotifications.fulfilled, (state, action) => {
    // 批量添加
    state.push(...action.payload)
    // 标记新旧状态
    state.forEach(notification => {
      notification.isNew = !notification.read
    })
    // 单次排序
    state.sort((a, b) => b.date.localeCompare(a.date))
  })
}