javascript - tag - title of page html

reaccionar métodos de ciclo de vida comprensión

Question

Soy un novato en React.js y estoy tratando de entender varios métodos en los métodos del ciclo de vida de React.

Hasta ahora, tengo algo que me confunde:

1)

Según tengo entendido, la diferencia entre componentWillUpdate y componentWillReceiveProps es que se llamará a componentWillReceiveProps cuando el padre cambie los accesorios y podamos usar setState (setState de este hijo dentro de componentWillReceiveProps ).

por ejemplo: react-table-sorter-demo

var App = React.createClass({
  getInitialState: function() {
    return {source: {limit: "200", source: "source1"}};
  },
  handleSourceChange: function(source) {
    this.setState({source: source});
  },
  render: function() {
    return (
      <div>
        <DataSourceSelectors onSourceChange={this.handleSourceChange} source={this.state.source} />
        <TableSorter dataSource={urlForDataSource(this.state.source)} config={CONFIG} headerRepeat="5" />
      </div>
    );
  }
});

En TableSorter, tenemos

componentWillReceiveProps: function(nextProps) {
    // Load new data when the dataSource property changes.
    if (nextProps.dataSource != this.props.dataSource) {
      this.loadData(nextProps.dataSource);
    }
  }

lo que significa que cuando cambiemos this.state.source , this.state.source que se llame a componentWillReceiveProps en TableSorter.

Sin embargo, no entiendo bien cómo usar componentWillUpdate en este caso, la definición de componentWillUpdate es

componentWillUpdate(object nextProps, object nextState)

¿Cómo podemos pasar nextState de padres a hijos? O tal vez estoy equivocado, ¿se pasa el nextState del elemento padre?

2) el método componentWillMount me confunde porque en la documentación oficial, dice que

Se invoca una vez, tanto en el cliente como en el servidor, inmediatamente antes de que se produzca el renderizado inicial.

En este caso, si uso setState en este método, anulará getInitialState ya que se llamará una vez solo inicialmente. En este caso, cuál es la razón para establecer los parámetros en el método getInitialState. En este caso particular, tenemos:

  getInitialState: function() {
    return {
      items: this.props.initialItems || [],
      sort: this.props.config.sort || { column: "", order: "" },
      columns: this.props.config.columns
    };
  },
  componentWillMount: function() {
    this.loadData(this.props.dataSource);
  },
  loadData: function(dataSource) {
    if (!dataSource) return;

    $.get(dataSource).done(function(data) {
      console.log("Received data");
     this.setState({items: data});
     }.bind(this)).fail(function(error, a, b) {
      console.log("Error loading JSON");
     });
  },

los artículos se reemplazarán inicialmente y por qué todavía necesitamos items: this.props.initialItems || [] items: this.props.initialItems || [] en el método getInitialState?

Espero que puedas entender mi explicación, y por favor dame algunas pistas si tienes alguna.

Answer 1

1) Se llama a componentWillUpdate antes de componentWillUpdate en el ciclo de vida de la actualización de React. Tiene razón en que componentWillReceiveProps permite llamar a setState . Por otro lado, componentWillUpdate es una devolución de llamada para usar cuando necesita responder a un cambio de estado.

La diferencia fundamental entre los accesorios y el estado es que el estado es privado para el componente. Es por eso que ni un componente principal ni nadie más puede manipular el estado (por ejemplo, llamar a setState ) del componente. Entonces, el flujo de trabajo predeterminado para la relación del componente padre-hijo sería el siguiente:

• El padre pasa nuevos accesorios al niño
• El niño maneja nuevos accesorios en ''componentWillReceiveProps'', llama a setState si es necesario
• El elemento secundario maneja el nuevo estado en ''componentWillUpdate'', pero si su componente tiene estado, bastará con los accesorios en ''componentWillReceiveProps''.

2) Usted proporcionó un buen ejemplo de código para ilustrar la diferencia. Los valores predeterminados establecidos en getInitialState se usarán para la representación inicial. La llamada loadData de componentWillMount iniciará una solicitud AJAX que puede o no tener éxito; además, se desconoce cuánto tiempo tardará en completarse. Para cuando se complete la solicitud de AJAX y se llame a setState con un nuevo estado, el componente se representará en el DOM con valores predeterminados. Es por eso que tiene mucho sentido proporcionar el estado predeterminado en getInitialState .

Nota: El artículo sobre la comprensión del ciclo de vida del componente React me pareció de gran ayuda para comprender los métodos del ciclo de vida de React.

Answer 2

Aquí hay un diagrama sorprendente de los métodos del ciclo de vida de React ( hecho por Dan Abramov )

Versión interactiva de este diagrama.

Answer 3

Cuatro fases de un componente Reaccionar

Inicialización

Montaje

Actualizar

Desmontaje

Aquí hay un tutorial rápido de los diferentes métodos de

Ciclo vital

de un componente. Debe tener una buena comprensión de los métodos del ciclo de vida para codificar en reaccionar.

Métodos en la fase de montaje:

Comienza cuando se crea una instancia de un componente y cuando se procesa en el DOM.

1. constructor(props) : se llama cuando el componente se inicializa por primera vez. Este método solo se llama una vez.
2. componentWillMount() : se llama cuando un componente está a punto de montarse.
3. render() -it se llama cuando se representa un componente.
4. componentDidMount() : se llama cuando un componente ha terminado de montarse.

Métodos en la fase de actualización:

Comienza cuando las propiedades o el estado de un componente cambian.

1. componentWillReceiveProps(nextProps) : se llama cuando un componente se ha actualizado y está recibiendo nuevos accesorios.
2. shouldComponentUpdate(nextProps, nextState) : se llama después de recibir los accesorios y está a punto de actualizarse. Si este método devuelve falso, componentWillUpdate (), render () y componentDidUpdate () no se ejecutarán.
3. componentWillUpdate(nextProps, nextState) : se llama cuando un componente está a punto de actualizarse.
4. render() : se llama cuando se vuelve a render() un componente.
5. componentDidUpdate(prevProps, prevState) : se llama cuando un componente ha finalizado la actualización.

Métodos en la fase de desmontaje:

Comienza cuando un componente se elimina del DOM.

1. componentWillUnmount() : se llama inmediatamente antes de que un componente se desmonte.

Ref: https://hackernoon.com/reactjs-component-lifecycle-methods-a-deep-dive-38275d9d13c0

Answer 4

El mejor artículo que he leído para comprender el ciclo de vida del componente React:

Comprender el ciclo de vida del componente React

Answer 5

Un método de ciclo de vida de componentes es una función que opcionalmente podemos definir dentro de nuestros componentes basados ​​en clases. Si decidimos implementar estos métodos, React los llamará automáticamente en ciertos puntos durante el ciclo de vida de los componentes.

Se creará un componente y se mostrará en el DOM o en el navegador y podemos hacer algo como esto. this.setState() que hará que el componente se vuelva a representar y, en teoría, en algún momento un componente se eliminará del DOM por completo y deja de mostrar su contenido en la pantalla.

Esa serie completa de eventos es lo que se conoce como el ciclo de vida de los componentes.

Estos métodos de ciclo de vida se llaman en momentos muy distintos durante un ciclo de vida.

Existe la función de constructor(props) , que es una función que podemos definir opcionalmente y, si lo hacemos, se llamará automáticamente cuando se cree una nueva instancia del componente.

Existe el método render() , que no es opcional, tenemos que definirlo. El método render() es una función del ciclo de vida, se llama en algún momento durante el ciclo de vida de un componente.

Comenzamos con la llamada al constructor(props) luego se llamará al método render() , devuelve una cierta cantidad de jsx y el contenido se hace visible en la pantalla.

Luego hay otra serie de métodos de ciclo de vida que se invocan en diferentes momentos.

Primero, inmediatamente después de que un componente aparezca en la pantalla del navegador, se llamará a un método de ciclo de vida llamado componentDidMount() . Eso significa que si definimos una función dentro de nuestra clase, fuera del constructor(props) , justo encima del método render() podemos definir un método llamado componentDidMount() así:

componentDidMount() {

}

render() {

}

Esta función se llamará automáticamente una vez, cuando el componente se procese por primera vez en la pantalla. Podemos poner código dentro para configurar o realizar una carga de datos inicial o una amplia variedad de operaciones que podríamos querer hacer una vez, cuando el componente aparece por primera vez.

Después de que se llama a ese método, el componente se sentará y esperará una actualización. La actualización vendrá en la forma de this.setState() .

Una vez hecho esto, el componente se actualizará o se renderizará a sí mismo, lo que llamará a otro método de ciclo de vida llamado, componentDidUpdate() . Si definimos esa función, se llamará automáticamente cada vez que el componente se actualice.

El componente se sentará y esperará otra actualización y el componentDidUpdate() nuevamente o numerosas cantidades de tiempo.

En algún momento, podríamos querer detener el componentDidUpdate() y ahí es donde implementamos el componentWillUnmount() y este es un método al que queremos llamar cuando queremos hacer la limpieza de nuestro componente.