Reaccionar ciclo de vida y escenarios de uso comunes

Prefacio

El ciclo de vida de React siempre ha sido muy importante en el trabajo. A menudo necesitamos hacer lo que necesitamos en el período de tiempo requerido. En React, el ciclo de vida se puede dividir aproximadamente en inicialización (inicialización), montaje (montaje), Fases de actualización y desmontaje, cada fase llamará a diferentes funciones de ciclo de vida. Por supuesto, con la actualización de la versión de reacción, habrá cambios relativos, así que vamos a referirnos al resumen ahora.

La mayoría de los equipos no necesariamente realizarán un seguimiento y actualizarán a la versión 16, por lo que aún es necesario dominar el ciclo de vida anterior a la 16, sin mencionar que la 16 también se basa en modificaciones anteriores.

Inicialización

Es decir, el método de construcción (constructor ()) de la clase en el siguiente código. La clase Test hereda la clase base de react Component, y también hereda la clase base de react, de modo que los métodos como render () y life Esto también muestra la razón por la cual los componentes funcionales no pueden usar estos métodos. super (props) se usa para llamar al método de construcción (constructor ()) de la clase base, y también inyectar los accesorios del componente principal en el componente secundario y leer el componente secundario (los accesorios en el componente son de solo lectura y inmutable, y el estado es variable). El constructor () se usa para inicializar algunos componentes, como definir el contenido inicial de this.state.

Nota:
constructor No cuenta como función de ciclo de vida. constructorLo llamamos constructor, que es la sintaxis básica de ES6. Aunque tiene las mismas propiedades que la función de ciclo de vida, no puede considerarse una función de ciclo de vida. Pero tienes que pensar en ello como una función del ciclo de vida en tu corazón. Yo personalmente lo considero como una Initializationetapa de React , definiendo propiedades (accesorios) y estado (estado).

import React, {
    
     Component } from 'react'
class Test extends Component {
    
    
  constructor(props) {
    
    
  super(props)
  }
}

Montaje en la segunda etapa

1. componentWillMount: Se ejecuta cuando el componente está a punto de montarse en la página.

Se llama antes de que el componente se monte en el DOM y solo se llamará una vez. Llamar a this.setState aquí no hará que el componente se vuelva a renderizar. También puede avanzar el contenido escrito aquí al constructor (), por lo que el proyecto es muy útil menos.

2. render: Se ejecuta cuando el estado de la página o los accesorios cambian.

De acuerdo con los accesorios y el estado del componente (sin retransmisión y reasignación de los dos, si el argumento cambia, puede hacer que el componente se vuelva a renderizar), devuelva un elemento React (describa el componente, es decir, la interfaz de usuario), no responsable de la renderización real del componente, Then React renderiza la página DOM basada en este elemento. Render es una función pura (función pura: el resultado de retorno de la función solo depende de sus parámetros; no hay efectos secundarios en la ejecución de la función). This.setState no se puede ejecutar en él, y habrá efectos secundarios de cambiar el estado del componente.

3. componentDidMount: Se ejecuta cuando se monta el componente.

Se llama después de que el componente se haya montado en el DOM y solo se llamará una vez.

export default class App extends Component {
    
    
  componentWillMount () {
    
    
    console.log('componentWillMount----组件将要挂载到页面的时刻')
  }
  render() {
    
    
    console.log('render---组件挂载中.......')
    return (
      <div>
        <TodoList/> 
        <ReduxTodoList/>
      </div>
    )
  }
  componentDidMount () {
    
    
    console.log('componentDidMount----组件挂载完成的时刻执行')
  }
}

Resultado impreso:

componentWillMount----组件将要挂载到页面的时刻执行
render----开始挂载渲染
componentDidMount----组件挂载完成的时刻执行

这就是挂载阶段的生命周期的执行顺序,当然他跟书写顺序没有关系

Nota:
componentWillMount Y componentDidMountestas dos funciones de ciclo de vida solo se ejecutan una vez cuando se actualiza la página y la función de render se ejecuta siempre que haya cambios en el estado y los accesorios. Este principiante debe prestar atención.

Actualización en tres etapas de actualización

Esta etapa es una etapa más complicada, de la figura anterior se puede ver que existen dos tipos de actualizaciones de componentes, es necesario aclarar el mecanismo de actualización de componentes de React. La actualización de estado causada por setState o la actualización de props causada por la re-renderización del componente principal. El estado actualizado y las props causarán la re-renderización del componente hijo sin importar si hay un cambio relativo al anterior.

1. shouldComponentUpdateAntes de actualizar el componente, se ejecuta automáticamente. Requiere que se devuelva un resultado booleano. Debe tener un valor de retorno. Aquí devuelve directamente un verdadero (en desarrollo real, esto es de gran utilidad y puede resolver problemas de rendimiento de manera efectiva. ), si devuelve falso, el componente no se actualizará. En pocas palabras, si devuelve verdadero, acepta la actualización del componente; si devuelve falso, se opone a la actualización del componente. Este método compara nextProps, nextState y this.props, this.state del componente actual. Cuando devuelve verdadero, el componente actual continuará realizando el proceso de actualización y devolverá falso para detener la actualización del componente actual, que se puede utilizar para reducir la renderización innecesaria del componente y optimizar el rendimiento del componente.

2. componentWillUpdateAntes de que se actualice el componente, pero shouldComponenUpdatedespués de que se ejecute, pero cuando la shouldComponenUpdatedevolución sea falsa, se opondrá a la actualización del componente y no se ejecutará esta función.

3. componentDidUpdateEjecutado después de que se actualiza el componente, es la última parte de la actualización del componente

export default class App extends Component {
    
    
  shouldComponentUpdate () {
    
    
    console.log ('1.shouldComponentUpdate----组件更新之前')
    return true
  }
  componentWillUpdate () {
    
    
    console.log ('2.componentWillUpdate---组件更新前，shouldComponentUpdate函数之后执行 ')
  }
  render() {
    
    
    console.log('3.render---组件挂载渲染.......')
    return (
      <div>
        <TodoList/> 
        <ReduxTodoList/>
      </div>
    )
  }
  componentDidUpdate () {
    
    
    console.log('componentDidUpdate----组件更新完成的时刻执行')
  }
}

Imprimir resultados y orden de ejecución

1-shouldComponentUpdate---组件发生改变前执行
2-componentWillUpdate---组件更新前，shouldComponentUpdate函数之后执行
3-render----开始挂载渲染
4-componentDidUpdate----组件更新之后执行

4. Entonces, ¿ componentWillReceivePropscuándo se ejecutará la figura anterior ? De hecho, el componente secundario recibe los parámetros pasados ​​por el componente principal, y la función de renderización del componente principal se ejecuta nuevamente, y este ciclo de vida se ejecutará.
   Nota: La función no se ejecutará cuando el componente
   utilizado componentWillReceivePropsexista en el Dom por primera vez;
   si ya existe en el Dom, se ejecutará la función.
   Se llamará cuando los accesorios pasados ​​por el componente principal estén a punto de hacer que el componente se actualice. Este método acepta un parámetro que se refiere a los últimos datos de estado de los accesorios pasados ​​por el componente principal actual al componente. En este método de ciclo de vida, podemos averiguar si los accesorios han cambiado en función de la comparación de los valores de los accesorios nuevos y antiguos de nextProps y this.props, y hacer algo de lógica de procesamiento de datos a su vez.

Desmontaje

En esta etapa, solo hay una función de ciclo de vida: componentWillUnmounteste método se llama antes de desinstalar el componente. Aquí puede realizar algunos trabajos de limpieza, como borrar el temporizador utilizado en el componente, borrar los componentDidMountelementos DOM creados manualmente, desvincular eventos, etc. . Evite causar pérdidas de memoria

Resuma la página de optimización que usa la función de ciclo de vida:

1. componentDidMountSolicitar ajax en la función de ciclo de vida, se recomienda ejecutarlo en la función componentDidMount, ya que se ejecuta en el render, habrá muchos problemas, como el renderizado del bucle; si se ejecuta en el componentWillMount, habrá conflictos al utilizar RN. Por lo tanto, se recomienda encarecidamente realizar una solicitud ajax en la función componentDidMount.
2. Cuando el componente principal se actualiza y se pasa al componente secundario, los pros se cambian de todos modos, la función de renderización del componente secundario se activa constantemente y ocurren problemas de rendimiento. Generalmente, podemos ocurrir en la fase de actualización, así que use shouldComponentUpdate

shouldComponentUpdate(nextProps,nextState){
    
    
    if(nextProps.content !== this.props.content){
    
    
        return true
    }else{
    
    
        return false
    }

}

El ciclo de vida de React v16.4

Razón para el cambio

Resulta que el ciclo de vida (antes de React v16.0) no es adecuado después del lanzamiento de Fiber en React v16 , porque si se va a activar la representación asíncrona, todas las funciones antes de la función de representación se pueden ejecutar varias veces.
¿Cuál es el ciclo de vida original (antes de React v16.0) que se ejecutó antes del render?

• componenteWillMount
• componenteWillReceiveProps
• shouldComponentUpdate
• componenteWillUpdate

Si el desarrollador abre el renderizado asíncrono y realiza solicitudes A JAX con los métodos del ciclo de vida ejecutados antes del renderizado anterior, se llamará a AJAX varias veces innecesariamente. . . Obviamente no es el resultado que esperábamos. Además, al iniciar AJAX en componentWillMount, no importa qué tan rápido se obtenga el resultado, no podrá ponerse al día con el primer render, y componentWillMount también será llamado para el renderizado del lado del servidor (por supuesto, este puede ser el resultado esperado Estas operaciones de E / S son más adecuadas en componentDidMount.

Prohibición no puede ser mejor que el efecto de los desarrolladores de persuasión no utilice este, lo que además de shouldComponentUpdate, todas las demás funciones antes de utilizar la función de render ( componentWillMount, componentWillReceiveProps, componentWillUpdate) han sido getDerivedStateFromPropsreemplazados.

Eso es usar una función estática getDerivedStateFromPropspara reemplazar las varias funciones de ciclo de vida en desuso, que es forzar al desarrollador a realizar solo operaciones sin efectos secundarios antes de renderizar, y las operaciones que se pueden hacer se limitan a determinar el nuevo estado basado en utilería y estado

Se han introducido dos nuevas funciones de ciclo de vida:

1. getDerivedStateFromProps

getDerivedStateFromProps originalmente (en React v16.3) solo se crea y actualiza (la parte desencadenada por el componente principal), es decir, no es desencadenada por el componente principal, entonces no se llamará a getDerivedStateFromProps, como su propio desencadenador setState o forceUpdate trigger
. Un poco de lío, para corregir esto en React v16.4, de modo que getDerivedStateFromProps ya sea Mountingo Updating, e independientemente de lo que haya causado la actualización, todos serán llamados, específicamente para ver el ciclo de vida de Figure React v16.4.
getDerivedStateFromProps (props, state) se llama antes del método render cuando se crea el componente y cuando se
actualiza . Debe devolver un objeto para actualizar el estado, o devolver un valor nulo para no actualizar nada.

Siempre que el componente principal active la representación del componente actual, se llamará a getDerivedStateFromProps, de modo que tengamos la oportunidad de ajustar el nuevo estado en función de los nuevos accesorios y el estado anterior. Si lo coloca en las tres funciones obsoletas del ciclo de vida que son relativamente puras y no tienen efectos secundarios, puede pasar a getDerivedStateFromProps; si desafortunadamente hace algo como AJAX, primero debe reflexionar sobre por qué lo hizo en primer lugar, y luego muévase a componentDidMount O vaya a componentDidUpdate. En la actualidad, cuando utilice las tres funciones de ciclo de vida obsoletas, habrá una advertencia roja en el modo de desarrollo, que le pedirá que utilice el prefijo UNSAFE_. Puede descartarse cuando se lanza una actualización de la versión principal, por lo que aquellos desarrolladores que tienen la suerte de dejar de usarlo.

2. getSnapshotBeforeUpdate

getSnapshotBeforeUpdate () se llama después del render, cuando el DOM se puede leer pero no se puede usar. Permite que su componente capture cierta información (como la posición de desplazamiento) del DOM antes de que cambie. Cualquier valor devuelto por este ciclo de vida se pasará como parámetro a componentDidUpdate ().
Ejemplos dados en el sitio web oficial:

class ScrollingList extends React.Component {
    
    
  constructor(props) {
    
    
    super(props);
    this.listRef = React.createRef();
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    
    
    //我们是否要添加新的 items 到列表?
    // 捕捉滚动位置，以便我们可以稍后调整滚动.
    if (prevProps.list.length < this.props.list.length) {
    
    
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    
    
    //如果我们有snapshot值, 我们已经添加了 新的items.
    // 调整滚动以至于这些新的items 不会将旧items推出视图。
    // (这边的snapshot是 getSnapshotBeforeUpdate方法的返回值)
    if (snapshot !== null) {
    
    
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }
  render() {
    
    
    return (
      <div ref={
    
    this.listRef}>{
    
    /* ...contents... */}</div>
    );
  }
}

Nota:
Cuando utiliza la nueva API de ciclo de vida de getDerivedStateFromProps, getSnapshotBeforeUpdate y la función de ciclo de vida obsoleta al mismo tiempo, la función de ciclo de vida obsoleta se ignorará directamente y no se ejecutará a tiempo.