怎么在react中使用setState？

怎么在react中使用setState？下面本篇文章给大家介绍一下react中setState的用法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

react中setState用法

React设计setState方法就是为了重新渲染页面

setState()更新状态的2种写法

setState(updater, [callback])，updater为返回stateChange对象的函数: (state, props) => stateChange 接收的state和props被保证为最新的
setState(stateChange, [callback])，stateChange为对象, callback是可选的回调函数, 在状态更新且界面更新后才执行

总结: 对象方式是函数方式的简写方式如果新状态不依赖于原状态 ===> 使用对象方式如果新状态依赖于原状态 ===> 使用函数方式如果需要在setState()后获取最新的状态数据, 在第二个callback函数中读取

setState()更新状态是异步还是同步的?

执行setState()的位置? 在react控制的回调函数中: 生命周期勾子 / react事件监听回调非react控制的异步回调函数中: 定时器回调 / 原生事件监听回调 / promise回调
异步 OR 同步? react相关回调中: 异步其它异步回调中: 同步

关于异步的setState()

多次调用, 如何处理? setState({}): 合并更新一次状态, 只调用一次render()更新界面 ---状态更新和界面更新都合并了 setState(fn): 更新多次状态, 但只调用一次render()更新界面 ---状态更新没有合并, 但界面更新合并了
如何得到异步更新后的状态数据? 在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(&#39;timeout&#39;, this.state.count) // 10 ==&gt; 6

    this.setState({count: this.state.count + 1})
    console.log(&#39;timeout&#39;, this.state.count) // 12 ==&gt; 7
  }, 0)

  Promise.resolve().then(value =&gt; {
    this.setState({count: this.state.count + 1})
    console.log(&#39;promise&#39;, this.state.count)  // 6 ==&gt;4

    this.setState({count: this.state.count + 1})
    console.log(&#39;promise&#39;, this.state.count) // 8 ==&gt; 5
  })
}

render() {
  const count = this.state.count
  console.log(&#39;render&#39;, 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>

更多web开发知识，请查阅 HTML中文网！！

以上就是怎么在react中使用setState？的详细内容，更多请关注易知道|edz.cc其它相关文章！