React ciclo de vida e cenários de uso comum

Prefácio

O ciclo de vida do React sempre foi muito importante no trabalho. Freqüentemente, precisamos fazer o que precisamos no período de tempo exigido. No React, o ciclo de vida pode ser dividido em inicialização (inicialização), montagem (montagem), no Fases de atualização e desmontagem, cada fase irá chamar diferentes funções do ciclo de vida. Claro, com a atualização da versão react, haverá mudanças relativas, então vamos consultar o resumo agora.

A maioria das equipes não irá necessariamente acompanhar e atualizar para a versão 16, então o ciclo de vida antes da 16 ainda é necessário dominar, sem mencionar que 16 também é baseado em modificações anteriores

Inicialização

Ou seja, o método de construção (constructor ()) da classe no código a seguir. A classe Test herda a classe base de Rea Component, e também herda a classe base de react, de modo que métodos como render () e life pode ser usado o ciclo. Isso também mostra a razão pela qual os componentes funcionais não podem usar esses métodos. super (adereços) é usado para chamar o método de construção (construtor ()) da classe base e também injetar os adereços do componente pai no componente filho e ler o componente filho (os adereços no componente são somente leitura e imutável e o estado é variável). O construtor () é usado para inicializar alguns componentes, como definir o conteúdo inicial de this.state.

Nota:
constructor Não conta como função de ciclo de vida. constructorNós o chamamos de construtor, que é a sintaxe básica do ES6. Embora tenha as mesmas propriedades da função de ciclo de vida, não pode ser considerada uma função de ciclo de vida. Mas você tem que pensar nisso como uma função do ciclo de vida em seu coração.Eu pessoalmente considero isso como um Initializationestágio de React , definindo propriedades (adereços) e estado (estado).

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

Montagem na segunda etapa

1. componentWillMount: Execute quando o componente estiver prestes a ser montado na página.

Chamado antes de o componente ser montado no DOM e será chamado apenas uma vez. Chamar this.setState aqui não fará com que o componente seja renderizado novamente. Você também pode avançar o conteúdo escrito aqui para o construtor (), para que o projeto é muito menos uso.

2. render: Execute quando o estado da página ou os acessórios mudarem.

De acordo com os adereços e o estado do componente (sem retransmissão e reatribuição dos dois, se o argumento mudar, pode fazer com que o componente seja renderizado novamente), retorne um elemento React (descreva o componente, ou seja, a IU), não responsável pela renderização real do componente, o próprio React renderiza o DOM da página com base neste elemento. Render é uma função pura (função pura: o resultado de retorno da função depende apenas de seus parâmetros; não há efeitos colaterais na execução da função). This.setState não pode ser executado nela e haverá efeitos colaterais de alterando o estado do componente.

3. componentDidMount: Executado quando o componente é montado.

Chamado depois que o componente é montado no DOM e só será chamado uma 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 impresso:

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

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

Nota:
componentWillMount E componentDidMountessas duas funções de ciclo de vida são executadas apenas uma vez quando a página é atualizada, e a função de renderização é executada enquanto houver mudanças de estado e props. Este iniciante deve prestar atenção.

Atualização de três estágios de atualização

Esta etapa é uma etapa mais complicada, pela figura acima, pode-se observar que existem dois tipos de atualização de componentes, é necessário esclarecer o mecanismo de atualização do componente React. A atualização de estado causada por setState ou a atualização de props causada pela nova renderização do componente pai. O estado atualizado e os props farão a nova renderização do componente filho, independentemente de haver uma alteração em relação ao anterior.

1. shouldComponentUpdateAntes de o componente ser atualizado, ele é executado automaticamente. Ele requer o retorno de um resultado booleano. Ele deve ter um valor de retorno. Aqui ele retorna diretamente um verdadeiro (no desenvolvimento real, isso é de grande utilidade e pode resolver problemas de desempenho de forma eficaz. ), se você retornar false, o componente não será atualizado. Para simplificar, se você retornar verdadeiro, você concorda com a atualização do componente; se retornar falso, você se opõe à atualização do componente. Este método compara nextProps, nextState e this.props, this.state do componente atual. Quando retornar verdadeiro, o componente atual continuará a realizar o processo de atualização e retornará falso para interromper a atualização do componente atual, que pode ser usado para reduzir a renderização desnecessária do componente e otimizar o desempenho do componente.

2. componentWillUpdateAntes que o componente seja atualizado, mas shouldComponenUpdatedepois de executado, mas quando o shouldComponenUpdateretorno for falso, a atualização do componente será contrariada, e esta função não será executada

3. componentDidUpdateExecutado após o componente ser atualizado, é a última parte da atualização do 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----组件更新完成的时刻执行')
  }
}

Resultados de impressão e ordem de execução

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

4. Então, componentWillReceivePropsquando a figura acima será executada? Na verdade, o componente filho recebe os parâmetros passados ​​pelo componente pai, e a função de renderização do componente pai é executada novamente, e este ciclo de vida será executado.
   Obs: A função não será executada quando o componente
   utilizado componentWillReceivePropsexistir no Dom pela primeira vez,
   se já existir no Dom, a função será executada.
   Ele será chamado quando os adereços passados ​​pelo componente pai estiverem prestes a fazer com que o componente seja atualizado. Este método aceita um parâmetro que se refere aos últimos dados de status dos adereços passados ​​pelo componente pai atual para o componente. Neste método de ciclo de vida, podemos descobrir se os props mudaram com base na comparação dos valores dos novos e antigos props de nextProps e this.props, e fazer alguma lógica de processamento de dados por sua vez.

Desmontando

Há apenas uma função de ciclo de vida neste estágio: componentWillUnmounteste método é chamado antes de o componente ser desinstalado. Você pode realizar algum trabalho de limpeza aqui, como limpar o cronômetro usado no componente, limpar os componentDidMountelementos DOM criados manualmente, desvincular eventos, etc. . Evite causar vazamentos de memória

Resuma a página de otimização que usa a função de ciclo de vida:

1. componentDidMountSolicite ajax na função de ciclo de vida, recomenda-se executá-lo na função componentDidMount, pois se for executado no render, haverá muitos problemas, como a renderização do loop; se for executado no componentWillMount, haverá conflitos ao usar RN. Portanto, é altamente recomendável fazer uma solicitação ajax na função componentDidMount.
2. Quando o componente pai é atualizado e passado para o componente filho, os prós são alterados de qualquer maneira, a função de renderização do componente filho é constantemente acionada e ocorrem problemas de desempenho. Geralmente, podemos ocorrer na fase de atualização, então use shouldComponentUpdate

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

}

O ciclo de vida do React v16.4

Razão para mudança

Acontece que o ciclo de vida (antes do React v16.0) não é adequado após o Fiber lançado no React v16 , porque se a renderização assíncrona for ativada, todas as funções antes da função de renderização podem ser executadas várias vezes.
Qual é o ciclo de vida original (antes do React v16.0) que foi executado antes da renderização?

• componentWillMount
• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate

Se o desenvolvedor abrir a renderização assíncrona e fizer solicitações A JAX com os métodos de ciclo de vida executados antes da renderização acima, AJAX será chamado várias vezes sem necessidade. . . Obviamente, não é o resultado que esperávamos. Além disso, ao iniciar AJAX em componentWillMount, não importa quão rápido o resultado seja obtido, ele não será capaz de alcançar a primeira renderização, e componentWillMount também será chamado para renderização do lado do servidor (claro, este pode ser o resultado esperado ). Essas operações IO são mais adequadas em componentDidMount.

Ban não pode ser melhor do que o efeito de desenvolvedores de persuasão, não use este, portanto, além de shouldComponentUpdate, todas as outras funções antes de a função render ( componentWillMount, componentWillReceiveProps, componentWillUpdate) foram getDerivedStateFromPropssubstituídos.

Isso é para usar uma função estática getDerivedStateFromPropspara substituir as várias funções de ciclo de vida obsoletas, o que é forçar o desenvolvedor a fazer apenas operações sem efeitos colaterais antes da renderização, e as operações que podem ser feitas são limitadas a determinar o novo estado com base em adereços e estado

Duas novas funções de ciclo de vida foram introduzidas recentemente:

1. getDerivedStateFromProps

getDerivedStateFromProps originalmente (no React v16.3) é apenas criado e atualizado (a parte acionada pelo componente pai), ou seja, não é acionado pelo componente pai, então getDerivedStateFromProps não será chamado, como seu próprio acionador setState ou forceUpdate trigger
. um pouco de bagunça, para corrigir isso no React v16.4, de modo que getDerivedStateFromProps Mountingou Updating, e independentemente do que tenha causado por Updating, todos serão chamados, especificamente para ver o ciclo de vida da Figura React v16.4.
getDerivedStateFromProps (props, state) é chamado antes do método render quando o componente é criado e
atualizado . Ele deve retornar um objeto para atualizar o estado ou retornar null para não atualizar nada.

Sempre que o componente pai dispara a renderização do componente atual, getDerivedStateFromProps será chamado, para que tenhamos a oportunidade de ajustar o novo estado com base nos novos adereços e no estado anterior. Se você colocá-lo nas três funções de ciclo de vida obsoletas que são relativamente puras e não têm efeitos colaterais, você pode mover para getDerivedStateFromProps; se infelizmente você fizer algo como AJAX, você deve primeiro refletir sobre por que fez isso em primeiro lugar, e em seguida, vá para componentDidMount Ou vá para componentDidUpdate. No momento, ao usar as três funções de ciclo de vida obsoletas, haverá um aviso vermelho no modo de desenvolvimento, exigindo que você use o prefixo UNSAFE_. Ele pode ser descartado quando uma atualização de versão principal é lançada, para que os desenvolvedores que tenham a sorte de desistir utilizem-no.

2. getSnapshotBeforeUpdate

getSnapshotBeforeUpdate () é chamado após a renderização, quando o DOM pode ser lido, mas não pode ser usado. Ele permite que seu componente capture algumas informações (como a posição de rolagem) do DOM antes que ele mude. Qualquer valor retornado por este ciclo de vida será passado como um parâmetro para componentDidUpdate ().
Exemplos dados no site 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:
Ao usar a nova API de ciclo de vida de getDerivedStateFromProps, getSnapshotBeforeUpdate e a função de ciclo de vida obsoleta ao mesmo tempo, a função de ciclo de vida obsoleta será diretamente ignorada e não será executada a tempo!