React中useEffect使用

宸希發表於 2019-12-2 19:35:00

<div class="article-header-box">
<div class="article-header">
<div class="article-info-box">
<div class="article-bar-top"><span class="time">2019-08-24 07:00:00 文摘资讯 <span class="read-count">阅读数 1364  收藏</span></span></div>
<div class="article-bar-top"><span class="time"><span class="read-count">博文的原始地址</span></span></div>
<div class="article-bar-top"> </div>
<div class="operating"> </div>
</div>
</div>
</div>
<div id="article_content" class="article_content clearfix">
<div id="content_views" class="htmledit_views">
<div id="js_content" class="rich_media_content">
<p><img class="rich_pages" src="https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/zECAdgjXfapxFv1A2Lo8gumngFp9SBVwUq4tntkZsYCpzCMAf6UeHbPRkpdsMKY1gar5FEFuZX63CTo0icyqwWA/640?wx_fmt=png" alt="640?wx_fmt=png"></p>
<p>之前我们已经掌握了useState的使用，在 class 中，我们通过在构造函数中设置 <code>this.state</code> 为 <code>{ count: 0 }</code> 来初始化 <code>count</code> state 为 <code>0</code>：</p>
<p> </p>
<p class="code-snippet__fix code-snippet__js"> </p>
<ol class="hljs-ln">
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-class"><span class="hljs-keyword">class <span class="hljs-title">Example <span class="hljs-keyword">extends <span class="hljs-title">React.<span class="hljs-title">Component { </span></span></span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">constructor(props) { </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">super(props); </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">this.state = { </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attr">count: <span class="hljs-number">0 </span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">};</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
</ol>
<p> </p>
<p>在函数组件中，我们没有 <code>this</code>，所以我们不能分配或读取 <code>this.state</code>。我们直接在组件中调用 <code>useState</code> Hook：</p>
<p> </p>
<p class="code-snippet__fix code-snippet__js"> </p>
<ol class="hljs-ln">
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">import React, { useState } <span class="hljs-keyword">from <span class="hljs-string">'react'; </span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-function"><span class="hljs-keyword">function <span class="hljs-title">Example(<span class="hljs-params">) { </span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment">// 声明一个叫 “count” 的 state 变量 </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">const = useState(<span class="hljs-number">0);</span></span></div>
</div>
</li>
</ol>
<p> </p>
<p>既然我们知道了 <code>useState</code> 的作用，那么掌握 <code>useEffect</code> 就更容易，函数组件中没有生命周期，那么可以使用 <code>useEffect</code> 来替代。如果你熟悉 React class 的生命周期函数，你可以把 <code>useEffect</code> Hook 看做 <code>componentDidMount</code>，<code>componentDidUpdate</code> 和 <code>componentWillUnmount</code> 这三个函数的组合。</p>
<p> </p>
<p class="code-snippet__fix code-snippet__js"> </p>
<ol class="hljs-ln">
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-class"><span class="hljs-keyword">class <span class="hljs-title">Example <span class="hljs-keyword">extends <span class="hljs-title">React.<span class="hljs-title">Component { </span></span></span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">constructor(props) { </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">super(props); </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">this.state = { </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attr">count: <span class="hljs-number">0 </span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">};</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">componentDidMount() {</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-built_in">document.title = <span class="hljs-string">`You clicked <span class="hljs-subst">${<span class="hljs-keyword">this.state.count} times`; </span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">componentDidUpdate() {</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-built_in">document.title = <span class="hljs-string">`You clicked <span class="hljs-subst">${<span class="hljs-keyword">this.state.count} times`; </span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">render() {</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">return ( </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">&lt;div&gt;</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">&lt;p&gt;You clicked {<span class="hljs-keyword">this.state.count} times&lt;<span class="hljs-regexp">/p&gt; </span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-regexp"> &lt;button onClick={() =&gt; this.setState({ count: this.state.count + 1 })}&gt; </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-regexp"> Click me </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-regexp"> &lt;/button&gt; </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">&lt;<span class="hljs-regexp">/div&gt; </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-regexp"> ); </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-regexp"> } </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-regexp">}</span></div>
</div>
</li>
</ol>
<p> </p>
<p>使用 Hook 的示例</p>
<p class="code-snippet__fix code-snippet__js"> </p>
<ol class="hljs-ln">
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">import React, { useState, useEffect } <span class="hljs-keyword">from <span class="hljs-string">'react'; </span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-function"><span class="hljs-keyword">function <span class="hljs-title">Example(<span class="hljs-params">) { </span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">const = useState(<span class="hljs-number">0); </span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">useEffect(() =&gt; {</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-built_in">document.title = <span class="hljs-string">`You clicked <span class="hljs-subst">${count} times`; </span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">});</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">return ( </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">&lt;div&gt;</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">&lt;p&gt;You clicked {count} times&lt;<span class="hljs-regexp">/p&gt; </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-regexp"> &lt;button onClick={() =&gt; setCount(count + 1)}&gt; </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-regexp"> Click me </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-regexp"> &lt;/button&gt; </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">&lt;<span class="hljs-regexp">/div&gt; </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-regexp"> ); </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-regexp">}</span></div>
</div>
</li>
</ol>
<p> </p>
<p>默认情况下，它在第一次渲染之后和每次更新之后都会执行。你可能会更容易接受 effect 发生在“渲染之后”这种概念，不用再去考虑“挂载”还是“更新”。React 保证了每次运行 effect 的同时，DOM 都已经更新完毕。</p>
<p> </p>
<p>数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。有些副作用可能需要清除，所以需要返回一个函数，比如挂载时设置定时器，卸载时取消定时器。</p>
<p> </p>
<p class="code-snippet__fix code-snippet__js"> </p>
<ol class="hljs-ln">
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-class"><span class="hljs-keyword">class <span class="hljs-title">Example <span class="hljs-keyword">extends <span class="hljs-title">Component { </span></span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">constructor (props) { </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">super(props); </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">this.state = { </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attr">count: <span class="hljs-number">0 </span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">componentDidMount() {</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">this.id = setInterval(() =&gt; { </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">this.setState({<span class="hljs-attr">count: <span class="hljs-keyword">this.state.count + <span class="hljs-number">1}) </span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}, <span class="hljs-number">1000); </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">componentWillUnmount() {</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">clearInterval(<span class="hljs-keyword">this.id) </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">render() {</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">return &lt;h1&gt;{<span class="hljs-keyword">this.state.count}&lt;<span class="hljs-regexp">/h1&gt;; </span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-regexp"> } </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-regexp">}</span></div>
</div>
</li>
</ol>
<p> </p>
<p>使用 Hook 的示例</p>
<p class="code-snippet__fix code-snippet__js"> </p>
<ol class="hljs-ln">
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-function"><span class="hljs-keyword">function <span class="hljs-title">Example(<span class="hljs-params">) { </span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">const = useState(<span class="hljs-number">0); </span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">useEffect(() =&gt; {</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">const id = setInterval(() =&gt; { </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">setCount(c =&gt; c + <span class="hljs-number">1); </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}, <span class="hljs-number">1000); </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">return () =&gt; clearInterval(id); </span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}, []);</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">return &lt;h1&gt;{count}&lt;<span class="hljs-regexp">/h1&gt; </span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-regexp">}</span></div>
</div>
</li>
</ol>
<p> </p>
<p>你可以通知 React 跳过对 effect 的调用，只要传递数组作为 <code>useEffect</code> 的第二个可选参数即可，如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（<code>[]</code>）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。</p>
<p> </p>
<p>通过跳过 Effect 进行性能优化，在某些情况下，每次渲染后都执行清理或者执行 effect 可能会导致性能问题。在 class 组件中，我们可以通过在 <code>componentDidUpdate</code> 中添加对 <code>prevProps</code> 或 <code>prevState</code> 的比较逻辑解决：</p>
<p> </p>
<p class="code-snippet__fix code-snippet__js"> </p>
<ol class="hljs-ln">
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">componentDidUpdate(prevProps, prevState) {</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">if (prevState.count !== <span class="hljs-keyword">this.state.count) { </span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-built_in">document.title = <span class="hljs-string">`You clicked <span class="hljs-subst">${<span class="hljs-keyword">this.state.count} times`; </span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
</ol>
<p> </p>
<p>这是很常见的需求，所以它被内置到了 <code>useEffect</code> 的 Hook API 中。如果某些特定值在两次重渲染之间没有发生变化，你可以通知 React 跳过对 effect 的调用，只要传递数组作为 <code>useEffect</code> 的第二个可选参数即可：</p>
<p> </p>
<p class="code-snippet__fix code-snippet__js"> </p>
<ol class="hljs-ln">
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">useEffect(() =&gt; {</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-built_in">document.title = <span class="hljs-string">`You clicked <span class="hljs-subst">${count} times`; </span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}, ); <span class="hljs-comment">// 仅在 count 更改时更新</span></div>
</div>
</li>
</ol>
<p> </p>
<p>你已经学习了 State Hook 和 Effect Hook，将它们结合起来你可以做很多事情了。它们涵盖了大多数使用 class 的用例。</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>完</p>
<p> </p>
<p> </p>
<p> </p>
<p><img class="raw-image" src="https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/zECAdgjXfapxFv1A2Lo8gumngFp9SBVwusGIiaMQ9mfMZfbQqrFHqcIlf7QW5IRw8LZPycGSub82ic62qbJEgzSw/640?wx_fmt=png" alt="640?wx_fmt=png"></p>
</div>
</div>
</div>
<div class="postTime"> </div>

</div>
<div id="MySignature" role="contentinfo">
漫思<br><br>
来源：https://www.cnblogs.com/sexintercourse/p/11972819.html

頁: [1]

琼殿技术论坛's Archiver

React中useEffect使用