doc: Update react.md cheatsheet. e7bda84f2a

This commit is contained in:
jaywcjlove
2022-10-04 18:52:36 +00:00
parent 3823554f58
commit 0199aac757

View File

@ -51,7 +51,10 @@
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> root <span class="token operator">=</span> <span class="token function">createRoot</span><span class="token punctuation">(</span>elm<span class="token punctuation">)</span><span class="token punctuation">;</span> </span><span class="code-line line-number" line="2"><span class="token keyword">const</span> root <span class="token operator">=</span> <span class="token function">createRoot</span><span class="token punctuation">(</span>elm<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3">root<span class="token punctuation">.</span><span class="token method function property-access">render</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">App</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> </span><span class="code-line line-number" line="3">root<span class="token punctuation">.</span><span class="token method function property-access">render</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">App</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre> </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"> </div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="快速创建-react-项目-cra"><a aria-hidden="true" tabindex="-1" href="#快速创建-react-项目-cra"><span class="icon icon-link"></span></a>快速创建 <strong>React</strong> 项目 (<a href="https://github.com/facebook/create-react-app">CRA</a>)</h4><div class="wrap-body">
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">npx create-react-app my-app
</span></code></pre>
</div></div></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> <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><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">ReactDOM</span></span> <span class="token keyword module">from</span> <span class="token string">'react-dom'</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">ReactDOM</span></span> <span class="token keyword module">from</span> <span class="token string">'react-dom'</span>
</span></code></pre> </span></code></pre>
@ -860,7 +863,7 @@
<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>any</code></td><td>任意类型</td></tr><tr><td align="left"><code>(props, propName, 组件名称)=>{}</code></td><td>自定义验证器</td></tr></tbody></table> <table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>any</code></td><td>任意类型</td></tr><tr><td align="left"><code>(props, propName, 组件名称)=>{}</code></td><td>自定义验证器</td></tr></tbody></table>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="基础"><a aria-hidden="true" tabindex="-1" href="#基础"><span class="icon icon-link"></span></a>基础</h4><div class="wrap-body"> </div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="基础"><a aria-hidden="true" tabindex="-1" href="#基础"><span class="icon icon-link"></span></a><em>基础</em></h4><div class="wrap-body">
@ -891,7 +894,7 @@
<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>string</code></td><td>字符串</td></tr><tr><td align="left"><code>number</code></td><td>数组</td></tr><tr><td align="left"><code>func</code></td><td>函数</td></tr><tr><td align="left"><code>bool</code></td><td>布尔值</td></tr><tr><td align="left"><code>symbol</code></td><td>-</td></tr></tbody></table> <table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>string</code></td><td>字符串</td></tr><tr><td align="left"><code>number</code></td><td>数组</td></tr><tr><td align="left"><code>func</code></td><td>函数</td></tr><tr><td align="left"><code>bool</code></td><td>布尔值</td></tr><tr><td align="left"><code>symbol</code></td><td>-</td></tr></tbody></table>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="枚举-enum"><a aria-hidden="true" tabindex="-1" href="#枚举-enum"><span class="icon icon-link"></span></a>枚举 Enum</h4><div class="wrap-body"> </div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="枚举-enum"><a aria-hidden="true" tabindex="-1" href="#枚举-enum"><span class="icon icon-link"></span></a><em>枚举 Enum</em></h4><div class="wrap-body">
@ -910,7 +913,7 @@
<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>oneOf(any)</code></td><td>枚举类型</td></tr><tr><td align="left"><code>oneOfType([type])</code></td><td>几种类型中的任意一个类型</td></tr></tbody></table> <table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>oneOf(any)</code></td><td>枚举类型</td></tr><tr><td align="left"><code>oneOfType([type])</code></td><td>几种类型中的任意一个类型</td></tr></tbody></table>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="数组-array"><a aria-hidden="true" tabindex="-1" href="#数组-array"><span class="icon icon-link"></span></a>数组 Array</h4><div class="wrap-body"> </div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="数组-array"><a aria-hidden="true" tabindex="-1" href="#数组-array"><span class="icon icon-link"></span></a><em>数组 Array</em></h4><div class="wrap-body">
@ -929,7 +932,7 @@
<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>array</code></td><td>数组</td></tr><tr><td align="left"><code>arrayOf</code></td><td>数组由某一类型的元素组成</td></tr></tbody></table> <table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>array</code></td><td>数组</td></tr><tr><td align="left"><code>arrayOf</code></td><td>数组由某一类型的元素组成</td></tr></tbody></table>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="对象-object"><a aria-hidden="true" tabindex="-1" href="#对象-object"><span class="icon icon-link"></span></a>对象 Object</h4><div class="wrap-body"> </div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="对象-object"><a aria-hidden="true" tabindex="-1" href="#对象-object"><span class="icon icon-link"></span></a><em>对象 Object</em></h4><div class="wrap-body">
@ -960,7 +963,7 @@
<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>object</code></td><td>对象</td></tr><tr><td align="left"><code>objectOf</code></td><td>对象由某一类型的值组成</td></tr><tr><td align="left"><code>instanceOf(...)</code></td><td>类的实例</td></tr><tr><td align="left"><code>shape</code></td><td>对象由特定的类型值组成</td></tr><tr><td align="left"><code>exact</code></td><td>有额外属性警告</td></tr></tbody></table> <table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>object</code></td><td>对象</td></tr><tr><td align="left"><code>objectOf</code></td><td>对象由某一类型的值组成</td></tr><tr><td align="left"><code>instanceOf(...)</code></td><td>类的实例</td></tr><tr><td align="left"><code>shape</code></td><td>对象由特定的类型值组成</td></tr><tr><td align="left"><code>exact</code></td><td>有额外属性警告</td></tr></tbody></table>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="元素-elements"><a aria-hidden="true" tabindex="-1" href="#元素-elements"><span class="icon icon-link"></span></a>元素 Elements</h4><div class="wrap-body"> </div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="元素-elements"><a aria-hidden="true" tabindex="-1" href="#元素-elements"><span class="icon icon-link"></span></a><em>元素 Elements</em></h4><div class="wrap-body">
@ -983,7 +986,7 @@
<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>element</code></td><td>React 元素</td></tr><tr><td align="left"><code>elementType</code></td><td>React 元素类型(即 <code>MyComponent</code>)</td></tr><tr><td align="left"><code>node</code></td><td>DOM 节点</td></tr></tbody></table> <table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>element</code></td><td>React 元素</td></tr><tr><td align="left"><code>elementType</code></td><td>React 元素类型(即 <code>MyComponent</code>)</td></tr><tr><td align="left"><code>node</code></td><td>DOM 节点</td></tr></tbody></table>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="必需的"><a aria-hidden="true" tabindex="-1" href="#必需的"><span class="icon icon-link"></span></a>必需的</h4><div class="wrap-body"> </div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="必需的"><a aria-hidden="true" tabindex="-1" href="#必需的"><span class="icon icon-link"></span></a><em>必需的</em></h4><div class="wrap-body">