doc: Update react.md cheatsheet. 7840f947f8

2025-06-18 13:11:20 +08:00 · 2022-10-04 17:34:48 +00:00
parent 2069b2cea5
commit 143043e200
1 changed files with 357 additions and 2 deletions
--- a/docs/react.html
+++ b/docs/react.html
@ -312,7 +312,90 @@
 </span><span class="code-line line-number" line="15">  <span class="token punctuation">)</span><span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="16"><span class="token punctuation">}</span>
 </span></code></pre>
-</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 h3wrap"><h3 id="严格模式-strictmode"><a aria-hidden="true" tabindex="-1" href="#严格模式-strictmode"><span class="icon icon-link"></span></a>严格模式 StrictMode</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 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="2"><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">Header</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">React.StrictMode</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 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 class="token class-name">ComponentOne</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">ComponentTwo</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>div</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">React.StrictMode</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">Footer</span></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></code></pre>
+<hr>
+<ul>
+<li><a href="https://zh-hans.reactjs.org/docs/strict-mode.html#identifying-unsafe-lifecycles">识别不安全的生命周期</a></li>
+<li><a href="https://zh-hans.reactjs.org/docs/strict-mode.html#warning-about-legacy-string-ref-api-usage">关于使用过时字符串 ref API 的警告</a></li>
+<li><a href="https://zh-hans.reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage">关于使用废弃的 findDOMNode 方法的警告</a></li>
+<li><a href="https://zh-hans.reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects">检测意外的副作用</a></li>
+<li><a href="https://zh-hans.reactjs.org/docs/strict-mode.html#detecting-legacy-context-api">检测过时的 context API</a></li>
+<li><a href="https://zh-hans.reactjs.org/docs/strict-mode.html#ensuring-reusable-state">确保可复用的状态</a></li>
+</ul>
+<p>突出显示应用程序中潜在问题的工具。请参阅：<a href="https://zh-hans.reactjs.org/docs/strict-mode.html">严格模式</a></p>
+</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="profiler"><a aria-hidden="true" tabindex="-1" href="#profiler"><span class="icon icon-link"></span></a>Profiler</h3><div class="wrap-body">
+<!--rehype:wrap-class=col-span-2-->
+<p>测量一个 React 应用多久渲染一次以及渲染一次的 <code>代价</code></p>
+<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Profiler</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Navigation<span class="token punctuation">"</span></span> <span class="token attr-name">onRender</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>callback<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="2"><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">Navigation</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>props<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="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">Profiler</span></span><span class="token punctuation">></span></span>
+</span></code></pre>
+<p>为了分析 <code>Navigation</code> 组件和它的子代。应该在需要时才去使用它。</p>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>id(string)</code></td><td align="left">发生提交的 <code>Profiler</code> 树的 <code>id</code></td></tr><tr><td align="left"><code>onRender(function)</code></td><td align="left">组件树任何组件 “提交” 一个更新的时候调用这个函数</td></tr></tbody></table>
+</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="onrender-回调函数"><a aria-hidden="true" tabindex="-1" href="#onrender-回调函数"><span class="icon icon-link"></span></a>onRender 回调函数</h4><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>phase: "mount" | "update"</code></td><td align="left">判断是由 <code>props</code>/<code>state</code>/<code>hooks</code> 改变 或 “第一次装载” 引起的重渲染</td></tr><tr><td align="left"><code>actualDuration: number</code></td><td align="left">本次更新在渲染 Profiler 和它的子代上花费的时间</td></tr><tr><td align="left"><code>baseDuration: number</code></td><td align="left">在 Profiler 树中最近一次每一个组件 render 的持续时间</td></tr><tr><td align="left"><code>startTime: number</code></td><td align="left">本次更新中 React 开始渲染的时间戳</td></tr><tr><td align="left"><code>commitTime: number</code></td><td align="left">本次更新中 React commit 阶段结束的时间戳</td></tr><tr><td align="left"><code>interactions: Set</code></td><td align="left">当更新被制定时，“<a href="https://fb.me/react-interaction-tracing">interactions</a>” 的集合会被追踪</td></tr></tbody></table>
+</div></div></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 class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="class-组件默认-props"><a aria-hidden="true" tabindex="-1" href="#class-组件默认-props"><span class="icon icon-link"></span></a>Class 组件默认 props</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">class</span> <span class="token class-name">CustomButton</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>
@ -683,7 +766,279 @@
 </span></code></pre>
 </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="另见"><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="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 line-number" line="1"><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>
+</span></code></pre>
+<hr>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<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">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<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">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<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">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<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">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<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">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<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">
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>(···).isRequired</code></td><td>必需的</td></tr></tbody></table>
+<p>请参阅：<a href="https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html">使用 PropTypes 进行类型检查</a></p>
+</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 maybe-class-name">MyComponent</span><span class="token punctuation">.</span><span class="token property-access">propTypes</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
+</span><span class="code-line line-number" line="2">  <span class="token literal-property property">email</span><span class="token operator">:</span>      <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">string</span><span class="token punctuation">,</span>
+</span><span class="code-line line-number" line="3">  <span class="token literal-property property">seats</span><span class="token operator">:</span>      <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">number</span><span class="token punctuation">,</span>
+</span><span class="code-line line-number" line="4">  <span class="token literal-property property">callback</span><span class="token operator">:</span>   <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">func</span><span class="token punctuation">,</span>
+</span><span class="code-line line-number" line="5">  <span class="token literal-property property">isClosed</span><span class="token operator">:</span>   <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">bool</span><span class="token punctuation">,</span>
+</span><span class="code-line line-number" line="6">  <span class="token literal-property property">any</span><span class="token operator">:</span>        <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">any</span>
+</span><span class="code-line line-number" line="7">  <span class="token literal-property property">symbol</span><span class="token operator">:</span>     <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">symbol</span><span class="token punctuation">,</span>
+</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span>
+</span></code></pre>
+<p>你可以将属性声明为 JS 原生类型，默认都是可选的。</p>
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="必需的-1"><a aria-hidden="true" tabindex="-1" href="#必需的-1"><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 maybe-class-name">MyComponent</span><span class="token punctuation">.</span><span class="token property-access">propTypes</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
+</span><span class="code-line line-number" line="2">  <span class="token comment">// 确保这个 prop 没有被提供时，会打印警告信息</span>
+</span><span class="code-line line-number" line="3">  <span class="token literal-property property">requiredFunc</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">func</span><span class="token punctuation">.</span><span class="token property-access">isRequired</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 comment">// 任意类型的必需数据</span>
+</span><span class="code-line line-number" line="6">  <span class="token literal-property property">requiredAny</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">any</span><span class="token punctuation">.</span><span class="token property-access">isRequired</span><span class="token punctuation">,</span>
+</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
+</span></code></pre>
+<p>你可以在任何 <code>PropTypes</code> 属性后面加上 <code>isRequired</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-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token maybe-class-name">MyComponent</span><span class="token punctuation">.</span><span class="token property-access">propTypes</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
+</span><span class="code-line line-number" line="2">  <span class="token comment">// 只能是特定的值，枚举类型。</span>
+</span><span class="code-line line-number" line="3">  <span class="token literal-property property">optionalEnum</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">oneOf</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+</span><span class="code-line line-number" line="4">    <span class="token string">'News'</span><span class="token punctuation">,</span> <span class="token string">'Photos'</span>
+</span><span class="code-line line-number" line="5">  <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+</span><span class="code-line line-number" line="6">  <span class="token comment">// 一个对象可以是几种类型中的任意一个类型</span>
+</span><span class="code-line line-number" line="7">  <span class="token literal-property property">optionalUnion</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">oneOfType</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+</span><span class="code-line line-number" line="8">    <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">string</span><span class="token punctuation">,</span>
+</span><span class="code-line line-number" line="9">    <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">number</span><span class="token punctuation">,</span>
+</span><span class="code-line line-number" line="10">    <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><span class="code-line line-number" line="11">  <span class="token punctuation">]</span><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></code></pre>
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="元素-elements-1"><a aria-hidden="true" tabindex="-1" href="#元素-elements-1"><span class="icon icon-link"></span></a>元素 Elements</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 maybe-class-name">MyComponent</span><span class="token punctuation">.</span><span class="token property-access">propTypes</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
+</span><span class="code-line line-number" line="2">  <span class="token comment">// 任何可被渲染的元素</span>
+</span><span class="code-line line-number" line="3">  <span class="token comment">// (包括数字、字符串、元素或数组)</span>
+</span><span class="code-line line-number" line="4">  <span class="token comment">// (或 Fragment) 也包含这些类型。</span>
+</span><span class="code-line line-number" line="5">  <span class="token literal-property property">node</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">node</span><span class="token punctuation">,</span>
+</span><span class="code-line line-number" line="6">
+</span><span class="code-line line-number" line="7">  <span class="token comment">// 一个 React 元素。</span>
+</span><span class="code-line line-number" line="8">  <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">element</span><span class="token punctuation">,</span>
+</span><span class="code-line line-number" line="9">
+</span><span class="code-line line-number" line="10">  <span class="token comment">// 一个 React 元素类型（即，MyComponent）</span>
+</span><span class="code-line line-number" line="11">  <span class="token literal-property property">elementType</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">elementType</span><span class="token punctuation">,</span>
+</span><span class="code-line line-number" line="12"><span class="token punctuation">}</span>
+</span></code></pre>
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="对象-object-1"><a aria-hidden="true" tabindex="-1" href="#对象-object-1"><span class="icon icon-link"></span></a>对象 Object</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 maybe-class-name">MyComponent</span><span class="token punctuation">.</span><span class="token property-access">propTypes</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
+</span><span class="code-line line-number" line="2">  <span class="token comment">// 可以指定一个对象由某一类型的值组成</span>
+</span><span class="code-line line-number" line="3">  <span class="token literal-property property">objectOf</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">objectOf</span><span class="token punctuation">(</span>
+</span><span class="code-line line-number" line="4">    <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">number</span>
+</span><span class="code-line line-number" line="5">  <span class="token punctuation">)</span><span class="token punctuation">,</span>
+</span><span class="code-line line-number" line="6">  <span class="token comment">// 可以指定一个对象由特定的类型值组成</span>
+</span><span class="code-line line-number" line="7">  <span class="token literal-property property">objectWithShape</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">shape</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+</span><span class="code-line line-number" line="8">    <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">string</span><span class="token punctuation">,</span>
+</span><span class="code-line line-number" line="9">    <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">number</span>
+</span><span class="code-line line-number" line="10">  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+</span><span class="code-line line-number" line="11">  <span class="token comment">// 带有额外属性警告的对象</span>
+</span><span class="code-line line-number" line="12">  <span class="token literal-property property">objectWithStrictShape</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">exact</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+</span><span class="code-line line-number" line="13">    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">string</span><span class="token punctuation">,</span>
+</span><span class="code-line line-number" line="14">    <span class="token literal-property property">quantity</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">number</span>
+</span><span class="code-line line-number" line="15">  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+</span><span class="code-line line-number" line="16"><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 maybe-class-name">MyComponent</span><span class="token punctuation">.</span><span class="token property-access">propTypes</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
+</span><span class="code-line line-number" line="2">  <span class="token function-variable function">custom</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> propName<span class="token punctuation">,</span> compName</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="3">    <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">matchm</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token method function property-access">test</span><span class="token punctuation">(</span>props<span class="token punctuation">[</span>propName<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 line-number" line="4">      <span class="token comment">// 它在验证失败时应返回一个 Error 对象</span>
+</span><span class="code-line line-number" line="5">      <span class="token keyword control-flow">return</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span>
+</span><span class="code-line line-number" line="6">        <span class="token string">'无效的prop `'</span>
+</span><span class="code-line line-number" line="7">        <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> \`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>propName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">\` 提供给</span><span class="token template-punctuation string">`</span></span> <span class="token operator">+</span> 
+</span><span class="code-line line-number" line="8">        <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> \`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>compName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">\`。验证失败。</span><span class="token template-punctuation string">`</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><span class="code-line line-number" line="11">    <span class="token punctuation">}</span>
+</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>
+<p>请不要使用 <code>console.warn</code> 或抛出异常，因为这在 <code>oneOfType</code> 中不会起作用。</p>
+</div></div></div><div class="wrap col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3 id="自定义的-arrayof-或-objectof-验证器"><a aria-hidden="true" tabindex="-1" href="#自定义的-arrayof-或-objectof-验证器"><span class="icon icon-link"></span></a>自定义的 <code>arrayOf</code> 或 <code>objectOf</code> 验证器</h3><div class="wrap-body">
+<!--rehype:wrap-class=col-span-2 row-span-2-->
+<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token maybe-class-name">MyComponent</span><span class="token punctuation">.</span><span class="token property-access">propTypes</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
+</span><span class="code-line line-number" line="2">  <span class="token literal-property property">arrayProp</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">arrayOf</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">propValue<span class="token punctuation">,</span> key<span class="token punctuation">,</span> componentName<span class="token punctuation">,</span> <span class="token dom variable">location</span><span class="token punctuation">,</span> propFullName</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="3">    <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">matchme</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token method function property-access">test</span><span class="token punctuation">(</span>propValue<span class="token punctuation">[</span>key<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 line-number" line="4">      <span class="token comment">// 它应该在验证失败时返回一个 Error 对象。</span>
+</span><span class="code-line line-number" line="5">      <span class="token keyword control-flow">return</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span>
+</span><span class="code-line line-number" line="6">        <span class="token string">'Invalid prop `'</span> <span class="token operator">+</span> propFullName <span class="token operator">+</span> <span class="token string">'` supplied to'</span> <span class="token operator">+</span>
+</span><span class="code-line line-number" line="7">        <span class="token string">' `'</span> <span class="token operator">+</span> componentName <span class="token operator">+</span> <span class="token string">'`. Validation failed.'</span>
+</span><span class="code-line line-number" line="8">      <span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span><span class="code-line line-number" line="9">    <span class="token punctuation">}</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>propValue</code> 是数组或对象本身，<code>key</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 maybe-class-name">MyComponent</span><span class="token punctuation">.</span><span class="token property-access">propTypes</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
+</span><span class="code-line line-number" line="2">  <span class="token literal-property property">arr</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">arrayOf</span><span class="token punctuation">(</span><span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">number</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>可以指定一个数组由某一类型的元素组成</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 maybe-class-name">MyComponent</span><span class="token punctuation">.</span><span class="token property-access">propTypes</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
+</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>
+</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>
 <li><a href="https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/">反应生命周期方法图</a> <em>(projects.wojtekmaj.pl)</em></li>