我有一个基于函数的组件。我使用 useAppSelector() 获取 redux 工具包上的数据,但结果我在组件中编写了 ine clg 来检查发生了什么。当页面再次呈现时,clg 仍然会一次又一次地呈现。我的代码是这样的
const blogs = useAppSelector(
(state: RootState) => state.introBlogsSlice.data.results
);
const dispatch = useAppDispatch();
useEffect(() => {
dispatch(fetchSomeBlogs());
}, []);
console.log("blogs", blogs);
我是这样用useMemor()写的。
const blogs = useAppSelector(
(state: RootState) => state.introBlogsSlice.data.results
);
const data = useMemo(() => {
return blogs;
}, [blogs]);
const dispatch = useAppDispatch();
useEffect(() => {
dispatch(fetchSomeBlogs());
}, []);
console.log("blogs", blogs);
但是它仍然不起作用,它在页面刷新时随时呈现,无论我做什么,尽管数据没有任何差异。
总而言之,我如何用 useMemor() 编写这个来阻止额外的渲染?
如果页面刷新指的是字面上的浏览器刷新按钮,那么一切都会按预期工作。唯一能在浏览器刷新后幸存下来的数据位于本地/会话存储、cookie 或索引数据库中。其他的都需要重新查询。
所写的备忘录没有任何作用。
blogs
看起来已经是有状态的并且被 useSelector
记住了。但如果不是,那么对博客的引用将更改每个渲染,导致 useMemo
也重新计算每个渲染。
const data = useMemo(() => {
return blogs;
}, [blogs]);
这段代码没有任何作用。这只是一个长版本的写作
const data = blogs
。它不会对组件的其余执行产生任何影响。
useAppSelector
已经内置了逻辑,可以在可能的情况下跳过渲染。重要的是您的选择器代码 ((state: RootState) => state.introBlogsSlice.data.results
) 返回的内容。如果它一直返回相同的值,那么 redux 就没有理由渲染你的组件。但如果所选值确实发生变化,那么您的组件将(并且必须)重新渲染。
因此,如果您看到其他渲染,请重点确保选择器返回一致的值。我没有看到任何方法可以使用
useMemo
来减少组件渲染的次数。
页面刷新时随时呈现
这是预料之中的。当页面加载(包括刷新)时,整个组件树必须进行初始渲染。