useMemo不阻止组件重新渲染

Question

我有一个Button组件，它被用作Timer组件的子代。根据计时器是否处于活动状态，它确定按钮的类型（暂停或启动）。

onDestroy

每秒钟重新渲染一次Timer组件时，Button组件将重新渲染，这是不必要的。读完this article by Kent Dodds之后，看起来像这样一个不必要的小的重新呈现组件可能微不足道，但是我还是想尝试记住该组件以防止其重新呈现。

我一直在使用React Dev Tools突出显示组件的重新渲染。这是Timer组件和子Button同时重新呈现时的样子。按钮不应该每秒重新渲染，而仅当buttonType更改时才重新渲染：

我尝试使用<Button kind={ buttonType } handleClick={() => toggleTimer()} /> 和useMemo通过将这些道具的备注版本传递给Button组件来防止这些渲染。

useCallback

虽然这似乎没有破坏任何东西，但Button组件似乎仍然重新呈现，并且记忆的Button仍然每秒出现绿色高亮显示。