javascript - logo - ReactJS-¿Se llama a render cuando se llama "setState"?

react js vs angular

Question

¿React vuelve a representar todos los componentes y subcomponentes cada vez que se llama a setState ?

Si es así, ¿por qué? Pensé que la idea era que React solo se rindiera tan poco como fuera necesario, cuando el estado cambiaba.

En el siguiente ejemplo simple, ambas clases se vuelven a generar cuando se hace clic en el texto, a pesar del hecho de que el estado no cambia en los clics posteriores, ya que el controlador onClick siempre establece el state en el mismo valor:

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

Hubiera esperado que los renderizados solo sucedieran si state datos state hubieran cambiado.

Aquí está el código del ejemplo, como un Fiddle de JS y un fragmento de código incrustado:

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/

Answer 1

¿React vuelve a representar todos los componentes y subcomponentes cada vez que se llama a setState?

Por defecto - si.

Hay un método booleano shouldComponentUpdate (objeto nextProps, objeto nextState) , cada componente tiene este método y es responsable de determinar "¿debería la actualización del componente (ejecutar la función de renderizar )?" Cada vez que cambias de estado o pasas nuevos accesorios desde el componente padre.

Puede escribir su propia implementación del método shouldComponentUpdate para su componente, pero la implementación predeterminada siempre devuelve true, lo que significa que siempre debe volver a ejecutar la función de representación.

Cita de documentos oficiales http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

De forma predeterminada, shouldComponentUpdate siempre devuelve true para evitar errores sutiles cuando el estado se muta en su lugar, pero si tiene cuidado de siempre tratar el estado como inmutable y leer solo los apoyos y el estado en render (), entonces puede anular el valor de shouldComponentUpdate con una implementación que Compara los antiguos apoyos y estado con sus reemplazos.

Siguiente parte de tu pregunta:

Si es así, ¿por qué? Pensé que la idea era que React solo se rindiera tan poco como fuera necesario, cuando el estado cambiaba.

Hay dos pasos de lo que podemos llamar "render":

1. Procesamiento de DOM virtual: cuando se llama al método de render , devuelve una nueva estructura de dom virtual del componente. Como mencioné anteriormente, este método de renderización se llama siempre cuando llama a setState () , porque shouldComponentUpdate siempre devuelve verdadero de manera predeterminada. Entonces, por defecto, no hay optimización aquí en React.

2. Procesamiento nativo de DOM: React cambia los nodos de DOM reales en su navegador solo si se modificaron en el DOM virtual y tan poco como sea necesario: esta es la gran característica de React que optimiza la mutación de DOM real y hace que React sea más rápido.

Answer 2

No, React no renderiza todo cuando cambia el estado.

• Cada vez que un componente está sucio (su estado ha cambiado), ese componente y sus hijos se vuelven a representar. Esto, en cierta medida, es volver a renderizar lo menos posible. El único momento en que no se llama el render es cuando una rama se mueve a otra raíz, donde teóricamente no necesitamos volver a renderizar nada. En su ejemplo, TimeInChild es un componente secundario de Main , por lo que también se vuelve a representar cuando cambia el estado de Main .

• React no compara los datos del estado. Cuando se llama a setState , marca el componente como sucio (lo que significa que debe volver a representarse). Lo importante a tener en cuenta es que, aunque se llama al método de render del componente, el DOM real solo se actualiza si la salida es diferente del árbol DOM actual (también conocido como diferencia entre el árbol DOM virtual y el árbol DOM del documento). En su ejemplo, a pesar de que los datos del state no han cambiado, la hora del último cambio sí lo hizo, lo que hace que el DOM virtual sea diferente del DOM del documento, por lo tanto, se actualiza el HTML.

Answer 3

Sí. Llama al método render () cada vez que llamamos setState en su lugar cuando "shouldComponentUpdate" devuelve false.