Redux useSelector如何影响react组件渲染?

Question

我不明白我的组件Word将如何呈现。我有一个redux状态保存我的{history: {letters}}状态。所以问题是:如果{字母{words我的组件Word会渲染吗?属性是否改变?

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

}, [letters])
return (
<div>

</div>
)
}

我希望我的组件只在字母改变时才呈现。

Answer 1

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

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

如果您想优化性能，您可以在必要的地方使用useMemo和useCallback来记忆东西。正确地传递依赖项，以便仅在需要的状态更改时重新计算它们。

Answer 2

如果状态的选定部分发生了变化，UseSelector将已经呈现。你不需要添加[letters]在useEffect

UseSelector订阅状态，如果检测到任何变化，它调用checkForUpdates

subscription.onStateChange = checkForUpdates

和checkForUpdates检查状态的引用是否改变了，如果改变了。它调用forceRender函数，所以你的组件渲染。

github useSelector

useEffect用于在组件首次呈现之前调度动作来填充状态，因此useSelector将能够访问新填充的状态