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. maven项目bulid失败_No compiler is provided in this environment.

    错误信息如下: [ERROR] No compiler is provided in this environment. Perhaps you are running on a JRE rather ...

  2. php类知识点滴---魔术方法，系统在特定时机触发的方法

    __get()获取私有或受保护属性时调用的方法 <?php class coach { private $chairfit = "徐晓冬"; public function ...

  3. 【JZOJ5603】【NOI2018模拟3.27】Xjz

    题目描述 给定字符串 S 和 T. 串A和串B匹配的定义改为:存在一个字符的映射,使得A应用这个映射之后等于B,且这个映射必须为一个排列. A=121, B=313,当映射为{1->3, 2-& ...

  4. 个人签发https证书

    环境: jdk1.8 window7 cmder 1.生成证书库jks keytool.exe -genkeypair -alias www.bingco.com -keyalg RSA ^ -key ...

  5. css百分比值到底参考谁？

    一.元素宽高设置百分比 (1)width / min-width / max-width 参考块级父元素的宽度 (2)height / min-height / max-height 参考块级父元素的 ...

  6. MFC CTreeCtrl 递归遍历算法

    递归遍历 void Traverse(HTREEITEM hTree) { if (!hTree) { return; } //Do Something. //Traverse Child Node ...

  7. 上传base64图片至七牛云，并返回图片link

    https://developer.qiniu.com/kodo/kb/1326/how-to-upload-photos-to-seven-niuyun-base64-code

  8. 使用Python操作Excel文档（一）

    Python | 使用Python操作Excel文档(一) 0 前言 在阅读本文之前,请确保您已满足或可能满足以下条件: 请确保您具备基本的Python编程能力. 请确保您会使用Excel. 请确保您 ...

  9. JavaWeb_(Hibernate框架)使用Hibernate开发用户注册功能

    使用Hibernate开发用户注册功能: 用户在register.jsp表单成功后,页面跳转到login.html,数据库中会存放用户注册的信息 <%@ page language=" ...

  10. jmeter操作登录等简单的使用

    一.登录 1.打开jmeter创建“线程组” 2.创建HTTP默认值 3.添加http默认值后,后边的http请求就可以省略填写部分内容 4.添加“HTTP信息管理头”在内添加名称:“Content- ...