Javascript 如何使用React钩子避免内存泄漏

我已经使用React JS、材质UI和帧运动实现了一个基本的位置转换动画。当组件转换很长一段时间时，我看到了一些奇怪的问题

我在

useffect

中添加了cleanup方法，以避免任何可能的泄漏，但我仍然看到动画很滞后，当我将其添加到实际的代码库中时，组件变得很慢

我尽了最大努力关注大多数博客，但仍然没有找到解决办法。这里需要这个小组的帮助

这就是我所尝试的：

---

不要在同一个函数中使用多个

useffects

，尝试只使用一个

useffects

所以在你给出的例子中，应该是这样的：

  useEffect(() => {
    const ref = container.current;
    if (container?.current?.style?.position === 'fixed') {
      setElementOffset(getSize(container.current));
    }
    let maxGrow: boolean;
    let backToNormal: boolean;
    paddingRange.onChange((rangeStatus) => {
      maxGrow = rangeStatus === '5%';
      backToNormal = rangeStatus === '0%';
      setIsComplete(maxGrow);
      setPosition(maxGrow ? 'static' : 'fixed');
      if (backToNormal) {
        setElementOffset(getSize(container.current));
      }
    });
    
    setElementOffset(getSize(ref));
    return () => {
      setIsComplete(maxGrow);
      setPosition(maxGrow ? 'static' : 'fixed');

      setElementOffset(getSize(ref));
    };
  }, [windowSize.width, elementOffset.offsetTop, paddingRange]);

---

如果你有问题，请告诉我。useffect的文档是

而不是在同一个函数中使用多个

useffects

，请尝试只使用一个

useffect

所以在你给出的例子中，应该是这样的：

  useEffect(() => {
    const ref = container.current;
    if (container?.current?.style?.position === 'fixed') {
      setElementOffset(getSize(container.current));
    }
    let maxGrow: boolean;
    let backToNormal: boolean;
    paddingRange.onChange((rangeStatus) => {
      maxGrow = rangeStatus === '5%';
      backToNormal = rangeStatus === '0%';
      setIsComplete(maxGrow);
      setPosition(maxGrow ? 'static' : 'fixed');
      if (backToNormal) {
        setElementOffset(getSize(container.current));
      }
    });
    
    setElementOffset(getSize(ref));
    return () => {
      setIsComplete(maxGrow);
      setPosition(maxGrow ? 'static' : 'fixed');

      setElementOffset(getSize(ref));
    };
  }, [windowSize.width, elementOffset.offsetTop, paddingRange]);

---

如果你有问题，请告诉我。useEffects的文档是

谢谢让我试一下我之所以有多个useEffects是为了在不同的时间处理不同的场景。如果我有一个useffect，那么所有的东西都会被调用。此外，我相信我的react-framer方法存在一些问题。将在函数末尾调用useEffect。我想你也可以为不同的目的添加不同的组件，并将它们组合在一起。好的，谢谢。在

useffect

的清除返回函数中设置setState是否正确？所以文章说我们不应该在这期间执行设置状态。更新了示例链接谢谢你让我尝试一下我有多个useEffects的原因是在不同的时间处理不同的场景。如果我有一个useffect，那么所有的东西都会被调用。此外，我相信我的react-framer方法存在一些问题。将在函数末尾调用useEffect。我想你也可以为不同的目的添加不同的组件，并将它们组合在一起。好的，谢谢。在

useffect

的清除返回函数中设置setState是否正确？所以文章说我们不应该在此期间执行setStates。更新了示例链接