Redux store任意状态变更触发组件重渲染导致VideoPlayer重启如何解决

问题根因 #

1. 组件订阅的Redux selector粒度太粗，任意状态变更都会触发整个父组件重渲染
2. 传递给视频组件的prop引用不稳定，每次渲染生成新对象导致子组件重挂载
3. reducer全量替换状态，放大了粗粒度selector的负面影响

修复步骤 #

1. 拆分细粒度selector #

只订阅视频组件实际用到的字段，避免无关状态变更触发重渲染：

// 替换原有全量返回dynamicForm的selector
export const selectVideoRequiredFields = createSelector(
  (state: RootState) => state.dynamicForm.title,
  (state: RootState) => state.dynamicForm.description,
  (state: RootState) => state.dynamicForm.iframeURL,
  (state: RootState) => state.dynamicForm.authorName,
  (title, description, sourceAddress, author) => ({ 
    title, description, sourceAddress, author 
  })
)

组件中仅引入该selector即可，其余form字段的更新不会再触发当前组件重渲染。如果组件还用到其他状态，单独拆分对应的selector，不要和视频依赖的字段混合。

2. 稳定子组件prop引用 #

你当前给timeStamp传递的是字面量对象{{ startTime: 0 }}，每次父组件渲染都会生成新的对象引用，直接触发子组件更新。可以将固定参数提取到组件外部，或者用useMemo缓存：

// 组件外定义固定值，引用不会变化
const DEFAULT_TIMESTAMP = { startTime: 0 }

const MyComponent = () => {
  const { title, description, sourceAddress, author } = useSelector(selectVideoRequiredFields)
  return (
    {sourceContentFound === false ? (
      <VideoPlayerDisabled />
    ) : (
      <VideoPlayerController
        title={title}
        description={description}
        sourceAddress={sourceAddress}
        author={author}
        timeStamp={DEFAULT_TIMESTAMP}
      />
    )}
  )
}

3. 优化reducer更新逻辑 #

当前updateField是全量替换整个dynamicForm状态，任意字段更新都会导致整个分片的引用变化。可以修改为单字段更新，避免无关节点引用变更：

reducers: {
  updateField: (state, action) => {
    // payload格式调整为 { field: 字段名, value: 字段值 }
    const { field, value } = action.payload
    state[field] = value
  }
}

如果业务逻辑确实需要全量替换表单，跳过此步骤即可，靠前两步的优化也能解决问题。

4. 子组件增加memo优化 #

如果以上步骤完成后仍存在重渲染，给VideoPlayerController包一层React.memo，仅当props实际变更时才触发重渲染：

const VideoPlayerController = React.memo((props) => {
  // 原有组件逻辑
})

如果有传递函数类型的prop给子组件，父组件需要用useCallback缓存函数引用，避免不必要的更新。

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