代码解析React中setState同步和异步问题
程序员文章站
2024-01-01 12:00:40
react起源于facebook的内部项目。react的出现是革命性的创新,react的是一个颠覆式的前端框架。在react官方这样介绍的它:一个声明式、高效、灵活的、创建用户界面的javascrip...
react起源于facebook的内部项目。react的出现是革命性的创新,react的是一个颠覆式的前端框架。在react官方这样介绍的它:一个声明式、高效、灵活的、创建用户界面的javascript库,即使react的主要作用是构建ui,但是项目的逐渐成长已经使得react成为前后端通吃的webapp解决方案。
angular中用的是watcher对象,vue是观察者模式,react就是state了,他们各有各的特点,没有好坏之分,只有需求不同而选择不同。
react的官方网址:https://reactjs.org/github
地址为:
1.在react中,由react控制的事件处理函数,如onclick, onchange等,setstate是异步的
import react, { component } from 'react'; export default class input extends component { constructor(props) { super(props); this.state={ name: 'hello' } } _onchange(e) { this.setstate({ name:' world' }) console.log(this.state.name); //hello } render () { return ( <div classname='cp'> <input classname='cp-input' value={this.state.name} onchange={this._onchange.bind(this)} type="text"/> </div> ); } }
2.在原生js监听的事件中,如addeventlistener, setstate是同步的
import react, { component } from 'react'; export default class input extends component { constructor(props) { super(props); this.state={ name: 'hello' } } _onchange(e) { // do something } componentdidmount() { let input = document.queryselector('.cp-input'); input.addeventlistener('click', ()=>{ this.setstate({ name:' world' }) console.log(this.state.name); //world }) } render () { return ( <div classname='cp'> <input classname='cp-input' value={this.state.name} onchange={this._onchange.bind(this)} type="text"/> </div> ); } }
3.在settimeout中,setstatet是同步的
import react, { component } from 'react'; export default class input extends component { constructor(props) { super(props); this.state={ name: 'hello' } } _onchange(e) { // do something } componentdidmount() { settimeout(()=>{ this.setstate({ name:' world' }) console.log(this.state.name); //world }, 1000) } render () { return ( <div classname='cp'> <input classname='cp-input' value={this.state.name} onchange={this._onchange.bind(this)} type="text"/> </div> ); } }
以上就是解析react中setstate同步和异步代码详解的详细内容,更多关于react setstate同步和异步的资料请关注其它相关文章!