React Native中Redux记忆化选择器引发不必要重渲染警告求助

问题根源分析 #

1. 选择器重复创建：在组件内部定义makeSelectMessages，每次组件渲染都会生成新的选择器实例，导致createSelector的记忆化缓存完全失效，即使参数相同也会重新计算并返回新引用。
2. Reducer违反Immutable原则：直接修改原状态对象（existingMessages = state.messagesData是引用赋值，后续修改该对象），Redux无法正确检测状态变化，同时干扰选择器的依赖判断逻辑。
3. 返回结果引用不稳定：Firebase每次返回的messagesData中，数组/对象都是新引用，即使内容未变，选择器也会判定结果变化，触发重渲染。

具体解决方案 #

1. 稳定选择器实例，避免重复创建 #

将选择器定义为接受id参数的工厂函数，放在组件外部（或单独的selectors文件），并在组件内用useMemo缓存生成的选择器：

// 放在ChatPage.js顶部或单独的selectors/messagesSelectors.js
import { createSelector, shallowEqual } from 'reselect'

const emptyArray = []

const makeSelectMessages = (id) => createSelector(
  // 注意：这里要和Reducer中的字段对应，原代码中Reducer状态字段是messagesData
  (state) => state.messages.messagesData,
  (messagesInfo) => {
    if (!messagesInfo) return emptyArray
    return messagesInfo[id] || emptyArray
  },
  // 可选：用浅比较判断结果是否相同，避免因引用变化触发重渲染
  { memoizeOptions: { resultEqualityCheck: shallowEqual } }
)

组件内使用方式：

// ChatPage.js组件内部
import { useSelector, useMemo } from 'react-redux'

const ChatPage = ({ id }) => {
  // 用useMemo缓存选择器实例，仅在id变化时重新生成
  const messages = useSelector(
    useMemo(() => makeSelectMessages(id), [id])
  )
  
  // 其他组件逻辑
}

2. 修复Reducer的Immutable更新 #

严格遵循Redux不可变更新原则，通过展开运算符创建新对象，避免修改原状态：

const initialState = {
  messagesData: {},
  starredMessages: {}
}

const messagesReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'setMessages': {
      const { id, messagesData } = action.payload
      return {
        ...state,
        messagesData: {
          ...state.messagesData,
          [id]: messagesData
        }
      }
    }
    // 其他action处理
    default:
      return state
  }
}

3. 过滤Firebase不必要的Dispatch #

在onValue回调中，先比较新数据与当前状态数据，仅当内容真正变化时才触发dispatch：

import { useSelector, useEffect } from 'react-redux'
import { shallowEqual } from 'react-redux'

// ChatPage组件内部
const ChatPage = ({ chatId, dispatch }) => {
  const currentMessages = useSelector(
    state => state.messages.messagesData[chatId]
  )

  useEffect(() => {
    const messagesRef = child(dbRef, `messages/${chatId}`)
    const unsubscribe = onValue(messagesRef, (messagesSnapshot) => {
      const newMessagesData = messagesSnapshot.val()
      // 浅比较新数据与当前状态，仅不同时才dispatch
      if (!shallowEqual(newMessagesData, currentMessages)) {
        dispatch(setChatMessages({ chatId, messagesData: newMessagesData }))
      }
    })

    return () => unsubscribe()
  }, [chatId, currentMessages, dispatch])

  // 其他组件逻辑
}

内容的提问来源于stack exchange，提问作者devmun221