ReactJS - O render é chamado sempre que "setState" é chamado?

O React renderiza novamente todos os componentes e subcomponentes sempre que setStateé chamado?

Se sim, por quê? Eu pensei que a idéia era que o React renderizasse apenas o necessário - quando o estado mudou.

No exemplo simples a seguir, as duas classes são renderizadas novamente quando o texto é clicado, apesar do estado não ser alterado nos cliques subsequentes, pois o manipulador onClick sempre define stateo mesmo valor:

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

Eu esperava que as renderizações só acontecessem se os statedados 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 (
            <p>Time in child:{t}</p>
        );
    }
});

var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },

    render: function() {
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.onTest}>
            <p>Time in main:{currentTime}</p>
            <p>Click me to update time</p>
            <TimeInChild/>
            </div>
        );
    }
});

ReactDOM.render(<Main/>, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

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

O React renderiza novamente todos os componentes e subcomponentes sempre que o setState é chamado?

Por padrão - sim.

Existe um método booleano shouldComponentUpdate (objeto nextProps, objeto nextState) , cada componente possui esse método e é responsável por determinar "o componente deve atualizar (executar a função 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 - ou seja, sempre executa novamente a função de renderização.

Citação de documentos oficiais http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

Por padrão, shouldComponentUpdate sempre retorna true para evitar erros sutis quando o estado é alterado no local, mas se você for cuidadoso ao sempre tratar o estado como imutável e como somente leitura de props e state em render (), poderá substituir shouldComponentUpdate por uma implementação que compara os adereços antigos e o estado com seus substitutos.

Próxima parte da sua pergunta:

Se sim, por quê? Eu pensei que a idéia era que o React renderizasse apenas o mínimo necessário - quando o estado mudou.

Existem duas etapas do que podemos chamar de "render":

1. Renderizações do DOM virtual: quando o método de renderização é chamado, ele retorna uma nova estrutura de dom 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ções nativas do DOM: o React altera os nós DOM reais no seu navegador apenas se eles foram alterados no Virtual DOM e o mínimo necessário - esse é o ótimo recurso do React que otimiza a mutação do DOM real e torna o React rápido.

Não, o React não processa tudo quando o estado muda.

• Sempre que um componente está sujo (seu estado é alterado), esse componente e seus filhos são renderizados novamente. Isso, em certa medida, é re-renderizar o mínimo possível. O único momento em que a renderização não é chamada é quando algum ramo é movido para outra raiz, onde teoricamente não precisamos renderizar novamente. No seu exemplo, TimeInChildé um componente filho de Main, portanto, também é renderizado novamente quando o estado das Mainalterações.

• React 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 a ser observado é que, embora o rendermétodo do componente seja chamado, o DOM real é atualizado apenas se a saída for diferente da árvore DOM atual (também conhecida como difração entre a árvore DOM Virtual e a árvore DOM do documento). No seu exemplo, mesmo que os statedados não tenham sido alterados, a hora da última alteração foi alterada, tornando o DOM Virtual diferente do DOM do documento, portanto, por que o HTML é atualizado.

Embora seja declarado em muitas das outras respostas aqui, o componente deve:

• implementar shouldComponentUpdatepara renderizar apenas quando o estado ou as propriedades mudam

• alterne para estender um PureComponent , que já implementa um shouldComponentUpdatemétodo internamente para comparações superficiais.

Aqui está um exemplo que usa shouldComponentUpdate, que funciona apenas para esse caso de uso simples e para fins de demonstração. Quando isso é usado, o componente não se reproduz novamente a cada clique e é renderizado quando exibido pela primeira vez e depois de ser clicado uma vez.

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

        return (
            <p>Time in child:{t}</p>
        );
    }
});

var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },

    shouldComponentUpdate: function(nextProps, nextState) {
      if (this.state == null)
        return true;
  
      if (this.state.test == nextState.test)
        return false;
        
      return true;
  },

    render: function() {
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.onTest}>
            <p>Time in main:{currentTime}</p>
            <p>Click me to update time</p>
            <TimeInChild/>
            </div>
        );
    }
});

ReactDOM.render(<Main/>, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

Sim. Ele chama o método render () toda vez que chamamos setState, quando "shouldComponentUpdate" retorna false.

Outro motivo para "atualização perdida" pode ser o seguinte:

• Se o getDerivedStateFromProps estático for definido, ele será executado novamente em todos os processos de atualização, de acordo com a documentação oficial https://reactjs.org/docs/react-component.html#updating .
• portanto, se esse valor de estado vier de adereços no início, ele será substituído em todas as atualizações.

Se for o problema, então U pode evitar definir o estado durante a atualização, verifique o valor do parâmetro state como este

static getDerivedStateFromProps(props: TimeCorrectionProps, state: TimeCorrectionState): TimeCorrectionState {
   return state ? state : {disable: false, timeCorrection: props.timeCorrection};
}

Outra solução é adicionar uma propriedade inicializada ao estado e configurá-la na primeira vez (se o estado for inicializado com um valor não nulo).

Nem todos os componentes.

o statecomponente in se parece com a fonte da cachoeira do estado de todo o aplicativo.

Portanto, a mudança acontece de onde o setState chamou. A árvore rendersentão é chamada a partir daí. Se você usou componente puro, o renderserá ignorado.