ReactJS – A renderização é chamada a qualquer momento em que “setState” é chamado?

O React re-renderiza todos os componentes e subcomponentes toda vez que o setState é chamado?

Se sim, porque? Eu achava que a ideia era que o React só renderia o mínimo necessário – quando o estado mudava.

No exemplo simples a seguir, as duas classs são renderizadas novamente quando o texto é clicado, apesar do fato de que o estado não muda nos cliques subsequentes, pois o manipulador onClick sempre define o state com o mesmo valor:

 this.setState({'test':'me'}); 

Eu teria esperado que renderizações só aconteceriam se state dados do state tivessem mudado.

Aqui está o código do exemplo, como um JS Fiddle e um snippet incorporado:

 var TimeInChild = React.createClass({ render: function() { var t = new Date().getTime(); return ( 

Time in child:{t}

); } }); var Main = React.createClass({ onTest: function() { this.setState({'test':'me'}); }, render: function() { var currentTime = new Date().getTime(); return (

Time in main:{currentTime}

Click me to update time

); } }); ReactDOM.render(, document.body);
   

 [1]: http://jsfiddle.net/fp2tncmb/2/ 

O React re-renderiza todos os componentes e subcomponentes toda vez que o setState é chamado?

Por padrão – sim.

Existe um método booleano shouldComponentUpdate (object nextProps, object nextState) , cada componente possui este método e é responsável por determinar “deve atualizar o componente (executar function de renderização )?” toda vez que você muda de estado ou passa novos adereços do componente pai.

Você pode escrever sua própria implementação do método shouldComponentUpdate para seu componente, mas a implementação padrão sempre retorna true – o que significa sempre re-executar a function render.

Citar a partir de documentos oficiais http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

Por padrão, shouldComponentUpdate sempre retorna true para evitar bugs sutis quando o estado é mutado no lugar, mas se você for cuidadoso em sempre tratar o estado como imutável e ler apenas de props e state em render (), então você pode replace shouldComponentUpdate com uma implementação que compara os antigos adereços e estados aos seus substitutos.

Próxima parte da sua pergunta:

Se sim, porque? Eu achava que a ideia era que o React só renderia o mínimo necessário – quando o estado mudava.

Existem duas etapas do que podemos chamar de “render”:

  1. Renderização de DOM virtual: quando o método de renderização é chamado, ele retorna uma nova estrutura virtual do componente. Como mencionei antes, esse método de renderização é chamado sempre quando você chama setState () , porque shouldComponentUpdate sempre retorna true por padrão. Portanto, por padrão, não há otimização aqui no React.

  2. Renderização nativa do DOM: Reacção muda os nós DOM reais em seu navegador somente se eles foram alterados no DOM Virtual e tão pouco quanto necessário – esse é o ótimo recurso do React que otimiza a mutação DOM real e torna o React rápido.

Não, o Reagir não renderiza tudo quando o estado muda.

  • Sempre que um componente está sujo (seu estado é alterado), esse componente e seus filhos são renderizados novamente. Isso, até certo ponto, é renderizar o mínimo possível. A única vez em que o render não é chamado é quando algum branch é movido para outra raiz, onde, teoricamente, não precisamos renderizar novamente nada. No seu exemplo, TimeInChild é um componente filho de Main , então ele também é re-renderizado quando o estado de Main muda.

  • Reagir não compara dados de estado. Quando setState é chamado, ele marca o componente como sujo (o que significa que ele precisa ser renderizado novamente). O importante é notar que, embora o método de render do componente seja chamado, o DOM real só é atualizado se a saída for diferente da tree DOM atual (também conhecido como diff entre a tree DOM Virtual e a tree DOM do documento). No seu exemplo, mesmo que os dados de state não tenham sido alterados, a hora da última alteração ocorreu, tornando o DOM virtual diferente do DOM do documento, e por isso o HTML é atualizado.