避免渲染组件 - 背景视频

Question

我有这个背景视频：

<video id="my-video" className="video" autoPlay muted loop>
   <source src="./assets/fondoPrueba.mp4" type="video/mp4" />
</video>

它被设置为循环，但我需要防止它在渲染某些组件时重新开始。当存在 componentDidMount() 以外的渲染时，是否有一种方法可以防止组件被渲染，即第一个 render

<><div className="App">
                <header>
                    <div id="contenedorHeaderPrincipal">
                        <div id="contenedorHeaderIzquierdaPhone">
                            <img src={"./assets/gobierno-entre-rios.png"} alt="ParanaLogo" height="90%" width="90%"></img>
                        </div>
                        <div id="contenedorHeaderCentroPhone">

                        </div>
                        <div id="contenedorHeaderDerechaPhone">
                            <img src={"./assets/sideMenuIcon.png"} alt="ParanaLogo" height="32px" width="32px" id="sideBarIcon" onClick={() => showSideMenu(false)}></img>

                        </div>
                    </div>
                </header>

                <section>
                    <div className="contenedorSideBar">
                        <video id="my-video" className="video" autoPlay muted loop>
                            <source src="./assets/fondoPrueba.mp4" type="video/mp4" />
                        </video>
                        <div className="contenedorPrincipal">
                            <div style={{width:"100%", display:"flex", justifyContent:"right", marginRight:"5px"}}>
                                <SearchBar></SearchBar>
                            </div>
                            <div className="contenedorPrincipalHeader">
                                <h2 style={{ margin: "15px" }}>BIENVENIDO</h2>

                                <Link to={"/ingresar"} id="textoHipervinculo" style={{ margin: "20px" }}><button className='btn-primary-inverse'>INICIAR SESIÓN</button></Link>

                                <h2 style={{ margin: "20px" }}>¿Sos nuevo ?</h2>
                                <Link to={"/registro"} id="textoHipervinculo"><button className='btn-new-account'>CREA TU CUENTA</button></Link>
                            </div>
                            <div className="contenedorCuerpo">
                            <hr style={{ margin: "20px" }}></hr>
                            <h2 style={{ margin: "20px" }}> Tuviste un problema?</h2>
                            <Link to={"/registro"} style={{ margin: "20px" }} id="textoHipervinculo">No recuerdo mi contraseña</Link>
                            <Link to={"/registro"} style={{ margin: "20px" }} id="textoHipervinculo">No puedo validar mi correo electrónico</Link>
                            <Link to={"/registro"} style={{ margin: "20px" }} id="textoHipervinculo">Si es ciudadano extranjero ingrese aquí</Link>
                        </div>

                        </div>   
                    </div>
                    <div className="sideBarStyle">
                        <SideBar cerrar={showSideMenu}></SideBar>
                    </div>
                </section>


            </div><hr style={{ margin: "40px" }}></hr></>

Answer 1

使用 MyMemoVideo = React.memo(MyVideo).

将其设为备忘录组件

理想情况下，您不要将任何 props 传递给 <MyMemoVideo />，但如果这样做，请确保这些 props 随着时间的推移保持不变。这样你就得到了一个组件，它在安装后没有 re-render。

避免渲染组件 - 背景视频

Avoid render a component - Background video

render

reactjs