Um tempo atrás, um amigo me enviou uma demonstração do React para testar minha compreensão do React.

Dei uma olhada mais de perto nesta demonstração. Embora o código seja muito pequeno, ele contém o seguinte:

• Problema de fechamento com ganchos
• O princípio do estado

A demonstração

A estrutura da demonstração é simples: contém um botão e uma lista.

E quando o botão é clicado, ele adiciona algo à lista, como você pode ver abaixo:

Se parece com isso:

Até agora, é bem simples, não é?

A parte engraçada e complexa é que quando você clica no Addbotão, ele adiciona um novo botão que também tem um onClick={add}evento na lista.

Então, se você clicar Addsete vezes, a página ficará assim:

Você entendeu? Aqui está uma demonstração on-line:

O desafio

Aqui está uma pergunta: se clicarmos nesses números, o que acontecerá?

• Se clicarmos no botão 0, como será a lista?
• Se clicarmos no botão 6, como será a lista?

A resposta

Alguns desenvolvedores podem pensar que um novo botão será empurrado para a lista depois de clicar em um número.

Mas esta resposta está errada. Quando clicamos em um número, o comprimento da lista se torna [ the number+ 1], e o último número da lista se torna [ the largest number before the click+ 1].

Eu sei que esta afirmação é um pouco de boca cheia, mas deixe-me explicar com alguns exemplos.

Suponha que a lista atual seja esta:

Se clicarmos em 0, o comprimento da lista mudará para 0 + 1 = 1, e o último número se tornará 6 + 1 = 7.

Agora, se clicarmos em 2, o comprimento da lista mudará para 2 + 1 = 3, e o último número se tornará 6 + 1 = 7.

Você pode experimentá-lo fornecendo uma demonstração incorporada.

Mas você sabe por que esse fenômeno ocorre?

Estado e Encerramento

Este é o resultado de dois fatores trabalhando juntos:

• O problema de fechamento com ganchos
• Como o estado é montado

Quando um botão era clicado, a addfunção era chamada. E então, o fechamento será criado com base em seu contexto.

O fecho contém:

• addfunção
• list
• setList

Aqui está um mal-entendido comum: O listretornado por várias chamadas para useStateé o mesmo objeto com o mesmo endereço na memória.

Na verdade, o listretorno de cada chamada para useStateé calculado com base na seguinte fórmula:

base state + update1 + update2 + … = current state

Isso leva a um fenômeno muito importante: as addfunções correspondentes a cada número estão em diferentes fechamentos e listpossuem valores diferentes.

ié uma variável de nível de módulo; eles são os mesmos em cada fechamento.

Ao clicar em 0, acontece o seguinte:

• ié uma variável de nível de módulo, 6
• listneste fechamento é[]

setList(
  [].concat(
    <button key={7} onClick={add}>{7}</button>
  )
);

Quando você clica em 2, isso acontece:

• ié uma variável de nível de módulo, 6
• listneste fechamento é[0, 1]

setList(
  [0, 1].concat(
    <button key={7} onClick={add}>{7}</button>
  )
);

Você entendeu?

Conclusão

Uma vez que o princípio de montagem do estado é:

base state + update1 + update2 + … = current state

E por causa do fechamento, listvalores diferentes são registrados em cada botão numérico.

Isso acaba levando ao fenômeno descrito no início do artigo.

Espero que este artigo seja útil para você.

Solução

Se você não quiser esse fenômeno de encerramento, poderá modificar o parâmetro de setListpara o formulário da função.