javascript - tag - title of page html
reaccionar métodos de ciclo de vida comprensión (5)
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.
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
setStatesi 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.
Aquí hay un diagrama sorprendente de los métodos del ciclo de vida de React ( hecho por Dan Abramov )
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
El mejor artículo que he leído para comprender el ciclo de vida del componente React:
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.