多次反应本机 re-rendered 组件

Question

在 React Native 中，我使用了一些组件，例如音频播放器，header 等。此外，我使用 console.log() 来调试组件我将日志放在组件的开头：

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

我有多个日志，re-rendering 发生了多次，没有任何特殊事件或状态变化。

应用程序没有任何问题，运行速度也不慢。

我应该控制这个re-rendering还是在react中很常见？

Answer 1

根据您给定的代码片段，MiniPlayer 将在其父组件 re-render 时 re-render。这就是反应的工作原理。如果一个组件更新，它的整个子树 re-renders 不管子组件是否需要它。要控制它，您可以在 class 组件中使用 shouldComponentUpdate 或使用 PureComponent 扩展 class，或者如果组件是功能组件，则用 React.Memo 包装您的组件。由于您的组件是一个函数式组件，我们可以对您的组件进行更改，使其 re-render 仅当其 props 发生如下变化时才会出现。

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

这里有更多资源 - shouldComponentUpdate, PureComponent and React.Memo

还要记住，使用 React.Memo 只是对道具进行浅层比较。因此，即使 props 的值相等，但如果引用发生变化，它仍然会导致 re-render.

你应该控制这个 re-rendering 吗？ 那要看情况了。如果你的组件是一个昂贵的组件，它在更新时执行大量计算，那么你应该控制它，否则它不会影响太大，因为 DOM 无论如何都会执行差异检查以确定应该做什么待更新。

多次反应本机 re-rendered 组件

react native re-rendered components multiple times

rendering

reactjs

react-native