En un componente funcional de React, que es el mejor enfoque para establecer accesorios predeterminados, usando Component.defaultProps o usando los parámetros predeterminados en la definición de la función, ejemplos:
Accesorios predeterminados:
const Component = ({ prop1, prop2 }) => ( <div></div> ) Component.defaultProps = { prop1: false, prop2: 'My Prop', }Parámetros predeterminados:
const Component = ({ prop1 = false, prop2 = 'My Prop' }) => ( <div></div> )defaultProps en los componentes funcionales eventualmente quedarán obsoletos (según Dan Abramov, uno del equipo central) , por lo que para el futuro vale la pena usar parámetros predeterminados.
En general (ES6), la segunda forma es mejor.
En específico (en el contexto de React), la primera es mejor ya que es una fase principal en el ciclo de vida del componente, es decir, la fase de inicialización.
Recuerde, ReactJS se inventó antes de ES6.
El primero puede causar algunos problemas de rendimiento difíciles de depurar, especialmente si está utilizando redux.
Si está utilizando objetos, listas o funciones, serán objetos nuevos en cada renderizado. Esto puede ser malo si tiene componentes complejos que verifican la identidad del componente para ver si se debe volver a renderizar.
const Component = ({ prop1 = {my:'prop'}, prop2 = ['My Prop'], prop3 = ()=>{} }) => {( <div>Hello</div> )}Ahora eso funciona bien, pero si tiene un componente y estado más complejo, como componentes conectados de reacción-redux con conexión de base de datos y/o ganchos de efecto de reacción, y el estado del componente, esto puede causar una gran cantidad de reinterpretación.
En general, es una mejor práctica tener objetos de utilería predeterminados creados por separado, por ejemplo.
const Component = ({prop1, prop2, prop3 }) => ( <div>Hello</div> ) Component.defaultProps = { prop1: {my:'prop'}, prop2: ['My Prop'], prop3: ()=>{} }o
const defaultProps = { prop1: {my:'prop'}, prop2: ['My Prop'], prop3: ()=>{} } const Component = ({ prop1 = defaultProps.prop1, prop2 = defaultProps.prop2 prop3 = defaultProps.prop3 }) => ( <div>Hello</div> )