Compartilhamento de tecnologia

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Meu inglês é limitado, minhas habilidades são medíocres e tenho muito conhecimento. Como não sou tradutor, há muitas traduções aleatórias. Se você não acredita em mim, leia o texto original.

Endereço original:https://facebook.github.io/react/docs/advanced-performance.html

---

###Otimização de performance

Sempre que os desenvolvedores decidirem usar o react em um projeto real, eles primeiro farão uma pergunta: O uso do react tornará o projeto mais rápido, mais flexível e mais fácil de manter. Além disso, o processo de nova renderização da interface sempre que os dados de estado mudarem causará um gargalo de desempenho? Internamente, o React garante o desempenho usando algumas técnicas sutis para minimizar operações DOM caras que causam atualizações da IU a cada vez.

####Evite efeito direto no DOM
React implementa uma camada de DOM virtual, que é usada para mapear a árvore DOM nativa do navegador. Através desta camada de DOM virtual, o React pode evitar a operação direta do DOM, porque a velocidade de operação direta do DOM do navegador é muito menor do que a operação de objetos JavaScript. Sempre que as propriedades ou o status de um componente mudam, o react construirá um novo dom virtual na memória e o comparará com o antigo original para determinar se a árvore dom do navegador precisa ser atualizada, otimizando assim a renderização do dom tanto quanto possível perda de desempenho.

Além disso, o react fornece funções de ciclo de vida dos componentes.shouldComponentUpdate, o componente chamará esta função antes de decidir renderizar novamente (depois que a comparação do DOM virtual for concluída e o DOM final for gerado. Esta função dá ao desenvolvedor autoridade para renderizar novamente, e a função retorna diretamente por padrão).true, indicando que a atualização do DOM será iniciada diretamente por padrão:

shouldComponentUpdate: function(nextProps, nextState) {
	return true;
}

É importante notar que o react chamará esta função com muita frequência, portanto, se você planeja implementar a lógica desta função sozinho, garanta o desempenho tanto quanto possível.

Por exemplo, você tem um aplicativo de bate-papo com várias postagens se apenas uma delas for alterada neste momento, se você implementar o seguinte.shouldComponentUpdate, o react evitará renderizar novamente as postagens que não foram alteradas de acordo com a situação:

shouldComponentUpdate: function(nextProps, nextState) {
	// TODO: return whether or not current chat thread is different to former one.
	// 根据实际情况判断当前帖子的状态是否和之前不同
}

Resumindo, o React evita ao máximo operações caras do DOM e permite que os desenvolvedores interfiram nesse comportamento.

####shouldComponentUpdate em ação
Aqui está um exemplo de componente contendo elementos filhos, conforme mostrado abaixo:

Anterior Próximo