Recentemente desenvolvi um projeto de reação e comecei a aprender a reagir. Vou fazer algumas anotações aqui para registrar os problemas encontrados durante o processo de desenvolvimento. Isso é apenas para meu entendimento pessoal.
O bug é assim, existem duas áreas de exibição (podem ser vistas como duas listas), bizcharts é usado para composição, a esquerda e a direita da imagem abaixo são duas áreas de exibição, quando os dados na primeira área são trocados, o a segunda área piscará (possivelmente sendo renderizada novamente)
No processo de localização do problema, descobri que havia duas listas geradas por lista na página.Quando o evento de gatilho fazia com que um dos valores fosse redefinido, tanto onelist quanto twolist eram percorridos novamente.
A princípio pensei que era porque o nó DOM do primeiro UL foi renderizado novamente, o que fez com que o navegador refluísse e redesenhasse, então descrevi o segundo ul e descobri que o ponto de interrupção ainda estava inserido.
Depois de algumas reviravoltas, os problemas causados pelo método do gancho foram eliminados.
Então comecei a entender os princípios da reação e entendi aproximadamente por que isso aconteceu.
Meu entendimento do princípio de atualização do Vue é que o Vue monitora um objeto. Este objeto coletará componentes que dependem dele e pode vincular vnode e dados. Quando o método set deste objeto for chamado, ele terá dependências. vnode compara e em seguida, notifica as dependências para atualização.
React é baseado no design de fluxo de dados unidirecional. As atualizações de componentes não afetarão seu componente pai, apenas os componentes filhos. Portanto, React pega o componente que chama setstate como o nó raiz, regenera uma árvore DOM e então percorre e compara isto.
Neste ponto, basicamente entendo o problema de ser atravessado, mas há outro problema. Embora seja atravessado, os dados não foram alterados. Por que está sendo renderizado novamente? Então voltei minha atenção para bizcharts e olhei brevemente para o código de bizcharts. Não o entendi a fundo. Pode ser que este subcomponente julgue se o conteúdo está vazio todas as vezes e então regenere o dom.
Por fim, aprendi sobre o mecanismo de atualização do DOM react e vue e descobri que o problema era com bizcharts, então não fiz nenhuma pesquisa aprofundada e mudei decisivamente para echarts, e o problema foi resolvido.