doc: Update react.md cheatsheet. 0d0330c38c

docs/react.html

@@ -221,8 +221,10 @@
 </span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
 </span><span class="code-line line-number" line="4">
 </span><span class="code-line line-number" line="5"><span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token punctuation">(</span>
-</span><span class="code-line line-number" line="6">  <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 class="token function">addNumbers</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">}</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="6">  <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="code-line line-number" line="7"><span class="token punctuation">)</span>
+</span></span><span class="code-line line-number" line="7"><span class="token plain-text">    </span><span class="token punctuation">{</span><span class="token function">addNumbers</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
+</span></span><span class="code-line line-number" line="8"><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><span class="code-line line-number" line="9"><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="嵌套"><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">import</span> <span class="token imports"><span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
@@ -239,19 +241,6 @@
 </span><span class="code-line line-number" line="12">  <span class="token punctuation">)</span><span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="13"><span class="token punctuation">}</span>
 </span></code></pre>
-</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="fragment"><a aria-hidden="true" tabindex="-1" href="#fragment"><span class="icon icon-link"></span></a>Fragment</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">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Fragment</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
-</span><span class="code-line line-number" line="2"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Avatar</span></span> <span class="token keyword module">from</span> <span class="token string">'./Avatar'</span><span class="token punctuation">;</span>
-</span><span class="code-line line-number" line="3"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Profile</span></span> <span class="token keyword module">from</span> <span class="token string">'./Profile'</span><span class="token punctuation">;</span>
-</span><span class="code-line line-number" line="4">
-</span><span class="code-line line-number" line="5"><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 line-number" line="6">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Fragment</span></span><span class="token punctuation">></span></span><span class="token plain-text">
-</span></span><span class="code-line line-number" line="7"><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 line-number" line="8"><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 line-number" line="9"><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">Fragment</span></span><span class="token punctuation">></span></span>
-</span><span class="code-line line-number" line="10"><span class="token punctuation">)</span>
-</span></code></pre>
-<p>从 <code>v16.2.0</code> 开始 <code>Fragment</code> 可用于返回多个子节点，而无需向 DOM 添加额外的包装节点。或者使用 <code>&#x3C;>&#x3C;/></code> 效果是一样的。</p>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="portals"><a aria-hidden="true" tabindex="-1" href="#portals"><span class="icon icon-link"></span></a>Portals</h3><div class="wrap-body">
 <p>React 并<em>没有</em>创建一个新的 <code>div</code>。它只是把子元素渲染到 <code>domNode</code> 中。<code>domNode</code> 是一个可以在任何位置的有效 DOM 节点。</p>
 <pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
@@ -262,6 +251,41 @@
 </span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
 </span></code></pre>
 <p>提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案</p>
+</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="fragment"><a aria-hidden="true" tabindex="-1" href="#fragment"><span class="icon icon-link"></span></a>Fragment</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 line-number" line="1"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Fragment</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
+</span><span class="code-line line-number" line="2"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Avatar</span></span> <span class="token keyword module">from</span> <span class="token string">'./Avatar'</span><span class="token punctuation">;</span>
+</span><span class="code-line line-number" line="3"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Profile</span></span> <span class="token keyword module">from</span> <span class="token string">'./Profile'</span><span class="token punctuation">;</span>
+</span><span class="code-line line-number" line="4">
+</span><span class="code-line line-number" line="5"><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 line-number" line="6">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Fragment</span></span><span class="token punctuation">></span></span><span class="token plain-text">
+</span></span><span class="code-line line-number" line="7"><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 line-number" line="8"><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 line-number" line="9"><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">Fragment</span></span><span class="token punctuation">></span></span>
+</span><span class="code-line line-number" line="10"><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</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 line-number" line="1"><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 line-number" line="2">  <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 line-number" line="3"><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 line-number" line="4"><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 line-number" line="5"><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 line-number" line="6"><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 line-number" line="1"><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 line-number" line="2">  <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 line-number" line="3"><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 line-number" line="1"><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 line-number" line="2">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">First item</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
+</span><span class="code-line line-number" line="3">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>B<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Second item</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
+</span><span class="code-line line-number" line="4"><span class="token punctuation">]</span><span class="token punctuation">;</span>
+</span></code></pre>
+<p>不要忘记 <code>key</code>！查看: <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="refs-转发"><a aria-hidden="true" tabindex="-1" href="#refs-转发"><span class="icon icon-link"></span></a>Refs 转发</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">const</span> <span class="token maybe-class-name">FancyButton</span> <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">forwardRef</span><span class="token punctuation">(</span>
 </span><span class="code-line line-number" line="2">  <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 arrow operator">=></span> <span class="token punctuation">(</span>
@@ -280,7 +304,7 @@
 </span></span><span class="code-line line-number" line="6"><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">FancyButton</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
 </span></code></pre>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="class-组件内部使用-ref-属性"><a aria-hidden="true" tabindex="-1" href="#class-组件内部使用-ref-属性"><span class="icon icon-link"></span></a>Class 组件内部使用 ref 属性</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">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Component</span><span class="token punctuation">,</span>createRef <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</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">import</span> <span class="token imports"><span class="token punctuation">{</span><span class="token maybe-class-name">Component</span><span class="token punctuation">,</span>createRef<span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
 </span><span class="code-line line-number" line="2">
 </span><span class="code-line line-number" line="3"><span class="token keyword">class</span> <span class="token class-name">MyComponent</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="4">  <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>
@@ -714,33 +738,6 @@
 </span><span class="code-line line-number" line="4">  ···
 </span><span class="code-line line-number" line="5"><span class="token punctuation">}</span>
 </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">
-<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
-</span><span class="code-line line-number" line="2"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">UserAvatar</span></span> <span class="token keyword module">from</span> <span class="token string">"./UserAvatar"</span><span class="token punctuation">;</span>
-</span><span class="code-line line-number" line="3">
-</span><span class="code-line line-number" line="4"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">UserProfile</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-</span><span class="code-line line-number" line="5">  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
-</span><span class="code-line line-number" line="6">    <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>UserProfile<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
-</span></span><span class="code-line line-number" line="7"><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">UserAvatar</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
-</span></span><span class="code-line line-number" line="8"><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">UserAvatar</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
-</span></span><span class="code-line line-number" line="9"><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><span class="code-line line-number" line="10">  <span class="token punctuation">)</span><span class="token punctuation">;</span>
-</span><span class="code-line line-number" line="11"><span class="token punctuation">}</span>
-</span></code></pre>
-<p>注意：假设 <code>UserAvatar</code> 在 <code>UserAvatar.js</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">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
-</span><span class="code-line line-number" line="2"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">CompName</span></span> <span class="token keyword module">from</span> <span class="token string">'component-name'</span><span class="token punctuation">;</span>
-</span><span class="code-line line-number" line="3">
-</span><span class="code-line line-number" line="4"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">UserProfile</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-</span><span class="code-line line-number" line="5">  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
-</span><span class="code-line line-number" line="6">    <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>UserProfile<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
-</span></span><span class="code-line line-number" line="7"><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">CompName</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
-</span></span><span class="code-line line-number" line="8"><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><span class="code-line line-number" line="9">  <span class="token punctuation">)</span><span class="token punctuation">;</span>
-</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span>
-</span></code></pre>
-<p>注意：外部组件在 <a href="https://www.npmjs.com">npmjs.com</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 line-number" line="1"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Component</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="2"><span class="token comment">// 高阶组件 with</span>
@@ -764,6 +761,79 @@
 </span><span class="code-line line-number" line="4">
 </span><span class="code-line line-number" line="5"><span class="token keyword">const</span> <span class="token maybe-class-name">MyComp</span> <span class="token operator">=</span> <span class="token keyword">with</span><span class="token punctuation">(</span><span class="token string">'Hello'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token maybe-class-name">LowComponent</span><span class="token punctuation">)</span>
 </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">
+<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">FancyBorder</span></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 line-number" line="2">  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
+</span><span class="code-line line-number" line="3">    <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 script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">'Fancy'</span><span class="token operator">+</span>props<span class="token punctuation">.</span><span class="token property-access">color</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
+</span></span><span class="code-line line-number" line="4"><span class="token plain-text">      </span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">}</span><span class="token plain-text">
+</span></span><span class="code-line line-number" line="5"><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><span class="code-line line-number" line="6">  <span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
+</span></code></pre>
+<p>组件可以通过 JSX 嵌套</p>
+<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">WelcomeDialog</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line line-number" line="2">  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
+</span><span class="code-line line-number" line="3">    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">FancyBorder</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
+</span></span><span class="code-line line-number" line="4"><span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h1</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>title<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>h1</span><span class="token punctuation">></span></span><span class="token plain-text">
+</span></span><span class="code-line line-number" line="5"><span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</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>message<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
+</span></span><span class="code-line line-number" line="6"><span class="token plain-text">        感谢您访问我们的宇宙飞船
+</span></span><span class="code-line line-number" line="7"><span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">
+</span></span><span class="code-line line-number" line="8"><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">FancyBorder</span></span><span class="token punctuation">></span></span>
+</span><span class="code-line line-number" line="9">  <span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span>
+</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">
+<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">SplitPane</span></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 line-number" line="2">  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
+</span><span class="code-line line-number" line="3">    <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>SplitPane<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
+</span></span><span class="code-line line-number" line="4"><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 attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
+</span></span><span class="code-line line-number" line="5"><span class="token plain-text">        </span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">left</span><span class="token punctuation">}</span><span class="token plain-text">
+</span></span><span class="code-line line-number" line="6"><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 plain-text">
+</span></span><span class="code-line line-number" line="7"><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 attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
+</span></span><span class="code-line line-number" line="8"><span class="token plain-text">        </span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">right</span><span class="token punctuation">}</span><span class="token plain-text">
+</span></span><span class="code-line line-number" line="9"><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 plain-text">
+</span></span><span class="code-line line-number" line="10"><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><span class="code-line line-number" line="11">  <span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line line-number" line="12"><span class="token punctuation">}</span>
+</span><span class="code-line line-number" line="13">
+</span><span class="code-line line-number" line="14"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">App</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line line-number" line="15">  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
+</span><span class="code-line line-number" line="16">    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">SplitPane</span></span>
+</span></span><span class="code-line line-number" line="17"><span class="token tag">      <span class="token attr-name">left</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Contacts</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span>
+</span></span><span class="code-line line-number" line="18"><span class="token tag">      <span class="token attr-name">right</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Chat</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span>
+</span></span><span class="code-line line-number" line="19"><span class="token tag">    <span class="token punctuation">/></span></span>
+</span><span class="code-line line-number" line="20">  <span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line line-number" line="21"><span class="token punctuation">}</span>
+</span></code></pre>
+<p>给组件 <code>SplitPane</code> 传递 <code>left</code> 和 <code>right</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">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
+</span><span class="code-line line-number" line="2"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">UserAvatar</span></span> <span class="token keyword module">from</span> <span class="token string">"./UserAvatar"</span><span class="token punctuation">;</span>
+</span><span class="code-line line-number" line="3">
+</span><span class="code-line line-number" line="4"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">UserProfile</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line line-number" line="5">  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
+</span><span class="code-line line-number" line="6">    <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>UserProfile<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
+</span></span><span class="code-line line-number" line="7"><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">UserAvatar</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
+</span></span><span class="code-line line-number" line="8"><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">UserAvatar</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
+</span></span><span class="code-line line-number" line="9"><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><span class="code-line line-number" line="10">  <span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line line-number" line="11"><span class="token punctuation">}</span>
+</span></code></pre>
+<p>注意：假设 <code>UserAvatar</code> 在 <code>UserAvatar.js</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">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
+</span><span class="code-line line-number" line="2"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span><span class="token maybe-class-name">Button</span><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'uiw'</span><span class="token punctuation">;</span>
+</span><span class="code-line line-number" line="3"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">UserProfile</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line line-number" line="4">  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
+</span><span class="code-line line-number" line="5">    <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>UserProfile<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
+</span></span><span class="code-line line-number" line="6"><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">Button</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>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
+</span></span><span class="code-line line-number" line="7"><span class="token plain-text">        主要按钮
+</span></span><span class="code-line line-number" line="8"><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">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">
+</span></span><span class="code-line line-number" line="9"><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><span class="code-line line-number" line="10">  <span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line line-number" line="11"><span class="token punctuation">}</span>
+</span></code></pre>
+<p>注意：外部组件在 <a href="https://www.npmjs.com">npmjs.com</a> 上找到，需要先安装导入</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">
@@ -1038,6 +1108,7 @@
 </span><span class="code-line line-number" line="2">  <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token method function property-access">instanceOf</span><span class="token punctuation">(</span><span class="token maybe-class-name">Message</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
 </span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
 </span></code></pre>
+<p>声明 <code>message</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">
 <ul>
 <li><a href="https://zh-hans.reactjs.org/">React 官方中文文档</a> <em>(zh-hans.reactjs.org)</em></li>