react中setState用法
<h6> <span>setState()更新状态的2种写法</span></h6><ol>
<li><span>setState(updater, ),</span>
<span> updater为返回stateChange对象的函数: (state, props) => stateChange</span>
<span> 接收的state和props被保证为最新的</span></li>
<li><span>setState(stateChange, )</span>
<span> stateChange为对象,</span>
<span> callback是可选的回调函数, 在状态更新且界面更新后才执行</span></li>
<li><span> 总结:</span>
<span> 对象方式是函数方式的简写方式</span>
<span> 如果新状态不依赖于原状态 ===> 使用对象方式</span>
<span> 如果新状态依赖于原状态 ===> 使用函数方式</span>
<span> 如果需要在setState()后获取最新的状态数据, 在第二个callback函数中读取</span></li>
</ol>
<h6> <span>setState()更新状态是异步还是同步的?</span></h6>
<ol>
<li><span>执行setState()的位置?</span>
<span> 在react控制的回调函数中: 生命周期勾子 / react事件监听回调</span>
<span> 非react控制的异步回调函数中: 定时器回调 / 原生事件监听回调 / promise回调</span></li>
<li><span> 异步 OR 同步?</span>
<span> react相关回调中: 异步</span>
<span> 其它异步回调中: 同步</span></li>
</ol>
<h6> <span>关于异步的setState()</span></h6>
<ol>
<li><span> 多次调用, 如何处理?</span>
<span> setState({}): 合并更新一次状态, 只调用一次render()更新界面 ---状态更新和界面更新都合并了</span>
<span> setState(fn): 更新多次状态, 但只调用一次render()更新界面---状态更新没有合并, 但界面更新合并了</span></li>
<li><span>如何得到异步更新后的状态数据?</span>
<span> 在setState()的callback回调函数中 </span></li>
</ol>
<h6> <span>面试题</span></h6>
<pre><code class="language-html" lang="html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03_setState()面试题</title>
</head>
<body>
<p><div id="example"></div></p>
<p><script type="text/javascript" src="./js/react.development.js"></script><br>
<script type="text/javascript" src="./js/react-dom.development.js"></script><br>
<script type="text/javascript" src="./js/babel.min.js"></script></p>
<p><script type="text/babel"><br>
class StateTest extends React.Component {</p>
<pre><code>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;47 ==&gt;59 ==&gt;611 ==&gt;7
return (
&lt;div&gt;
&lt;p&gt;{count}&lt;/p&gt;
&lt;/div&gt;
)
}
</code></pre>
<p>}</p>
<p>ReactDOM.render(<StateTest/>, document.getElementById('example'))</p>
<p></script><br>
</body><br>
</html></p>
</code><p><code class="language-html" lang="html"></code></p></pre><p></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/korea/p/11166168.html
頁:
[1]