setState()更新状态的2种写法
  1. setState(updater, [callback]),
    updater为返回stateChange对象的函数: (state, props) => stateChange
    接收的state和props被保证为最新的
  2. setState(stateChange, [callback])
    stateChange为对象,
    callback是可选的回调函数, 在状态更新且界面更新后才执行
  3. 总结:
    对象方式是函数方式的简写方式
    如果新状态不依赖于原状态 ===> 使用对象方式
    如果新状态依赖于原状态 ===> 使用函数方式
    如果需要在setState()后获取最新的状态数据, 在第二个callback函数中读取
setState()更新状态是异步还是同步的?
  1. 执行setState()的位置?
    在react控制的回调函数中: 生命周期勾子 / react事件监听回调
    非react控制的异步回调函数中: 定时器回调 / 原生事件监听回调 / promise回调
  2. 异步 OR 同步?
    react相关回调中: 异步
    其它异步回调中: 同步
关于异步的setState()
  1. 多次调用, 如何处理?
    setState({}): 合并更新一次状态, 只调用一次render()更新界面 ---状态更新和界面更新都合并了
    setState(fn): 更新多次状态, 但只调用一次render()更新界面 ---状态更新没有合并, 但界面更新合并了
  2. 如何得到异步更新后的状态数据?
    在setState()的callback回调函数中
面试题
<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>03_setState()面试题</title>

</head>

<body>

<div id="example"></div>

<script type="text/javascript" src="./js/react.development.js"></script>


<script type="text/javascript" src="./js/react-dom.development.js"></script>


<script type="text/javascript" src="./js/babel.min.js"></script>

<script type="text/babel">


class StateTest extends React.Component {

state = {

  count: 0,

}

componentDidMount() {

  this.setState({count: this.state.count + 1})

  this.setState({count: this.state.count + 1})

  console.log(this.state.count) // 2 ==&gt; 0

  this.setState(state =&gt; ({count: state.count + 1}))

  this.setState(state =&gt; ({count: state.count + 1}))

  console.log(this.state.count) // 3 ==&gt; 0

  setTimeout(() =&gt; {

    this.setState({count: this.state.count + 1})

    console.log('timeout', this.state.count) // 10 ==&gt; 6

    this.setState({count: this.state.count + 1})

    console.log('timeout', this.state.count) // 12 ==&gt; 7

  }, 0)

  Promise.resolve().then(value =&gt; {

    this.setState({count: this.state.count + 1})

    console.log('promise', this.state.count)  // 6 ==&gt;4

    this.setState({count: this.state.count + 1})

    console.log('promise', this.state.count) // 8 ==&gt; 5

  })

}

render() {

  const count = this.state.count

  console.log('render', count)  // 1 ==&gt; 0   4 ==&gt;3   5 ==&gt;4  7 ==&gt;5  9 ==&gt;6  11 ==&gt;7

  return (

    &lt;div&gt;

      &lt;p&gt;{count}&lt;/p&gt;

    &lt;/div&gt;

  )

}




}


ReactDOM.render(<StateTest/>, document.getElementById('example'))


</script>


</body>


</html>

react中setState用法的更多相关文章

  1. React中setState学习总结

    react中setState方法到底是异步还是同步,其实这个是分在什么条件下是异步或者同步. 1.先来回顾一下react组件中改变state的几种方式: import React, { Compone ...

  2. React中setState同步更新策略

    setState 同步更新 我们在上文中提及,为了提高性能React将setState设置为批次更新,即是异步操作函数,并不能以顺序控制流的方式设置某些事件,我们也不能依赖于this.state来计算 ...

  3. React中setState如何修改深层对象？

    在React中经常会使用到setState,因为在react生态中,state就是一切.在开发过程中,时长会在state中遇到一些比较复杂的数据结构,类似下面这样的: 这时需要我们修改list中obj ...

  4. React中setState的怪异行为 ——setState没有即时生效

    setState可以说是React中使用频率最高的一个函数了,我们都知道,React是通过管理状态来实现对组件的管理的,当this.setState()被调用的时候,React会重新调用render方 ...

  5. React中setState 什么时候是同步的，什么时候是异步的？

    class Example extends React.Component { constructor() { super(); this.state = { val: 0 }; } componen ...

  6. React中setState方法说明

    setState跟新数据是同步还是异步? setState跟新数据是异步的. 如何用代码表现出来是异步的. 点击按钮更新数据,然后去打印这个值看一下 setState跟新数据是异步的 class Fa ...

  7. React中setState注意事项

    setState是一个异步函数,异步获取数据 学习react在使用ref和setState操作DOM时会遇到的问题: ref获取ul结点元素 错误写法:得到的ul长度总是上一次输入后的长度 结果: 正 ...

  8. 「React Native笔记」在React的 setState 中操作数组和对象的多种方法（合集）

    运用在React 中 setState的对象.数组的操作时是不能用类似array.push()等方法,因为push没有返回值,setState后会出现state变成Number,为了方便他人和自己查看 ...

  9. React中Props 和 State用法

    React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下 ...

随机推荐

  1. iOS View的一些操作定义为宏

    #define ViewOf(__View__,__TAG__) [__View__ viewWithTag:__TAG__]#define LabelOf(__View__,__TAG__) ((U ...

  2. 远程文件传输工具sftp、scp、rsync

    一.scp 格式 scp [options] [user@]host : /sourcefile /destpathscp [options] /sourcefile [user@]host:/des ...

  3. index首页加载数据库数据方法

    https://blog.csdn.net/qq_33198758/article/details/82987805 在做网站的时候,会遇到需要首页加载数据库数据的情况.而web.xml配置的首页: ...

  4. 我遇到的Echarts 最大值不显示&平均值不正常

    用Echarts做图表的时候,遇到最大值不显示和平均值不正常的问题,如图: 找了半天,原来是X轴6个坐标有7个数据,只是最后那个数据没有显示出来,而且还是最大的,无语. 加上第七个坐标之后,就显示正常 ...

  5. springboot整合jetty(转)

    jdk1.8 springboot替换容器在网上搜索只需要两步如果不是可能就会报错Unable to start EmbeddedWebApplicationContext due to missin ...

  6. FastDFS为什么要结合Nginx？

    为什么选择Nginx Nginx 是一个很牛的高性能Web和反向代理服务器, 它具有有很多非常优越的特性: 在高连接并发的情况下,Nginx是Apache服务器不错的替代品: Nginx在美国是做虚拟 ...

  7. Remote API（RAPI）之 文件管理

    RAPI库由一组函数组成,这些函数可用于通过桌面应用程序管理设备,包括设备的目录文件.设备的注册表和系统信息. RAPI提供了一组文件管理方法 CeCopyFile:复制文件 CeCreateDire ...

  8. 部署安装python3.7

    1:安装依赖包 yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-deve ...

  9. fegin熔断autowired失败

    在SpringBootApplication中加入 @EnableFeignClients(basePackages = "com.supplychain")指定熔断的路径就可以了

  10. CDOJ 1264 人民币的构造 区间问题+数论

    人民币的构造 Time Limit: 3000/1000MS (Java/Others) Memory Limit: 65535/65535KB (Java/Others) Submit Status ...