javascript - attribute - img html title

Reaccionar componente inicializar estado desde accesorios

Question

En React, ¿hay alguna diferencia real entre estas dos implementaciones? Algunos amigos me dicen que el primer componente es el patrón, pero no veo por qué. El segundo componente parece más simple porque el renderizado se llama solo una vez.

Primero:

import React, { PropTypes } from ''react''

class FirstComponent extends React.Component {

  state = {
    description: ''''
  }

  componentDidMount() {
    const { description} = this.props;
    this.setState({ description });
  }

  render () {
    const {state: { description }} = this;    
    return (
      <input type="text" value={description} /> 
    );
  }
}

export default FirstComponent;

Segundo:

import React, { PropTypes } from ''react''

class SecondComponent extends React.Component {

  state = {
    description: ''''
  }

  constructor (props) => {
    const { description } = props;
    this.state = {description};
  }

  render () {
    const {state: { description }} = this;    
    return (
      <input type="text" value={description} />   
    );
  }
}

export default SecondComponent;

Actualización: cambié setState () a this.state = {} (gracias joews), sin embargo, todavía no veo la diferencia. ¿Es uno mejor que otro?

Answer 1

Si inicia directamente el estado desde los accesorios, se mostrará una advertencia en React 16.5 (5 de septiembre de 2018)

Answer 2

Cabe señalar que es un antipatrón para copiar propiedades que nunca cambian al estado (solo acceda a .props directamente en ese caso). Si tiene una variable de estado que eventualmente cambiará pero comienza con un valor de .props, ni siquiera necesita una llamada al constructor; estas variables locales se inicializan después de una llamada al constructor del padre:

class FirstComponent extends React.Component {
  state = {
    x: this.props.initialX,
    // You can even call functions and class methods:
    y: this.someMethod(this.props.initialY),
  };
}

Esta es una taquigrafía equivalente a la respuesta de @joews a continuación. Parece que solo funciona en versiones más recientes de los transpiladores es6, he tenido problemas con él en algunas configuraciones de paquetes web. Si esto no funciona para usted, puede intentar agregar el complemento babel-plugin-transform-class-properties , o puede utilizar la versión no abreviada de @joews a continuación.

Answer 3

No es necesario llamar a setState en el constructor un Componente; es idiomático configurar this.state directamente.

class FirstComponent extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      x: props.initialX
    };
  }
  // ...
}

Consulte React docs: Agregar estado local a una clase .

No hay ninguna ventaja en el primer método que describe. El resultado será una segunda actualización inmediatamente antes de montar el componente por primera vez.

Answer 4

Puede usar el formulario corto como se muestra a continuación si desea agregar todos los accesorios para indicar y conservar los mismos nombres.

constructor(props) {
    super(props);
    this.state = {
       ...props
    }
    //...
}

Answer 5

establecer los datos de estado dentro del constructor como este

constructor(props) {
    super(props);
    this.state = {
      productdatail: this.props.productdetailProps
    };
  }

no funcionará si configura el método de componente lateralDidMount () a través de accesorios.

Answer 6

puede usar el valor key para restablecer el estado cuando sea necesario, pasar los accesorios al estado no es una buena práctica, porque tiene un componente no controlado y controlado en un solo lugar. Los datos deben estar en un solo lugar manejado, lea este https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key

Answer 7

La actualización para React 16.3 alpha introdujo static getDerivedStateFromProps(nextProps, prevState) ( docs ) como un reemplazo para componentWillReceiveProps .

getDerivedStateFromProps se invoca después de que se instancia un componente y cuando recibe nuevos accesorios. Debería devolver un objeto al estado de actualización, o nulo para indicar que los nuevos accesorios no requieren actualizaciones de estado.

Tenga en cuenta que si un componente principal hace que su componente se vuelva a representar, se llamará a este método incluso si los accesorios no han cambiado. Es posible que desee comparar valores nuevos y anteriores si solo desea manejar los cambios.

docs

Es estático, por lo tanto, no tiene acceso directo a this (sin embargo, tiene acceso a prevState , que podría almacenar cosas que normalmente están unidas a this por ejemplo, refs )

editado para reflejar la corrección de @ nerfologist en los comentarios