React 应用程序变慢并且 JS Heap 变大。如何发现内存泄漏？

Posted 2023-03-16

【中文标题】React 应用程序变慢并且 JS Heap 变大。如何发现内存泄漏？

【英文标题】：React app slows down and JS Heap gets bigger. How to find memory leak?

【发布时间】：2020-09-18 10:41:49

【问题描述】：

我会尽量简化这一点。我有一个“创建头像”页面，其中包含一个“颜色选择器”组件。每次单击它时，一个函数都会生成一个新的随机颜色，然后将该颜色反馈到颜色选择器组件的 props 中，以便将其用作背景颜色。

如果我尽可能快地单击该按钮，它首先会快速交换颜色，但随后开始减慢到应用程序无法使用的程度，即使我导航到新页面也是如此。

开发工具显示 JS 堆和节点数越来越大，无论我如何简化它，我都无法阻止这种情况发生。

这是我的页面组件和颜色选择器组件的最小示例。

页面

const Component: React.FC<Props> = (props) => 

    const [mode, setMode] = useState('avatar')
    const [avatarColor, setAvatarColor] = useState(initialColor)

    // Color Clicked
    const colorClicked = useCallback(() => 
        let newColor = pickRandomColor()
        setAvatarColor(newColor as string)
    , [])


    return (
        <StyledPage ...props>
            mode === 'avatar' && 
                <AvatarColorChooser
                    color=avatarColor
                    onClick=colorClicked
                />
            
        </StyledPage>
    )



export default Component

const StyledPage = styled.div`
    // Styles
`

颜色选择器

const Component: React.FC<Props> = (props) => 

    return (
        <StyledComponent color=props.color>
            <button type="button" onClick=props.onClick>
                <Icon iconName="paintbrush" />
            </button>
        </StyledComponent>
    )



export default Component

const StyledComponent = styled.div<StyledProps>`
    // Styles
`

【问题讨论】：

老实说..在颜色选择器和页面代码中找不到任何可能导致类似情况的内容...是否有可能还有其他代码导致大量渲染或可能存在一些被遗忘的计时器？

没有计时器，没有什么会导致重新渲染，虽然很明显如果我快速点击它会渲染很多，但应该释放内存。唯一让它稍微好一点的是内联我的 pickRandomColor() 函数，它只是一个简单的函数，它为颜色的 H、S 和 L 值选择 3 个随机值。如果我点击按钮的速度更慢，那么 JS 堆最终确实会下降，但是当我导航到另一个页面时，节点数只会继续增加并保持在那里。

看起来这只发生在开发模式下。我建立了网站并尽可能快地点击了超过一分钟，并且没有减速。分析器显示节点和事件侦听器经常被释放，并且 JS 堆是锯齿模式。我从这个讨论中得到了这个想法。 github.com/facebook/react/issues/12141 。我仍然想了解为什么会发生这种情况，所以暂时不会将其添加为答案。

【参考方案1】：

所以，看起来这只发生在开发模式下。我建立了网站并尽可能快地点击了超过一分钟，并且没有减速。分析器显示节点和事件侦听器经常被释放，并且 JS 堆是锯齿模式。我从这个讨论中得到了这个想法。 github.com/facebook/react/issues/12141