Question

在react native中，我使用了某些组件，例如音频播放器，标题等。此外，我使用console.log（）调试组件，并将日志放在组件的开头：

const MiniPlayer = (props) => {
      console.log('Begain Mini Player ....');
    return()
    }

我有多个日志，它的重新渲染发生了多次，而没有任何特殊事件或状态更改。

应用程序没有任何问题，并且运行缓慢。

我应控制此重新渲染，还是在反应中很常见？

Answer 1

根据您指定的代码段，只要MiniPlayer的父组件重新渲染，它就会重新渲染。这就是反应的方式。如果组件更新，则其整个子树都会重新渲染，无论子组件是否需要它。要对其进行控制，可以在类组件中使用shouldComponentUpdate或使用PureComponent扩展类，或者如果组件是功能组件，则用React.Memo包装组件。由于您的组件是一个功能组件，因此我们可以对您的组件进行更改，以便仅在其属性更改如下时才重新渲染。

const MiniPlayer = React.Memo((props) => {
    console.log('Begain Mini Player ....');
    return()
})

此处有更多资源-shouldComponentUpdate，PureComponent和React.Memo

还请记住，使用React.Memo只是要进行道具的浅表比较。因此，即使props的值相等，但参考值发生变化，仍然会导致重新渲染。

您应控制此重新渲染吗？取决于情况。如果您的组件是昂贵的组件，并且每次更新都会执行繁重的计算，那么您应该控制它，否则它不会受到太大影响，因为DOM无论如何都会执行差异检查以确定应该更新的内容。

多次响应本机重新渲染的组件

1 个答案: