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. Nuxt 服务端渲染

    前言 Nuxt.js 是一个基于 Vue.js 的通用应用框架. ssr 渲染服务端 可以看官方文档 https://zh.nuxtjs.org/guide/ nuxt 与平常 jsonp 不一样 , ...

  3. python 中pip配置清华源

    anaconda配置镜像 Mac and Linux conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda ...

  4. 快速数论变换NTT模板

    51nod 1348 乘积之和 #include <cmath> #include <iostream> #include <cstdio> #include &l ...

  5. 获取网卡速率，cpu使用率

    ];//获取网卡名称 PerformanceCounter NetworkR = new PerformanceCounter("Network Interface", " ...

  6. Java中indexOf的用法

    indexOf有四种用法: 1.indexOf(int ch) 在给定字符串中查找字符(ASCII),找到返回字符数组所对应的下标找不到返回-1 2.indexOf(String str)在给定符串中 ...

  7. Rabbitmq的高级特性

    消息如何保证100%投递成功? 什么是生产端的可靠性投递? 1.保障消息的成功发出 2.保障MQ节点的成功接收 3.发送端收到MQ节点(Broker)确认应答 4.完善的消息补偿机制 BAT互联网大厂 ...

  8. Linux网络编程一、tcp三次握手，四次挥手

    一.TCP报文格式 (图片来源网络) SYN:请求建立连接标志位 ACK:应答标志位 FIN:断开连接标志位 二.三次握手,数据传输,四次挥手 (流程图,图片来源于网络) (tcp状态转换图,图片来源 ...

  9. 记一次newApiHadoopRdd查询数据不一致问题

    现象: +----------+-------+--------+-----+-----+-----+----+----+------+---------+-------+--------+----- ...

  10. SSH中一些典型的问题

    struts2 1-1:为什么每次请求都要创建一个Action对象? 是出于对线程安全的考虑,每个request都不会相互影响 1-2:ModelDriven拦截器的配置中refreshModelBe ...