useSelector选择器函数在重新渲染时意外调用

Question

我有一个使用useSelector的简单应用程序(stackblitz视图(

const TodoList = () => {
const [count, setCount ] = useState(0);
const todos = useSelector(state => {
console.log('useSelector called')
return state.todos
});
useEffect(() => {
const timer = setInterval(() => {
setCount(count++)
}, 1000);
return () => clearTimeout(timer);
}, []); 
return <p>{count}</p>
}
export default TodoList

有一个计时器更新count变量并将其显示在视图中。我不明白的是，每次重新渲染FC时，useSelector的选择器函数都被称为。

根据文件(或我的解释(，这不应该发生

每当函数组件渲染时，选择器都会运行(除非其引用自上次渲染组件以来没有更改，以便钩子可以在不重新运行选择器的情况下返回缓存结果(。

问题是

1( 如何防止选择器重新运行？

2( 如果我对这些文件的解释是错误的，那么这些文件指的是什么情况？

Answer 1

我认为这部分文档可能有点令人困惑。如果你在文档中读得更深入一点，就会更清楚一点https://react-redux.js.org/api/hooks#equality-比较和更新

听起来回调函数必须保持不变，这样才能在后续渲染时不再调用它。按原样，您将在每次渲染上创建一个新的引用。

由于选择器没有任何闭包依赖项，因此可以在组件之外定义它。类似于：

const todosSelector = state => state.todos
const TodoList = ({ todos, toggleTodo }) => {
...
const todos = useSelector(todosSelector)
...
}

如果出于某种原因需要在组件中定义useMemo或useCallback，您也可以选择使用它。