Reactjs useMemo挂钩行为(如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钩子用于计算和回溯一个值。看来您的钩子回调实际上正在更新某些状态，并且此状态或值也在钩子的依赖数组中声明，该数组在更新和重命名之后，将再次运行钩子回调并更新状态.创造一个无限循环。

解决方案

如果您只想在组件挂载时(如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);
}, []);

有条件地发射一种效果

如果您想运行一个效果并只清除它一次(在挂载和卸载上)，您可以传递一个空数组([])作为第二个参数。这告诉我们，您的效果不依赖于道具或状态的任何值，因此它不再需要重新运行。这不是作为特例处理的-它直接遵循依赖关系数组的工作方式。 如果您传递一个空数组([])，则效果中的道具和状态将始终具有它们的初始值。虽然将[]作为第二个论点更接近于熟悉的componentDidMount和componentWillUnmount心智模型，但通常有更好的解决方案来避免频繁地重复运行。另外，不要忘了在浏览器绘制完之后才会运行useEffect，所以做额外的工作就没什么问题了。