mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-19 13:41:21 +08:00
website: adjust the layout. f60826e6da
This commit is contained in:
jaywcjlove
@ -60,10 +60,10 @@
|
||||
</span><span class="code-line"><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">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"><</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>
|
||||
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><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">
|
||||
</div></div><div class="h3wrap-body"><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>
|
||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">npx create-react-app my-app
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="wrap h3body-not-exist"><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="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="导入多个导出"><a aria-hidden="true" tabindex="-1" href="#导入多个导出"><span class="icon icon-link"></span></a>导入多个导出</h3><div class="wrap-body">
|
||||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token 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"><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>
|
||||
@ -172,7 +172,7 @@
|
||||
<p>使用 <code>setState</code> 更新状态，下面是函数组件读取状态</p>
|
||||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">您点击了 </span><span class="token punctuation">{</span>count<span class="token punctuation">}</span><span class="token plain-text"> 次</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="class-中的-state"><a aria-hidden="true" tabindex="-1" href="#class-中的-state"><span class="icon icon-link"></span></a>Class 中的 State</h4><div class="wrap-body">
|
||||
</div></div><div class="h3wrap-body"><h4 id="class-中的-state"><a aria-hidden="true" tabindex="-1" href="#class-中的-state"><span class="icon icon-link"></span></a>Class 中的 State</h4>
|
||||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">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">
|
||||
</span><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">Student</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>
|
||||
@ -201,7 +201,7 @@
|
||||
<p>使用 <code>setState</code> 更新状态，<code>class</code> 组件中不能使用 <yel><del>hooks</del></yel>。下面是 <code>class</code> 组件读取状态</p>
|
||||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">您点击了</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">count</span><span class="token punctuation">}</span><span class="token plain-text">次</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="wrap h3body-not-exist"><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="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="循环"><a aria-hidden="true" tabindex="-1" href="#循环"><span class="icon icon-link"></span></a>循环</h3><div class="wrap-body">
|
||||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> elm <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'one'</span><span class="token punctuation">,</span> <span class="token string">'two'</span><span class="token punctuation">,</span> <span class="token string">'three'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Student</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||||
@ -308,7 +308,7 @@
|
||||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><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"><h4 id="使用"><a aria-hidden="true" tabindex="-1" href="#使用"><span class="icon icon-link"></span></a>使用</h4>
|
||||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// 你可以直接获取 DOM button 的 ref：</span>
|
||||
</span><span class="code-line"><span class="token keyword">const</span> ref <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">createRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line">
|
||||
@ -316,7 +316,7 @@
|
||||
</span></span><span class="code-line"><span class="token plain-text"> 点击我
|
||||
</span></span><span class="code-line"><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</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 h3body-not-exist"><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">
|
||||
</div></div><div class="wrap h3body-not-exist"><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"><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">
|
||||
</span><span class="code-line"><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>
|
||||
@ -397,7 +397,7 @@
|
||||
|
||||
|
||||
<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 h4body-not-exist"><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">
|
||||
</div></div><div class="h3wrap-body"><h4 id="onrender-回调函数"><a aria-hidden="true" tabindex="-1" href="#onrender-回调函数"><span class="icon icon-link"></span></a>onRender 回调函数</h4>
|
||||
|
||||
|
||||
|
||||
@ -432,7 +432,7 @@
|
||||
|
||||
|
||||
<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 h2body-exist"><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><div class="wrap h2body-exist"><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 h3body-exist 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"><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>
|
||||
@ -442,11 +442,11 @@
|
||||
</span><span class="code-line"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'blue'</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="使用-1"><a aria-hidden="true" tabindex="-1" href="#使用-1"><span class="icon icon-link"></span></a>使用</h4><div class="wrap-body">
|
||||
</div></div><div class="h3wrap-body"><h4 id="使用-1"><a aria-hidden="true" tabindex="-1" href="#使用-1"><span class="icon icon-link"></span></a>使用</h4>
|
||||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">CustomButton</span></span> <span class="token punctuation">/></span></span> <span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
<p>不传值 <code>props.color</code> 将自动设置为 <code>blue</code></p>
|
||||
</div></div></div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="class-组件默认-state"><a aria-hidden="true" tabindex="-1" href="#class-组件默认-state"><span class="icon icon-link"></span></a>Class 组件默认 state</h3><div class="wrap-body">
|
||||
</div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="class-组件默认-state"><a aria-hidden="true" tabindex="-1" href="#class-组件默认-state"><span class="icon icon-link"></span></a>Class 组件默认 state</h3><div class="wrap-body">
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">Hello</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token function">constructor</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@ -609,10 +609,10 @@
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
<p>注意：组件必须总是返回一些东西。</p>
|
||||
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="使用-2"><a aria-hidden="true" tabindex="-1" href="#使用-2"><span class="icon icon-link"></span></a>使用</h4><div class="wrap-body">
|
||||
</div></div><div class="h3wrap-body"><h4 id="使用-2"><a aria-hidden="true" tabindex="-1" href="#使用-2"><span class="icon icon-link"></span></a>使用</h4>
|
||||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Greeting</span></span> <span class="token attr-name">firstName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>三<span class="token punctuation">"</span></span> <span class="token attr-name">lastName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>张<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="jsx-三目运算符--与运算符-"><a aria-hidden="true" tabindex="-1" href="#jsx-三目运算符--与运算符-"><span class="icon icon-link"></span></a>JSX 三目运算符 / 与运算符 &&</h3><div class="wrap-body">
|
||||
</div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="jsx-三目运算符--与运算符-"><a aria-hidden="true" tabindex="-1" href="#jsx-三目运算符--与运算符-"><span class="icon icon-link"></span></a>JSX 三目运算符 / 与运算符 &&</h3><div class="wrap-body">
|
||||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><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">Weather</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"> <span class="token keyword">const</span> isLoggedIn <span class="token operator">=</span> props<span class="token punctuation">.</span><span class="token property-access">isLoggedIn</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||||
@ -683,7 +683,7 @@
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap h3body-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="class-组件-api"><a aria-hidden="true" tabindex="-1" href="#class-组件-api"><span class="icon icon-link"></span></a>Class 组件 API</h3><div class="wrap-body">
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="额外的-api"><a aria-hidden="true" tabindex="-1" href="#额外的-api"><span class="icon icon-link"></span></a>额外的 API</h4><div class="wrap-body">
|
||||
</div></div><div class="h3wrap-body"><h4 id="额外的-api"><a aria-hidden="true" tabindex="-1" href="#额外的-api"><span class="icon icon-link"></span></a>额外的 API</h4>
|
||||
|
||||
|
||||
|
||||
@ -706,7 +706,7 @@
|
||||
|
||||
|
||||
<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>this.forceUpdate()</code></td><td>强制重新渲染</td></tr><tr><td align="left"><code>this.setState({ ... })</code></td><td>更新状态</td></tr><tr><td align="left"><code>this.setState(state =>{ ... })</code></td><td>更新状态</td></tr></tbody></table>
|
||||
</div></div></div><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="属性-1"><a aria-hidden="true" tabindex="-1" href="#属性-1"><span class="icon icon-link"></span></a>属性</h4><div class="wrap-body">
|
||||
<h4 id="属性-1"><a aria-hidden="true" tabindex="-1" href="#属性-1"><span class="icon icon-link"></span></a>属性</h4>
|
||||
|
||||
|
||||
|
||||
@ -725,7 +725,7 @@
|
||||
|
||||
|
||||
<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>defaultProps</code></td><td>默认 props</td></tr><tr><td align="left"><code>displayName</code></td><td>显示组件名称(用于调试)</td></tr></tbody></table>
|
||||
</div></div></div><div class="wrap h4body-not-exist"><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">
|
||||
<h4 id="实例属性"><a aria-hidden="true" tabindex="-1" href="#实例属性"><span class="icon icon-link"></span></a>实例属性</h4>
|
||||
|
||||
|
||||
|
||||
@ -744,7 +744,7 @@
|
||||
|
||||
|
||||
<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>this.props</code></td><td>组件接受参数</td></tr><tr><td align="left"><code>this.state</code></td><td>组件内状态</td></tr></tbody></table>
|
||||
</div></div></div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="pure-组件"><a aria-hidden="true" tabindex="-1" href="#pure-组件"><span class="icon icon-link"></span></a>Pure 组件</h3><div class="wrap-body">
|
||||
</div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="pure-组件"><a aria-hidden="true" tabindex="-1" href="#pure-组件"><span class="icon icon-link"></span></a>Pure 组件</h3><div class="wrap-body">
|
||||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token maybe-class-name">PureComponent</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">
|
||||
</span><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">MessageBox</span> <span class="token keyword">extends</span> <span class="token class-name">PureComponent</span> <span class="token punctuation">{</span>
|
||||
@ -865,7 +865,7 @@
|
||||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="hooks"><a aria-hidden="true" tabindex="-1" href="#hooks"><span class="icon icon-link"></span></a>Hooks</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="hooks-api-参考"><a aria-hidden="true" tabindex="-1" href="#hooks-api-参考"><span class="icon icon-link"></span></a>Hooks API 参考</h3><div class="wrap-body">
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="基础-hook"><a aria-hidden="true" tabindex="-1" href="#基础-hook"><span class="icon icon-link"></span></a>基础 Hook</h4><div class="wrap-body">
|
||||
</div></div><div class="h3wrap-body"><h4 id="基础-hook"><a aria-hidden="true" tabindex="-1" href="#基础-hook"><span class="icon icon-link"></span></a>基础 Hook</h4>
|
||||
|
||||
|
||||
|
||||
@ -888,7 +888,7 @@
|
||||
|
||||
|
||||
<table><thead><tr><th align="left">方法</th><th>描述</th></tr></thead><tbody><tr><td align="left"><code>useState</code></td><td>返回一个 <code>state</code>，更新 <code>state</code> 的函数 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usestate">#</a></td></tr><tr><td align="left"><code>useEffect</code></td><td>可能有副作用代码的函数 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#useeffect">#</a></td></tr><tr><td align="left"><code>useContext</code></td><td>接收并返回该 <code>context</code> 的当前值 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usecontext">#</a></td></tr></tbody></table>
|
||||
</div></div></div><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="额外的-hook"><a aria-hidden="true" tabindex="-1" href="#额外的-hook"><span class="icon icon-link"></span></a>额外的 Hook</h4><div class="wrap-body">
|
||||
<h4 id="额外的-hook"><a aria-hidden="true" tabindex="-1" href="#额外的-hook"><span class="icon icon-link"></span></a>额外的 Hook</h4>
|
||||
|
||||
|
||||
|
||||
@ -939,7 +939,7 @@
|
||||
|
||||
|
||||
<table><thead><tr><th align="left">方法</th><th>描述</th></tr></thead><tbody><tr><td align="left"><code>useReducer</code></td><td><code>useState</code> 的替代方案 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usestate">#</a></td></tr><tr><td align="left"><code>useCallback</code></td><td>返回一个回调函数 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usecallback">#</a></td></tr><tr><td align="left"><code>useMemo</code></td><td>返回一个 <a href="https://en.wikipedia.org/wiki/Memoization">memoized</a> 值<a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usememo">#</a></td></tr><tr><td align="left"><code>useRef</code></td><td>返回一个可变的 <code>ref</code> 对象 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#useref">#</a></td></tr><tr><td align="left"><code>useImperativeHandle</code></td><td>暴露给父组件的实例值 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#useimperativehandle">#</a></td></tr><tr><td align="left"><code>useLayoutEffect</code></td><td>DOM 变更后同步调用函数 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#uselayouteffect">#</a></td></tr><tr><td align="left"><code>useDebugValue</code></td><td>开发者工具中显示标签 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usedebugvalue">#</a></td></tr><tr><td align="left"><code>useDeferredValue</code></td><td>接受并返回该值的新副本 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usedeferredvalue">#</a></td></tr><tr><td align="left"><code>useTransition</code></td><td>过渡任务的等待状态 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usetransition">#</a></td></tr><tr><td align="left"><code>useId</code></td><td>用于生成唯一 ID <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#useid">#</a></td></tr></tbody></table>
|
||||
</div></div></div><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="library-hooks"><a aria-hidden="true" tabindex="-1" href="#library-hooks"><span class="icon icon-link"></span></a>Library Hooks</h4><div class="wrap-body">
|
||||
<h4 id="library-hooks"><a aria-hidden="true" tabindex="-1" href="#library-hooks"><span class="icon icon-link"></span></a>Library Hooks</h4>
|
||||
|
||||
|
||||
|
||||
@ -958,7 +958,7 @@
|
||||
|
||||
|
||||
<table><thead><tr><th align="left">方法</th><th>描述</th></tr></thead><tbody><tr><td align="left"><code>useSyncExternalStore</code></td><td>读取和订阅外部数据源 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usesyncexternalstore">#</a></td></tr><tr><td align="left"><code>useInsertionEffect</code></td><td>DOM 突变之前 同步触发 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usesyncexternalstore">#</a></td></tr></tbody></table>
|
||||
</div></div></div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="函数式更新"><a aria-hidden="true" tabindex="-1" href="#函数式更新"><span class="icon icon-link"></span></a>函数式更新</h3><div class="wrap-body">
|
||||
</div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="函数式更新"><a aria-hidden="true" tabindex="-1" href="#函数式更新"><span class="icon icon-link"></span></a>函数式更新</h3><div class="wrap-body">
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Counter</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> initialCount <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">[</span>count<span class="token punctuation">,</span> setCount<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span>initialCount<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@ -1279,7 +1279,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>
|
||||
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><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">
|
||||
</div></div><div class="h3wrap-body"><h4 id="基础"><a aria-hidden="true" tabindex="-1" href="#基础"><span class="icon icon-link"></span></a><em>基础</em></h4>
|
||||
|
||||
|
||||
|
||||
@ -1310,7 +1310,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>
|
||||
</div></div></div><div class="wrap h4body-not-exist"><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">
|
||||
<h4 id="枚举-enum"><a aria-hidden="true" tabindex="-1" href="#枚举-enum"><span class="icon icon-link"></span></a><em>枚举 Enum</em></h4>
|
||||
|
||||
|
||||
|
||||
@ -1329,7 +1329,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>
|
||||
</div></div></div><div class="wrap h4body-not-exist"><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">
|
||||
<h4 id="数组-array"><a aria-hidden="true" tabindex="-1" href="#数组-array"><span class="icon icon-link"></span></a><em>数组 Array</em></h4>
|
||||
|
||||
|
||||
|
||||
@ -1348,7 +1348,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>
|
||||
</div></div></div><div class="wrap h4body-not-exist"><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">
|
||||
<h4 id="对象-object"><a aria-hidden="true" tabindex="-1" href="#对象-object"><span class="icon icon-link"></span></a><em>对象 Object</em></h4>
|
||||
|
||||
|
||||
|
||||
@ -1379,7 +1379,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>
|
||||
</div></div></div><div class="wrap h4body-not-exist"><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">
|
||||
<h4 id="元素-elements"><a aria-hidden="true" tabindex="-1" href="#元素-elements"><span class="icon icon-link"></span></a><em>元素 Elements</em></h4>
|
||||
|
||||
|
||||
|
||||
@ -1402,7 +1402,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>
|
||||
</div></div></div><div class="wrap h4body-not-exist"><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">
|
||||
<h4 id="必需的"><a aria-hidden="true" tabindex="-1" href="#必需的"><span class="icon icon-link"></span></a><em>必需的</em></h4>
|
||||
|
||||
|
||||
|
||||
@ -1418,7 +1418,7 @@
|
||||
|
||||
<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 h3body-not-exist"><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="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="基本类型"><a aria-hidden="true" tabindex="-1" href="#基本类型"><span class="icon icon-link"></span></a>基本类型</h3><div class="wrap-body">
|
||||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token 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"> <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"> <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>
|
||||
|
||||
Reference in New Issue
Block a user