actualizaciones de estado retrasadas en React: Comprender asíncrono setState

Cuando se trabaja con componentes react, es crucial comprender la naturaleza del método setState. A diferencia de la programación imperativa, donde las actualizaciones de estado ocurren de inmediato, el setstate de React es asíncrono. Esto significa que actualizar el estado no garantiza una reflexión inmediata en el estado interno del componente.

en cuestión: retrasado Boardadd modal show flag

Considere el siguiente código fragmento que implementa un componente BoardAdd en React:

class BoardAdd extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            boardAddModalShow: false
        };
        this.openAddBoardModal = this.openAddBoardModal.bind(this);
    }

    openAddBoardModal() {
        this.setState({ boardAddModalShow: true });
        console.log(this.state.boardAddModalShow);
    }
}

Cuando se invoca el método OpenAddboardModal, establece el indicador BoardDModalShow en verdadero e imprime su valor en la consola. Sin embargo, la salida de la consola muestra que el valor sigue siendo falso a pesar de la llamada setState.

¿por qué?

setState es asíncrono. Después de que se llama, la interfaz de usuario no se ve afectada hasta que React, los programas un re-render. La instrucción Console.log se ejecuta antes de que ocurra el re-render, lo que resulta en que se imprima el valor de estado obsoleto.

: usando una devolución de llamada

para resolver este problema, Podemos usar una función de devolución de llamada como argumento para establecer. La devolución de llamada se ejecuta después de que el estado se haya actualizado y se ha ocurrido el re-render:

openAddBoardModal() {
    this.setState({ boardAddModalShow: true }, function () {
        console.log(this.state.boardAddModalShow);
    });
}

En este caso, la instrucción Console.log se ejecutará después de que se haya actualizado el estado, mostrando correctamente el nuevo valor de BoardDModalShow como verdadero.

¿Por qué hacer que SetState asynchronous?

Esta naturaleza asincrónica de SetState tiene un propósito de mejora de rendimiento. Dado que las actualizaciones estatales activan los re-renderizadores, hacerlos sincrónicos podría llevar a la falta de respuesta del navegador. Las llamadas de setState de lotes mejoran el rendimiento al minimizar los re-renderizadores innecesarios y mejorar la experiencia del usuario.