Actualmente estoy trabajando en una aplicación basada en React.js. Digamos que tenemos un componente de Header en React con un pequeño componente de logotipo dentro que solo debe mostrarse en niveles de resolución móvil. Estoy pasando un accesorio isMobile del componente principal. Este accesorio se basa en:
const mql = global.matchMedia(`(min-width: 768px)`); mql.addListener(() => this._mediaQueryChanged()); this.setState({ mql: mql, isMobile: !mql.matches }); _mediaQueryChanged() { this.setState({ isMobile: !this.state.mql.matches }); } <Header isMobile={this.state.isMobile} /> Y en Header :
render() { const {isMobile} = this.props; const containerClass = classNames('header-component', { 'is-mobile': isMobile }); return ( <header className={containerClass}> { isMobile && ( <section className="mobile-header"> <Button className="toggle-menu" onClick={() => this._toggleMenu()}> <Icon name="menu" /> </Button> <Logo className="header-logo" /> </section> ) } <span>login</span> </header> ); } y si mql coincide, entonces no es móvil. Mi pregunta es: ¿debo pasar este parámetro y volver a renderizar el componente cada vez que cambiamos las consultas de medios? ¿Durante la re-renderización ocultar/mostrar el componente del logotipo? O simplemente use CSS para mostrarlo/ocultarlo y el componente se montará allí todo el tiempo. Sin embargo, no se vuelven a renderizar.
¿Pensamientos?
Acepto que esto puede ser un trabajo solo para CSS.
.header-class .logo { display:none; } @media only screen and (min-width: 768px) { .header-class .logo { display:block; } }Creo que depende de lo que estés tratando de lograr. Si tiene un renderizado universal con extracción de CSS de ruta crítica e intenta reducir los milisegundos, elija la solución de solo reacción. De lo contrario, la solución de solo css funcionará, pero igual de bien que la solución de solo reacción porque probablemente ya esté volviendo a renderizar. Ese astuto isMobile acaba de desencadenar un renderizado en otro lugar de su base de código (o lo hará en el futuro); además, acaba de perder la extensibilidad de las ofertas de reacción.