Reactjs useMemo hook 行为，如 componentDidMount

Question

我正在尝试使用 useMemo 之类的 useEffect 和 componentDidMount 行为，但我的 useMemo 的行为就像 componentWillMount 一样，并且呈现不可阻挡。

这是代码：

useMemo(() => {
    console.log('rendered');
    fetch(`backend url`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        userId: userInf._id,
        fields: ['readers', 'followers', 'news', 'podcast', 'video'],
      }),
    })
      .then((res) => res.json())
      .then((res) => {
        setUserArticles(res.news);
      })
      .catch((err) => err);
  }, [userArticles]);

请问有什么建议吗？

Answer 1

问题

useMemo钩子用于计算和记忆值。 看起来你的钩子回调实际上正在更新一些state，并且这个 state 或值也在钩子依赖数组中声明，在更新和重新渲染之后，将再次运行钩子回调并更新 Z9ED39E2EA93142EF573E...创建一个无限循环。

解决方案

如果您只想在组件挂载时发出一次副作用，例如componentDidMount ，则使用带有空依赖数组的useEffect 。

useEffect(() => {
  console.log('rendered');
  fetch(`backend url`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      userId: userInf._id,
      fields: ['readers', 'followers', 'news', 'podcast', 'video'],
    }),
  })
    .then((res) => res.json())
    .then((res) => {
      setUserArticles(res.news);
    })
    .catch((err) => err);
}, []);

有条件地触发效果

如果你想运行一个效果并且只清理一次（在挂载和卸载时），你可以传递一个空数组（ [] ）作为第二个参数。 这告诉 React 你的效果不依赖于 props 或 state 的任何值，所以它永远不需要重新运行。 这不是作为特殊情况处理的——它直接遵循依赖项数组的工作方式。

如果传递一个空数组（ [] ），则效果内的道具和 state 将始终具有其初始值。 虽然传递[]作为第二个参数更接近于熟悉的componentDidMount和componentWillUnmount mental model，但通常有更好的解决方案来避免过于频繁地重新运行效果。 另外，不要忘记 React 会延迟运行useEffect直到浏览器绘制完成，所以做额外的工作不是问题。