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. P4294 [WC2008]游览计划 (斯坦纳树)

    题目链接 差不多是斯坦纳树裸题,不过边权化成了点权,这样在合并两棵子树时需要去掉根结点的权值,防止重复. 题目还要求输出解,只要在转移时记录下路径,然后dfs一遍就好了. #include<bi ...

  2. java 枚举类(简单使用)

    直接上代码 用法一(常量): package com.ou.test; import com.sun.corba.se.impl.util.SUNVMCID; public class Enum { ...

  3. ESP8266烧录选项中的QIO 和 DIO解释

    https://blog.csdn.net/recclay/article/details/78956580 看到的由烧录引起的QIO和DIO问题探索.. 所以一般选择DIO QIO -> Qu ...

  4. Oracle之:查询锁表,删除锁表

    -- 查询当前哪个表被锁 select sess.sid, sess.serial#, lo.oracle_username, lo.os_user_name, ao.object_name, lo. ...

  5. JS转换/Date(-28800000)/格式

    去除/Date() if (value.includes('/Date')) { var re = /-?\d+/; value = re.exec(value); value = new Date( ...

  6. Logitech G系鼠标脚本编程，实现鼠标自动定位控制

    利用罗技官方提供的API来写一个鼠标自动定位移动脚本 点击脚本编辑器中的帮助选项,查看罗技官方提供的API说明,有很多实现好的鼠标功能 G-series Lua API V8.45 Overview ...

  7. CF1146F Leaf Partition 树形DP

    感觉很多树上难以直接求解的问题都可以转化为动态规划问题并进行求解$.$ 令 $f[x],g[x]$ 分别表示以 $x$ 为根的子树不想上延申,向上延申的方案数$.$ 这里向上延申指的是会有其他子树的节 ...

  8. VirtualBox：无法访问共享文件夹

    造冰箱的大熊猫@cnblogs 2019/5/9 问题:VirtualBox中安装Linux虚拟机,设置宿主机某个文件夹为虚拟机的共享文件夹.在虚拟机中,该共享文件夹显示为“sf_×××”,打开该文件 ...

  9. 十七、mysql数据库备份

    使用java代码在window环境下实现定时执行Mysql备份与还原 //备份 public void doBackup() { Date currentTime = new Date(); Syst ...

  10. Java线程之wait()、notify()、notifyAll()

    翻译:https://www.journaldev.com/1037/java-thread-wait-notify-and-notifyall-example 简述 java中Objct对象包含三个 ...