doc: update react.md. 864ef36fd6

2025-06-19 05:31:21 +08:00 · 2022-10-05 18:21:30 +00:00
parent 9b5d278ed7
commit 363e4d3e35
2 changed files with 402 additions and 8 deletions
--- a/docs/quickreference.html
+++ b/docs/quickreference.html
@ -145,6 +145,7 @@
 <p>上面 <code>{1,4-5}</code> 行代码高亮，下面是 <code>Markdown</code> 代码示例</p>
 <pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line">  ```jsx {1,4-5}
 </span></code></pre>
+<p>代码行高亮可以和代码行号一起使用。</p>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="tooltips"><a aria-hidden="true" tabindex="-1" href="#tooltips"><span class="icon icon-link"></span></a>Tooltips</h3><div class="wrap-body">
 <p><a href="https://github.com/jaywcjlove/reference" class="tooltip">鼠标移动到上面有提示<em class="tooltiptext">Tooltips 的提示内容</em></a></p>
 <p>添加注释配置 <code>&#x3C;!--rehype:tooltips--></code> 添加一个 Tooltips 提示。</p>
@ -182,9 +183,11 @@
 <!--rehype:className=shortcuts-->
 <p>列表添加 <code>&#x3C;!--rehype:className=shortcuts--></code> 样式类，展示快捷键样式。</p>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="代码行号"><a aria-hidden="true" tabindex="-1" href="#代码行号"><span class="icon icon-link"></span></a>代码行号</h3><div class="wrap-body">
-<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token maybe-class-name">Student</span> <span class="token operator">=</span> <span class="token punctuation">(</span>
-</span><span class="code-line line-number" line="2">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Student<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
-</span><span class="code-line line-number" line="3"><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token maybe-class-name">Student</span> <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">学生</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
+</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> school <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">学校</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
+</span></code></pre>
+<p>下面是 <code>Markdown</code> 代码示例</p>
+<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line">  ```jsx showLineNumbers
 </span></code></pre>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="内置类样式"><a aria-hidden="true" tabindex="-1" href="#内置类样式"><span class="icon icon-link"></span></a>内置类样式</h3><div class="wrap-body">

--- a/docs/react.html
+++ b/docs/react.html
@ -269,16 +269,16 @@
 </span></code></pre>
 <p>从 <code>v16.2.0</code> 开始 <code>Fragment</code> 可用于返回多个子节点，而无需向 DOM 添加额外的包装节点。或者使用 <code>&#x3C;>&#x3C;/></code> 效果是一样的。</p>
 <pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Student</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
-</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span></span><span class="token punctuation">></span></span><span class="token plain-text">
+</span><span class="code-line highlight-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span></span><span class="token punctuation">></span></span><span class="token plain-text">
 </span></span><span class="code-line"><span class="token plain-text">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Avatar</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./demo.jpg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
 </span></span><span class="code-line"><span class="token plain-text">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Profile</span></span> <span class="token attr-name">username</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
-</span></span><span class="code-line"><span class="token plain-text">  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span></span><span class="token punctuation">></span></span>
+</span></span><span class="code-line highlight-line"><span class="token plain-text">  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span></span><span class="token punctuation">></span></span>
 </span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
 </span></code></pre>
 <p>查看: <a href="https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings">Fragments &#x26; strings</a></p>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="返回字符串"><a aria-hidden="true" tabindex="-1" href="#返回字符串"><span class="icon icon-link"></span></a>返回字符串</h3><div class="wrap-body">
 <pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-</span><span class="code-line">  <span class="token keyword control-flow">return</span> <span class="token string">'Look ma, no spans!'</span><span class="token punctuation">;</span>
+</span><span class="code-line highlight-line">  <span class="token keyword control-flow">return</span> <span class="token string">'Look ma, no spans!'</span><span class="token punctuation">;</span>
 </span><span class="code-line"><span class="token punctuation">}</span>
 </span></code></pre>
 <p>您可以只返回一个字符串。查看: <a href="https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings">Fragments &#x26; strings</a></p>
@ -852,9 +852,400 @@
 </span></span><span class="code-line"><span class="token plain-text">  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">菜单二</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">
 </span></span><span class="code-line"><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span><span class="token plain-text">
 </span></span></code></pre>
+</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="hooks"><a aria-hidden="true" tabindex="-1" href="#hooks"><span class="icon icon-link"></span></a>Hooks</h2><div class="wrap-body">
+</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="hooks-api-参考"><a aria-hidden="true" tabindex="-1" href="#hooks-api-参考"><span class="icon icon-link"></span></a>Hooks API 参考</h3><div class="wrap-body">
+<!--rehype:wrap-class=row-span-2-->
+</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="基础-hook"><a aria-hidden="true" tabindex="-1" href="#基础-hook"><span class="icon icon-link"></span></a>基础 Hook</h4><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">方法</th><th>描述</th></tr></thead><tbody><tr><td align="left"><code>useState</code></td><td>返回一个 <code>state</code>，更新 <code>state</code> 的函数 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usestate">#</a></td></tr><tr><td align="left"><code>useEffect</code></td><td>可能有副作用代码的函数 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#useeffect">#</a></td></tr><tr><td align="left"><code>useContext</code></td><td>接收并返回该 <code>context</code> 的当前值 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usecontext">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="额外的-hook"><a aria-hidden="true" tabindex="-1" href="#额外的-hook"><span class="icon icon-link"></span></a>额外的 Hook</h4><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">方法</th><th>描述</th></tr></thead><tbody><tr><td align="left"><code>useReducer</code></td><td><code>useState</code> 的替代方案 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usestate">#</a></td></tr><tr><td align="left"><code>useCallback</code></td><td>返回一个回调函数 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usecallback">#</a></td></tr><tr><td align="left"><code>useMemo</code></td><td>返回一个 <a href="https://en.wikipedia.org/wiki/Memoization">memoized</a> 值<a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usememo">#</a></td></tr><tr><td align="left"><code>useRef</code></td><td>返回一个可变的 <code>ref</code> 对象 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#useref">#</a></td></tr><tr><td align="left"><code>useImperativeHandle</code></td><td>暴露给父组件的实例值 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#useimperativehandle">#</a></td></tr><tr><td align="left"><code>useLayoutEffect</code></td><td>DOM 变更后同步调用函数 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#uselayouteffect">#</a></td></tr><tr><td align="left"><code>useDebugValue</code></td><td>开发者工具中显示标签 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usedebugvalue">#</a></td></tr><tr><td align="left"><code>useDeferredValue</code></td><td>接受并返回该值的新副本 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usedeferredvalue">#</a></td></tr><tr><td align="left"><code>useTransition</code></td><td>过渡任务的等待状态 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usetransition">#</a></td></tr><tr><td align="left"><code>useId</code></td><td>用于生成唯一 ID <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#useid">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="library-hooks"><a aria-hidden="true" tabindex="-1" href="#library-hooks"><span class="icon icon-link"></span></a>Library Hooks</h4><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">方法</th><th>描述</th></tr></thead><tbody><tr><td align="left"><code>useSyncExternalStore</code></td><td>读取和订阅外部数据源 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usesyncexternalstore">#</a></td></tr><tr><td align="left"><code>useInsertionEffect</code></td><td>DOM 突变之前 同步触发 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usesyncexternalstore">#</a></td></tr></tbody></table>
+</div></div></div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="函数式更新"><a aria-hidden="true" tabindex="-1" href="#函数式更新"><span class="icon icon-link"></span></a>函数式更新</h3><div class="wrap-body">
+<!--rehype:wrap-class=col-span-2-->
+<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Counter</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> initialCount <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line">  <span class="token keyword">const</span> <span class="token punctuation">[</span>count<span class="token punctuation">,</span> setCount<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span>initialCount<span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line">  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
+</span><span class="code-line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span></span><span class="token punctuation">></span></span><span class="token plain-text">
+</span></span><span class="code-line"><span class="token plain-text">      Count: </span><span class="token punctuation">{</span>count<span class="token punctuation">}</span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setCount</span><span class="token punctuation">(</span>initialCount<span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Reset</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
+</span></span><span class="code-line"><span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setCount</span><span class="token punctuation">(</span><span class="token parameter">prevCount</span> <span class="token arrow operator">=></span> prevCount <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">-</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
+</span></span><span class="code-line"><span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setCount</span><span class="token punctuation">(</span><span class="token parameter">prevCount</span> <span class="token arrow operator">=></span> prevCount <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">+</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
+</span></span><span class="code-line"><span class="token plain-text">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span></span><span class="token punctuation">></span></span>
+</span><span class="code-line">  <span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line"><span class="token punctuation">}</span>
+</span></code></pre>
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="useref"><a aria-hidden="true" tabindex="-1" href="#useref"><span class="icon icon-link"></span></a>useRef</h3><div class="wrap-body">
+<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">TextInputWithFocusButton</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line">  <span class="token keyword">const</span> $input <span class="token operator">=</span> <span class="token function">useRef</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line">  <span class="token keyword">const</span> <span class="token function-variable function">onButtonClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
+</span><span class="code-line">    $input<span class="token punctuation">.</span><span class="token property-access">current</span><span class="token punctuation">.</span><span class="token method function property-access">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">;</span>
+</span><span class="code-line">  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
+</span><span class="code-line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span></span><span class="token punctuation">></span></span><span class="token plain-text">
+</span></span><span class="code-line"><span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>$input<span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
+</span></span><span class="code-line"><span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onButtonClick<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
+</span></span><span class="code-line"><span class="token plain-text">        聚焦输入
+</span></span><span class="code-line"><span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
+</span></span><span class="code-line"><span class="token plain-text">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span></span><span class="token punctuation">></span></span>
+</span><span class="code-line">  <span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line"><span class="token punctuation">}</span>
+</span></code></pre>
+<p><code>current</code> 指向已挂载到 DOM 上的文本输入元素</p>
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="useimperativehandle"><a aria-hidden="true" tabindex="-1" href="#useimperativehandle"><span class="icon icon-link"></span></a>useImperativeHandle</h3><div class="wrap-body">
+<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">FancyInput</span></span><span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> ref</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line">  <span class="token keyword">const</span> inputRef <span class="token operator">=</span> <span class="token function">useRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line">  <span class="token function">useImperativeHandle</span><span class="token punctuation">(</span>ref<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
+</span><span class="code-line">    <span class="token function-variable function">focus</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
+</span><span class="code-line">      inputRef<span class="token punctuation">.</span><span class="token property-access">current</span><span class="token punctuation">.</span><span class="token method function property-access">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line">    <span class="token punctuation">}</span>
+</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line">  <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>inputRef<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
+</span><span class="code-line"><span class="token punctuation">}</span>
+</span><span class="code-line"><span class="token maybe-class-name">FancyInput</span> <span class="token operator">=</span> <span class="token function">forwardRef</span><span class="token punctuation">(</span><span class="token maybe-class-name">FancyInput</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span></code></pre>
+<p>父组件使用</p>
+<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">FancyInput</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>inputRef<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
+</span><span class="code-line">inputRef<span class="token punctuation">.</span><span class="token property-access">current</span><span class="token punctuation">.</span><span class="token method function property-access">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+</span></code></pre>
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="useeffect"><a aria-hidden="true" tabindex="-1" href="#useeffect"><span class="icon icon-link"></span></a>useEffect</h3><div class="wrap-body">
+<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
+</span><span class="code-line">  <span class="token keyword">const</span> subs <span class="token operator">=</span> props<span class="token punctuation">.</span><span class="token property-access">source</span><span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line">  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
+</span><span class="code-line">    subs<span class="token punctuation">.</span><span class="token method function property-access">unsubscribe</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">;</span>
+</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>props<span class="token punctuation">.</span><span class="token property-access">source</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span></code></pre>
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="usecallback"><a aria-hidden="true" tabindex="-1" href="#usecallback"><span class="icon icon-link"></span></a>useCallback</h3><div class="wrap-body">
+<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> memoizedCallback <span class="token operator">=</span> <span class="token function">useCallback</span><span class="token punctuation">(</span>
+</span><span class="code-line">  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
+</span><span class="code-line">    <span class="token function">doSomething</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+</span><span class="code-line">  <span class="token punctuation">[</span>a<span class="token punctuation">,</span> b<span class="token punctuation">]</span><span class="token punctuation">,</span>
+</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span></code></pre>
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="usememo"><a aria-hidden="true" tabindex="-1" href="#usememo"><span class="icon icon-link"></span></a>useMemo</h3><div class="wrap-body">
+<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> memoizedValue <span class="token operator">=</span> <span class="token function">useMemo</span><span class="token punctuation">(</span>
+</span><span class="code-line">  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
+</span><span class="code-line">    <span class="token keyword control-flow">return</span> <span class="token function">computeExpensiveValue</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span>
+</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+</span><span class="code-line">  <span class="token punctuation">[</span>a<span class="token punctuation">,</span> b<span class="token punctuation">]</span>
+</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span></code></pre>
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="useid"><a aria-hidden="true" tabindex="-1" href="#useid"><span class="icon icon-link"></span></a>useId</h3><div class="wrap-body">
+<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Checkbox</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line">  <span class="token keyword">const</span> id <span class="token operator">=</span> <span class="token function">useId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line">  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
+</span><span class="code-line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span></span><span class="token punctuation">></span></span><span class="token plain-text">
+</span></span><span class="code-line"><span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">htmlFor</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>id<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
+</span></span><span class="code-line"><span class="token plain-text">        你喜欢React吗？
+</span></span><span class="code-line"><span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span><span class="token plain-text">
+</span></span><span class="code-line"><span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">id</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>id<span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
+</span></span><span class="code-line"><span class="token plain-text">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span></span><span class="token punctuation">></span></span>
+</span><span class="code-line">  <span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
+</span></code></pre>
+<p>用于生成跨服务端和客户端稳定的唯一 <code>ID</code> 的同时避免 <code>hydration</code> 不匹配</p>
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="usedebugvalue"><a aria-hidden="true" tabindex="-1" href="#usedebugvalue"><span class="icon icon-link"></span></a>useDebugValue</h3><div class="wrap-body">
+<pre class="wrap-text "><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function">useFriendStatus</span><span class="token punctuation">(</span><span class="token parameter">friendID</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line">  <span class="token keyword">const</span> <span class="token punctuation">[</span>
+</span><span class="code-line">    isOnline<span class="token punctuation">,</span> setIsOnline
+</span><span class="code-line">  <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line">  <span class="token comment">// ...</span>
+</span><span class="code-line">  <span class="token comment">// 在开发者工具中的这个 Hook 旁边显示标签</span>
+</span><span class="code-line">  <span class="token comment">// e.g. "FriendStatus: Online"</span>
+</span><span class="code-line">  <span class="token function">useDebugValue</span><span class="token punctuation">(</span>
+</span><span class="code-line">    isOnline <span class="token operator">?</span> <span class="token string">'Online'</span> <span class="token operator">:</span> <span class="token string">'Offline'</span>
+</span><span class="code-line">  <span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line">  <span class="token keyword control-flow">return</span> isOnline<span class="token punctuation">;</span>
+</span><span class="code-line"><span class="token punctuation">}</span>
+</span></code></pre>
+<!--rehype:className=wrap-text -->
+<p>不推荐你向每个自定义 <code>Hook</code> 添加 <code>debug</code> 值</p>
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="componentdidmount--componentwillunmount"><a aria-hidden="true" tabindex="-1" href="#componentdidmount--componentwillunmount"><span class="icon icon-link"></span></a>componentDidMount &#x26; componentWillUnmount</h3><div class="wrap-body">
+<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token function">useEffect</span><span class="token punctuation">(</span>
+</span><span class="code-line">  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
+</span><span class="code-line">    <span class="token comment">// componentDidMount</span>
+</span><span class="code-line">    <span class="token comment">// 组件挂载时，可以在这里完成你的任务</span>
+</span><span class="code-line">    <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
+</span><span class="code-line">      <span class="token comment">// componentWillUnmount</span>
+</span><span class="code-line">      <span class="token comment">// 卸载时执行，清除 effect</span>
+</span><span class="code-line">    <span class="token punctuation">}</span><span class="token punctuation">;</span>
+</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+</span><span class="code-line">  <span class="token punctuation">[</span> <span class="token punctuation">]</span>
+</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span></code></pre>
+<p>这是一个类似 <code>class</code> 组件中 <code>componentDidMount</code> &#x26; <code>componentWillUnmount</code> 两个生命周期函数的写法。</p>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="生命周期"><a aria-hidden="true" tabindex="-1" href="#生命周期"><span class="icon icon-link"></span></a>生命周期</h2><div class="wrap-body">
-</div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="hooks"><a aria-hidden="true" tabindex="-1" href="#hooks"><span class="icon icon-link"></span></a>Hooks</h2><div class="wrap-body">
-</div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="proptypes-属性类型检查"><a aria-hidden="true" tabindex="-1" href="#proptypes-属性类型检查"><span class="icon icon-link"></span></a>PropTypes 属性类型检查</h2><div class="wrap-body">
+<!--rehype:body-class=cols-2-->
+</div></div><div class="h2wrap-body cols-2"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="挂载"><a aria-hidden="true" tabindex="-1" href="#挂载"><span class="icon icon-link"></span></a>挂载</h3><div class="wrap-body">
+<!--rehype:wrap-class=row-span-2-->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">方法</th><th>描述</th></tr></thead><tbody><tr><td align="left"><code>constructor</code> <em>(props)</em></td><td>渲染前 <a href="https://zh-hans.reactjs.org/docs/react-component.html#constructor">#</a></td></tr><tr><td align="left"><code>static getDerivedStateFromProps()</code></td><td>调用 <code>render</code> 方法之前调用 <a href="https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops">#</a></td></tr><tr><td align="left"><code>render()</code></td><td><code>class</code> 组件中唯一必须实现的方法 <a href="https://reactjs.org/docs/react-component.html#render">#</a></td></tr><tr><td align="left"><code>componentDidMount()</code></td><td>在组件挂载后(插入 DOM 树中)立即调用 <a href="https://reactjs.org/docs/react-component.html#componentdidmount">#</a></td></tr><tr><td align="left"><code>UNSAFE_componentWillMount()</code></td><td>在挂载之前被调用，建议使用 <code>constructor()</code> <a href="https://zh-hans.reactjs.org/docs/react-component.html#unsafe_componentwillmount">#</a></td></tr></tbody></table>
+<p>在 <code>constructor()</code> 上设置初始状态。在 <code>componentDidMount()</code> 上添加 DOM 事件处理程序、计时器（等），然后在 <code>componentWillUnmount()</code> 上删除它们。</p>
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="卸载"><a aria-hidden="true" tabindex="-1" href="#卸载"><span class="icon icon-link"></span></a>卸载</h3><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">方法</th><th>描述</th></tr></thead><tbody><tr><td align="left"><code>componentWillUnmount()</code></td><td>在组件卸载及销毁之前直接调用 <a href="https://zh-hans.reactjs.org/docs/react-component.html#componentwillunmount">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="过时-api"><a aria-hidden="true" tabindex="-1" href="#过时-api"><span class="icon icon-link"></span></a>过时 API</h3><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">过时方法</th><th>新方法</th></tr></thead><tbody><tr><td align="left"><del><code>componentWillMount()</code></del></td><td><code>UNSAFE_componentWillMount()</code>  <a href="https://zh-hans.reactjs.org/docs/react-component.html#unsafe_componentwillmount">#</a></td></tr><tr><td align="left"><del><code>componentWillReceiveProps()</code></del></td><td><code>UNSAFE_componentWillReceiveProps()</code>  <a href="https://zh-hans.reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops">#</a></td></tr><tr><td align="left"><del><code>componentWillUpdate()</code></del></td><td><code>UNSAFE_componentWillUpdate()</code>  <a href="https://zh-hans.reactjs.org/docs/react-component.html#unsafe_componentwillupdate">#</a></td></tr></tbody></table>
+<p>17+ 之后不再支持，在 <code>17</code> 版本之后，只有新的 <code>UNSAFE_</code> 生命周期名称可以使用。</p>
+</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="更新"><a aria-hidden="true" tabindex="-1" href="#更新"><span class="icon icon-link"></span></a>更新</h3><div class="wrap-body">
+<!--rehype:wrap-class=col-span-2-->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">方法</th><th>描述</th></tr></thead><tbody><tr><td align="left"><code>static getDerivedStateFromProps(props, state)</code></td><td>调用 <code>render</code> 之前调用，在初始挂载及后续更新时都会被调用 <a href="https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops">#</a></td></tr><tr><td align="left"><code>shouldComponentUpdate(nextProps, nextState)</code></td><td>如果返回 <code>false</code>，则跳过 <code>render()</code> <a href="https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops">#</a></td></tr><tr><td align="left"><code>render()</code></td><td>在不修改组件 <code>state</code> 的情况下，每次调用时都返回相同的结果 <a href="https://zh-hans.reactjs.org/docs/react-component.html#render">#</a></td></tr><tr><td align="left"><code>getSnapshotBeforeUpdate()</code></td><td>在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置） <a href="https://zh-hans.reactjs.org/docs/react-component.html#getsnapshotbeforeupdate">#</a></td></tr><tr><td align="left"><code>componentDidUpdate()</code></td><td>这里使用 <code>setState()</code>，但记得比较 <code>props</code>。首次渲染不会执行此方法 <a href="https://zh-hans.reactjs.org/docs/react-component.html#componentdidupdate">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="错误处理"><a aria-hidden="true" tabindex="-1" href="#错误处理"><span class="icon icon-link"></span></a>错误处理</h3><div class="wrap-body">
+<!--rehype:wrap-class=col-span-2-->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">方法</th><th>描述</th></tr></thead><tbody><tr><td align="left"><code>static getDerivedStateFromError(error)</code></td><td>后代组件抛出错误后被调用，它将抛出的错误作为参数，并返回一个值以更新 <code>state</code> <a href="https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromerror">#</a></td></tr><tr><td align="left"><code>componentDidCatch(error, info)</code></td><td>在后代组件抛出错误后被调用，会在“提交”阶段被调用，因此允许执行副作用 <a href="https://zh-hans.reactjs.org/docs/react-component.html#componentdidcatch">#</a></td></tr></tbody></table>
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="render"><a aria-hidden="true" tabindex="-1" href="#render"><span class="icon icon-link"></span></a>render()</h3><div class="wrap-body">
+<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">Welcome</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
+</span><span class="code-line highlight-line">  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line">    <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, </span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
+</span><span class="code-line">  <span class="token punctuation">}</span>
+</span><span class="code-line"><span class="token punctuation">}</span>
+</span></code></pre>
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="constructor"><a aria-hidden="true" tabindex="-1" href="#constructor"><span class="icon icon-link"></span></a>constructor()</h3><div class="wrap-body">
+<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line highlight-line"><span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line">  <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line">  <span class="token comment">// 不要在这里调用 this.setState()</span>
+</span><span class="code-line">  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">counter</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
+</span><span class="code-line">  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">handleClick</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">handleClick</span><span class="token punctuation">.</span><span class="token method function property-access">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line"><span class="token punctuation">}</span>
+</span></code></pre>
+</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="static-getderivedstatefromerror"><a aria-hidden="true" tabindex="-1" href="#static-getderivedstatefromerror"><span class="icon icon-link"></span></a>static getDerivedStateFromError()</h3><div class="wrap-body">
+<!--rehype:wrap-class=row-span-2-->
+<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">ErrorBoundary</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
+</span><span class="code-line">  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line">    <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line">    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">hasError</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
+</span><span class="code-line">  <span class="token punctuation">}</span>
+</span><span class="code-line">
+</span><span class="code-line highlight-line">  <span class="token keyword">static</span> <span class="token function">getDerivedStateFromError</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line">    <span class="token comment">// 更新 state 使下一次渲染可以显降级 UI</span>
+</span><span class="code-line">    <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span> <span class="token literal-property property">hasError</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
+</span><span class="code-line">  <span class="token punctuation">}</span>
+</span><span class="code-line">
+</span><span class="code-line">  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line highlight-line">    <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">hasError</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line">      <span class="token comment">// 你可以渲染任何自定义的降级  UI</span>
+</span><span class="code-line">      <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Something went wrong.</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
+</span><span class="code-line">    <span class="token punctuation">}</span>
+</span><span class="code-line">
+</span><span class="code-line">    <span class="token keyword control-flow">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">;</span>
+</span><span class="code-line">  <span class="token punctuation">}</span>
+</span><span class="code-line"><span class="token punctuation">}</span>
+</span></code></pre>
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="componentdidupdate"><a aria-hidden="true" tabindex="-1" href="#componentdidupdate"><span class="icon icon-link"></span></a>componentDidUpdate()</h3><div class="wrap-body">
+<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line highlight-line"><span class="token function">componentDidUpdate</span><span class="token punctuation">(</span><span class="token parameter">prevProps</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line">  <span class="token comment">// 典型用法（不要忘记比较 props）：</span>
+</span><span class="code-line">  <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">uid</span> <span class="token operator">!==</span> prevProps<span class="token punctuation">.</span><span class="token property-access">uid</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line">    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">fetchData</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">uid</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line">  <span class="token punctuation">}</span>
+</span><span class="code-line"><span class="token punctuation">}</span>
+</span></code></pre>
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="getsnapshotbeforeupdate"><a aria-hidden="true" tabindex="-1" href="#getsnapshotbeforeupdate"><span class="icon icon-link"></span></a>getSnapshotBeforeUpdate()</h3><div class="wrap-body">
+<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token function">getSnapshotBeforeUpdate</span><span class="token punctuation">(</span><span class="token parameter">prevProps<span class="token punctuation">,</span> prevState</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line">  <span class="token comment">// 我们是否在 list 中添加新的 items ？</span>
+</span><span class="code-line">  <span class="token comment">// 捕获滚动位置以便我们稍后调整滚动位置。</span>
+</span><span class="code-line">  <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>prevProps<span class="token punctuation">.</span><span class="token property-access">list</span><span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator">&#x3C;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">list</span><span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line">    <span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">listRef</span><span class="token punctuation">.</span><span class="token property-access">current</span><span class="token punctuation">;</span>
+</span><span class="code-line">    <span class="token keyword control-flow">return</span> list<span class="token punctuation">.</span><span class="token property-access">scrollHeight</span> <span class="token operator">-</span> list<span class="token punctuation">.</span><span class="token property-access">scrollTop</span><span class="token punctuation">;</span>
+</span><span class="code-line">  <span class="token punctuation">}</span>
+</span><span class="code-line">  <span class="token keyword control-flow">return</span> <span class="token keyword null nil">null</span><span class="token punctuation">;</span>
+</span><span class="code-line"><span class="token punctuation">}</span>
+</span></code></pre>
+</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="proptypes-属性类型检查"><a aria-hidden="true" tabindex="-1" href="#proptypes-属性类型检查"><span class="icon icon-link"></span></a>PropTypes 属性类型检查</h2><div class="wrap-body">
 </div></div><div class="h2wrap-body"><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3 id="proptypes"><a aria-hidden="true" tabindex="-1" href="#proptypes"><span class="icon icon-link"></span></a>PropTypes</h3><div class="wrap-body">
 <!--rehype:wrap-class=row-span-3-->
 <pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">PropTypes</span></span> <span class="token keyword module">from</span> <span class="token string">'prop-types'</span>