reactjs - 如何只访问一次 React Redux 值？

Question

我只想从 redux 存储中获取一次值，并在 useEffect 函数中使用一次。

不过，useSelector 必须位于组件的根级别，因此每次渲染都会运行它。这意味着如果我的 redux 存储中的值更新，所有子组件也会更新。

我不希望这种情况发生。 (由于某种原因，redux 更新中断了我的一些动画)。我只希望它在安装组件时访问 useSelector 一次。

我怎样才能做到这一点？

当前不受欢迎的行为:

const Test = () => {
    const select = useSelector(state=> state); // updates every dispatch
    
    useEffect(()=> {
       console.log(select.value);
       }, []);
...
}

想要的行为，如果 react 会让我......

const Test = () => {
    useEffect(()=> {
       const select = useSelector(state=> state); // only accessed once, doesn't update children on later dispatches
       console.log(select.value);
       }, []);
...
}

Answer 1

您可以使用 equality check useSelector的功能:

const select = useSelector(state => state, () => true);

通过始终返回 true，您可以防止更新在该组件中挂载时选择的数据，从而防止重新渲染。