Redux useSelector 对 React 组件渲染有何影响？答案

【问题标题】：How does Redux useSelector affect on react component rendering?Redux useSelector 对 React 组件渲染有何影响？
【发布时间】：2022-11-14 00:01:09
【问题描述】：

我不明白我的组件 Word 将如何重新呈现。我有一个 redux 状态来保持我的 {history: {letters}} 状态。所以问题是：如果{字母} 被传递到 useEffect deps 数组中，如果 {字} 属性改变了？

function Word() {
  const { history: {letters, words} } = useAppSelector(state => state)

  useEffect(() => {
    
  }, [letters])

  return (
    <div>
      
    </div>
  )
}

我希望我的组件仅在更改字母时才会重新呈现。

【问题讨论】：

如果更改了words，即使您没有将它放入 dep 数组，为什么它应该重新渲染？
我的问题的主要思想
您是在检查组件重新渲染还是 useEffect 代码块？
我正在检查组件重新渲染
刚刚测试了一下，结果发现即使组件中没有使用从 store 中获取的值，组件最终也会重新渲染。但这种情况无论如何都不应该发生，因为 eslint 或 typescript 不会让你保留未使用的变量。

标签： reactjs redux react-redux redux-toolkit rerender

【解决方案1】：

您正在使用 Redux 维护一个状态。因此，如果组件本身使用的任何状态发生更改，组件就会重新渲染。在您的情况下，如果 letters 或 words 或两者都被更改，您的 Word 组件将重新渲染。这就是它的工作原理。

顺便说一句，您的 useEffect 仅应在 letters 发生任何更改时触发，因为您仅在其依赖项数组中包含 letters。

如果您想优化性能，您可以在必要时使用useMemo 和useCallback 记住内容。正确传递依赖关系以仅在所需的状态更改时重新计算它们。

【讨论】：