Question

我有一个反应组件，它呈现一个看起来像 this 的流媒体页面。以下是部分代码：

const [currentStream, setCurrentStream] = useState<IStream>();

const [currentStreams] = useCollectionData<IStream>(
    firestore
        .collection(firestoreCollections.livestreams)
        .limit(1)
        .where('ownerUsername', '==', location.pathname.substring(1)),
);

useEffect(() => {
    setCurrentStream(currentStreams && currentStreams[0] ? currentStreams[0] : undefined);
}, [currentStreams]);

return (
    <Box height="100%" style={{ display: 'flex' }}>
        <Box width="100%" style={streamBoxStyle}>
            <Box className={styles.invisibleScroll} maxWidth="100%">
                {isStreamActive && (
                    <ReactHlsPlayer
                        url={`https://stream.mux.com/${currentStream?.playbackId}.m3u8`}
                        autoplay={true}
                        controls={true}
                        style={{ position: 'relative', top: '0px' }}
                    />
                )}

                <ProfilePage currentStream={currentStream as IStream} />  <-- The profile page updates 
                                                                              the view count
            </Box>
        </Box>

        {isStreamActive && <ChatComponent streamId={currentStream?.ownerId as string} />}
    </Box>
);

因此，每次新用户进入房间时，currentStream 的 viewCount 都会更新，这会导致整个组件重新渲染（这是完全正常的）。问题是当 ReactHlsPlayer 重新渲染时，它会在加载状态like in this video 的一瞬间出现。所以，我的问题是：有没有办法确保一旦设置了 currentStream.playbackId，ReactHlsPlayer 每次都会停止重新渲染？

谢谢！

Answer 1

使用React.memo()

React.Memo 将检查传递给组件的 props，只有当 props 发生变化时，它才会重新渲染该特定组件。

因此，如果您的 ReactHlsPlayer 没有道具更改，它不会重新渲染，因此不会出现突然加载状态。

只需用 React.memo 包裹您的组件：

const ReactHlsPlayer = React.memo(function ReactHlsPlayer(props) {
  /* render using props */
});

设置属性后停止重新渲染反应元素

1 个答案: