this.setState 真的会让组件重新渲染吗？

Question

something about this.setState in class components is confusing me. in react docs, i read that this.setState may be asynchronous in react docs. im okay with this and i tested it with logging the updated value after this.setState. but it is really confusing me: when we call this.setState, react calls render method of the class to re-render the ui. but this.setState is asynchronous and it means that first render method will be called and ui will be re-rendered by react, then the value in the state will be changed? so how does component show us the updated value. i dont..? am i thinking right. thanks for helping.

Answer 1

this.setState is asynchronous and it means that first render method will be called and ui will be re-rendered by react, then the value in the state will be changed? so how does component show us the updated value. i dont..? am i thinking right?

I think you missed something.setState is asynchronous which means that the actions are batched together for performance gains. But why? since it's not aa WebAPI or server call? This is because setState alters the state and causes rerendering. This can be an expensive operation and making it synchronous might leave the browser to behave unexpectedly.