为什么我无法使用 useMemo() 停止额外的渲染？

Question

我有一个基于函数的组件。我使用 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() 编写这个来阻止额外的渲染？

Answer 1

如果页面刷新指的是字面上的浏览器刷新按钮，那么一切都会按预期工作。唯一能在浏览器刷新后幸存下来的数据位于本地/会话存储、cookie 或索引数据库中。其他的都需要重新查询。

所写的备忘录没有任何作用。

blogs

看起来已经是有状态的并且被

useSelector

记住了。但如果不是，那么对博客的引用将更改每个渲染，导致

useMemo

也重新计算每个渲染。

Answer 2

const data = useMemo(() => {
  return blogs;
}, [blogs]);

这段代码没有任何作用。这只是一个长版本的写作

const data = blogs

。它不会对组件的其余执行产生任何影响。

useAppSelector

已经内置了逻辑，可以在可能的情况下跳过渲染。重要的是您的选择器代码 (

(state: RootState) => state.introBlogsSlice.data.results

) 返回的内容。如果它一直返回相同的值，那么 redux 就没有理由渲染你的组件。但如果所选值确实发生变化，那么您的组件将（并且必须）重新渲染。

因此，如果您看到其他渲染，请重点确保选择器返回一致的值。我没有看到任何方法可以使用

useMemo

来减少组件渲染的次数。

页面刷新时随时呈现

这是预料之中的。当页面加载（包括刷新）时，整个组件树必须进行初始渲染。