En Reaccionar componente funcional, cuál es el mejor método para establecer el valor predeterminado accesorios, utilizando Component.defaultProps, o el uso de la los parámetros por defecto en la definición de la función, ejemplos:

Defecto accesorios:

const Component = ({ prop1, prop2 }) => (
  <div></div>
)

Component.defaultProps = {
  prop1: false,
  prop2: 'My Prop',
}

Los parámetros por defecto:

const Component = ({ prop1 = false, prop2 = 'My Prop' }) => (
  <div></div>
)    
  • Por favor no destruyan el valor predeterminado initialiser sintaxis!
  • Gracias @Bergi. no importa! Pensé que es una sintaxis incorrecta. Es ?
  • No, es la sintaxis para los valores por defecto. Que se cambió a objeto de sintaxis literal, que no es válido con cadena/literales booleanos en los parámetros.
InformationsquelleAutor Iago Dahlem | 2017-12-12

5 Comentarios

  1. 21

    En general (ES6), la segunda forma es mejor.

    En específico (en Reaccionar contexto), la primera es la mejor, ya que es una fase principal en el componente de ciclo de vida, es decir, la fase de inicialización.

    Recuerde, ReactJS fue inventado antes de ES6.

    • Podría usted ampliar lo que se trata de utilizar la defaultProps que la hace preferible a los parámetros predeterminados en el contexto de Reaccionar? Hay algo fundamental acerca de cómo se maneja bajo el capó en Reaccionar, o es preferido para los fines de mantenimiento de la convención?
    • se evalúa la antes comprobación para propTypes. también, como se mencionó en @fforw respuesta, desestructuración de los valores predeterminados no se aplican aquí.
    • y esa pequeña diferencia es muy importante para algunos más complejo de los componentes conectados, ver mi respuesta a continuación.
    • Esta respuesta está desactualizado, ya que por defecto puntales sobre los componentes funcionales finalmente será obsoleto (véase mi respuesta a continuación).
  2. 12

    defaultProps funcional de los componentes de eventualmente ser obsoleto (como por Dan Abramov, uno de los miembros del equipo principal), así que para el futuro vale la pena utilizar los parámetros por defecto.

    • así que, ¿cómo debería ser?
    • Esto significa, utilizar los parámetros por defecto y no «defaultProps», si usted se preocupa por el mantenimiento de su proyecto. Realmente alguien se cruza esta respuesta en mi propia respuesta, consulte stackoverflow.com/questions/41488537/…
  3. 1

    Enchufe descarado aquí, yo soy el autor de con-default-props.

    Si usted es un Manuscrito de usuario, con-default-props podría ayudar, que utiliza de orden superior función de proporcionar la correcta definición de un componente con defaultProps dado.

    Por ejemplo.

    import { withDefaultProps } from 'with-default-props'
    
    type Props = {
        text: string;
        onClick: () => void;
    };
    
    function Component(props: Props) {
        return <div onClick={props.onClick}>{props.text}</div>;
    }
    
    //`onClick` is optional now.
    const Wrapped = withDefaultProps(Component, { onClick: () => {} })
    
    
    function App1() {
        //✅
        return <Wrapped text="hello"></Wrapped>
    }
    
    function App2() {
        //✅
        return <Wrapped text="hello" onClick={() => {}}></Wrapped>
    }
    
    function App3() {
        //❌
        //Error: `text` is missing!
        return <Wrapped onClick={() => {}}></Wrapped>
    }
  4. 0

    Primera puede causar algunos difíciles de depurar problemas de rendimiento, especialmente si usted está utilizando redux.

    Si usted está usando objetos o listas o funciones, de los que serán los nuevos objetos en cada render.
    Esto puede ser malo si tiene complejo de componentes que compruebe el componente idenitity a ver si la representación se debe hacer.

    const Component = ({ prop1 = {my:'prop'}, prop2 = ['My Prop'], prop3 = ()=>{} }) => {(
      <div>Hello</div>
    )}

    Ahora que funciona bien, pero si usted tiene más complejo de componentes y el estado, tales como reaccionar-redux componentes conectados con conexión de base de datos y/o reaccionar useffect ganchos, y el estado del componente, esto puede causar una gran cantidad de rerending.

    Es generalmente mejor práctica para tener por defecto la proposición de los objetos 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>
    )
  5. 0

    Incluso tal vez usted se pregunte, ¿por qué no usar algo como el código de abajo, con props || value en lugar de defaultProps :

    class SomeComponent extends React.Component {
      render() {
        let data = this.props.data || {foo: 'bar'}
        return (
          <div>rendered</div>
        )
      }
    }
    
    //SomeComponent.defaultProps = {
    //  data: {foo: 'bar'}
    //};
    
    ReactDOM.render(
      <AddAddressComponent />,
      document.getElementById('app')
    )

    Pero recuerde defaultProps hacer que el código sea más legible , especialmente si usted tiene más props y control, con || operador podría hacer que el código se ve feo

Dejar respuesta

Please enter your comment!
Please enter your name here