Un componente de clase y un componente de función, los cuales pueden hacer clic en el div para modificar el valor de num.
export default function App() { const [num, setNum] = useState(0); const click = () => { setTimeout(() => { console.log(num, "3000"); }, 3000); setNum(num + 1); }; return <div onClick={click}>click {num}</div>; } export default class App extends React.Component { state = { num: 0 }; click = () => { setTimeout(() => { console.log(this.state.num); }, 3000); this.setState({ num: this.state.num + 1 }); }; render() { return <div onClick={this.click}>click {this.state.num}</div>; } }¿Por qué la salida de num es diferente en los dos componentes anteriores después de hacer clic?
En los componentes de clase, cuando se establece el estado, cuando el componente se actualiza, el nuevo estado se asignará a la propiedad de state de la instancia. Para simplificar demasiado, hacer
this.setState(someNewState);eventualmente da como resultado que React haga algo como
theInstance.state = mergedNewState; Como resultado, hacer referencia a this.state hará que se vean cambios si el estado se actualiza, porque this.state apunta a algo nuevo.
Los componentes funcionales son diferentes. A diferencia de los componentes de clase, nada se muta (visiblemente) cuando se usa su estado. En cambio, cuando llama a un setter de estado, toda la función (componente) se ejecuta nuevamente y las llamadas a useState devuelven un nuevo valor.
En su código, el
const [num, setNum] = useState(0); da como resultado un num sobre el que se cierra la función de click . . Si hay un clic, cuando se ejecuta la devolución de llamada de tiempo de espera, aún se cerrará sobre el mismo num que se creó antes de que se ejecutara el controlador de clics. El componente volverá a renderizarse con una nueva función de click , que tiene un nuevo num numérico sobre el que se cierra, pero la función de click anterior seguirá haciendo referencia al num del renderizado en el que se creó esa función anterior.