buyfakett/reference
1
0
Fork 0
mirror of https://github.com/jaywcjlove/reference.git synced 2025-06-18 05:01:21 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
e80ce23cb85504580f0a00ced870fbd211f31600
reference/docs/react.html
jaywcjlove e80ce23cb8 doc: update react.md cheatsheet. 821f1965b3
2022-10-03 17:00:35 +00:00

645 lines
129 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" data-color-mode="dark">
<head>
<meta charset="utf-8">
<title>React 备忘清单
&#x26; react cheatsheet &#x26; Quick Reference</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta description="适合初学者的综合 React 备忘清单。为开发人员分享快速参考备忘单。">
<meta keywords="Quick,Reference,cheatsheet,react">
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20opacity%3D%22.4%22%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23777%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23999%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23999%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
<link rel="stylesheet" href="../style/style.css">
</head>
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
<path opacity=".4" d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="currentColor"></path>
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="currentColor"></path>
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="currentColor"></path>
</svg>
<span class="title">Quick Reference</span></a><div class="menu"><a href="https://github.com/jaywcjlove/reference/blob/main/docs/react.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
</svg>
</button><script>
const LOCAL_NANE = '_dark_mode_theme_'
const rememberedValue = localStorage.getItem(LOCAL_NANE);
if (rememberedValue && ['light', 'dark'].includes(rememberedValue)) {
document.documentElement.setAttribute('data-color-mode', rememberedValue);
}
const button = document.querySelector('#darkMode');
button.onclick = () => {
const theme = document.documentElement.dataset.colorMode;
const mode = theme === 'light' ? 'dark' : 'light';
document.documentElement.setAttribute('data-color-mode', mode);
localStorage.setItem(LOCAL_NANE, mode);
}
</script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap max-container"><header class="wrap-header h1wrap"><h1 id="react-备忘清单"><a aria-hidden="true" tabindex="-1" href="#react-备忘清单"><span class="icon icon-link"></span></a>React 备忘清单</h1><div class="wrap-body">
<p>适合初学者的综合 React 备忘清单。</p>
</div></header><div class="h1wrap-body"><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"><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">
<p>React 是一个用于构建用户界面的 JavaScript 库。</p>
<ul>
<li><a href="https://reactjs.org/">React 官方文档</a> <em>(reactjs.org)</em></li>
</ul>
<pre class="language-js"><code class="language-js 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><span class="code-line line-number" line="2"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>createRoot<span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react-dom/client'</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">App</span></span> <span class="token keyword module">from</span> <span class="token string">'./App'</span>
</span></code></pre>
<hr>
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> elm <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">'app'</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></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 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></code></pre>
<hr>
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword module">export</span> <span class="token keyword">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 line-number" line="2"> <span class="token spread operator">...</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
</span></code></pre>
<p>使用 <code>export</code> 或者 <code>export default</code> 导出 <code>Hello</code> 组件</p>
<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">Hello</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'./hello.js'</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2">
</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> <span class="token maybe-class-name">Example</span> <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Hello</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
</span></code></pre>
<p>使用 <code>import</code> 导入 <code>Hello</code> 组件，在示例中使用。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="react-组件中的-css"><a aria-hidden="true" tabindex="-1" href="#react-组件中的-css"><span class="icon icon-link"></span></a>React 组件中的 CSS</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 string">"./Student.css"</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">const</span> <span class="token maybe-class-name">Student</span> <span class="token operator">=</span> <span class="token punctuation">(</span>
</span><span class="code-line line-number" line="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>Student<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span><span class="code-line line-number" line="6"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
<p>注意：类属性 <code>className</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> divStyle <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">backgroundImage</span><span class="token operator">:</span> <span class="token string">'url('</span> <span class="token operator">+</span> imgUrl <span class="token operator">+</span> <span class="token string">')'</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><span class="code-line line-number" line="4"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token maybe-class-name">Student</span> <span class="token operator">=</span> <span class="token punctuation">(</span>
</span><span class="code-line line-number" line="5"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>divStyle<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span><span class="code-line line-number" line="6"><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 tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Student</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Julie<span class="token punctuation">"</span></span> <span class="token attr-name">age</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">23</span><span class="token punctuation">}</span></span>
</span></span><span class="code-line line-number" line="2"><span class="token tag"> <span class="token attr-name">pro</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
</span></code></pre>
<p>函数组件 <code>Student</code> 中访问属性</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">Student</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 tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, </span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
</span></code></pre>
<p>Class 组件 <code>Student</code> 中访问属性</p>
<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">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>
</span><span class="code-line line-number" line="2"> <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="3"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
</span><span class="code-line line-number" line="4"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, </span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h1</span><span class="token punctuation">></span></span>
</span><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 punctuation">}</span>
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
</span></code></pre>
<p><code>class</code> 组件使用 <code>this.props</code> 访问传递给组件的属性。</p>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="children"><a aria-hidden="true" tabindex="-1" href="#children"><span class="icon icon-link"></span></a>Children</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">function</span> <span class="token function"><span class="token maybe-class-name">Example</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">AlertBox</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 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><span class="token class-name">AlertBox</span></span><span class="token punctuation">></span></span>
</span><span class="code-line line-number" line="6"> <span class="token punctuation">)</span>
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
</span></code></pre>
<p>函数 <code>AlertBox</code> 组件</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">AlertBox</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>alert-box<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>
<hr>
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">}</span>
</span></code></pre>
<p>Class <code>AlertBox</code> 组件，与函数组件 <code>AlertBox</code> 组件相同</p>
<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">AlertBox</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <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="3"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
</span><span class="code-line line-number" line="4"> <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>alert-box<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><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">}</span><span 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><span class="code-line line-number" line="7"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="8"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="9"><span class="token punctuation">}</span>
</span></code></pre>
<hr>
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">}</span>
</span></code></pre>
<p><code>children</code> 作为子组件的的属性传递。</p>
</div></div></div><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3 id="state"><a aria-hidden="true" tabindex="-1" href="#state"><span class="icon icon-link"></span></a>State</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-3-->
<p>函数中的 State，Hook 是 React 16.8 的新增特性</p>
<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><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2">
</span><span class="code-line line-number" line="3"><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 line-number" line="4"> <span class="token comment">// 声明一个叫 "count" 的 state 变量</span>
</span><span class="code-line line-number" line="5"> <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><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="6"> <span class="token keyword">const</span> <span class="token function-variable function">click</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 function">setCount</span><span class="token punctuation">(</span>count <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="7">
</span><span class="code-line line-number" line="8"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
</span><span class="code-line line-number" line="9"> <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>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">&#x3C;/</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">
</span></span><span class="code-line line-number" line="11"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>click<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="12"><span class="token plain-text"> 点击我
</span></span><span class="code-line line-number" line="13"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
</span></span><span class="code-line line-number" line="14"><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="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>
<p>使用 <code>setState</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>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">&#x3C;/</span>p</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap"><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">
<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><span class="code-line line-number" line="3"><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>
</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>
</span><span class="code-line line-number" line="5"> <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="6"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span><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><span class="code-line line-number" line="8"> <span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="9"> <span class="token keyword">const</span> count <span class="token operator">=</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><span class="code-line line-number" line="10"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">count</span><span class="token operator">:</span> count <span class="token operator">+</span> <span class="token number">1</span><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><span class="code-line line-number" line="12"> <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="13"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
</span><span class="code-line line-number" line="14"> <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="15"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">click</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="16"><span class="token plain-text"> 点击我
</span></span><span class="code-line line-number" line="17"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
</span></span><span class="code-line line-number" line="18"><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 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">&#x3C;/</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">
</span></span><span class="code-line line-number" line="19"><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="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><span class="code-line line-number" line="22"><span class="token punctuation">}</span>
</span></code></pre>
<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 line-number" line="1"><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 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">&#x3C;/</span>p</span><span class="token punctuation">></span></span>
</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">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 line-number" line="2"><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 line-number" line="3"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
</span><span class="code-line line-number" line="4"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>ul</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>elm<span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> index</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>li</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>value<span class="token punctuation">}</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="7"> <span class="token punctuation">)</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>ul</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><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 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">Hello</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">function</span> <span class="token function">handleClick</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> event<span class="token punctuation">.</span><span class="token method function property-access">preventDefault</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 function">alert</span><span class="token punctuation">(</span><span class="token string">"Hello World"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="5"> <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 keyword control-flow">return</span> <span class="token punctuation">(</span>
</span><span class="code-line line-number" line="8"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name">href</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">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>handleClick<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"> Say Hi
</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>a</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></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">addNumbers</span><span class="token punctuation">(</span><span class="token parameter">x1<span class="token punctuation">,</span> x2</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> x1 <span class="token operator">+</span> x2<span class="token punctuation">;</span>
</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="7"><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>
</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">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 line-number" line="6"> <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><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="7"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
</span><span class="code-line line-number" line="8"> <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="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">Avatar</span></span> <span class="token attr-name">src</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>count<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="10"><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 script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>count<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="11"><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="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>从 @v16.2.0 开始，<code>Fragment</code> 可用于返回多个子节点，而无需向 DOM 添加额外的包装节点。</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>
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">return</span> <span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">createPortal</span><span class="token punctuation">(</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="4"> domNode
</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 punctuation">}</span>
</span></code></pre>
<p>提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案</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 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>
</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 punctuation">}</span>
</span><span class="code-line line-number" line="4"><span class="token maybe-class-name">CustomButton</span><span class="token punctuation">.</span><span class="token property-access">defaultProps</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="5"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'blue'</span>
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></code></pre>
</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">
<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">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 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 line-number" line="1"><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 line-number" line="2"> <span class="token function">constructor</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span>
</span><span class="code-line line-number" line="4"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">visible</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="5"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
</span></code></pre>
<p>在构造 <code>constructor()</code>中设置默认状态。</p>
<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">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 line-number" line="2"> state <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">visible</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="函数组件默认-props"><a aria-hidden="true" tabindex="-1" href="#函数组件默认-props"><span class="icon icon-link"></span></a>函数组件默认 props</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">CustomButton</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">const</span> <span class="token punctuation">{</span> color <span class="token operator">=</span> <span class="token string">'blue'</span> <span class="token punctuation">}</span> <span class="token operator">=</span> props<span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>color<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="4"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="函数组件默认-state"><a aria-hidden="true" tabindex="-1" href="#函数组件默认-state"><span class="icon icon-link"></span></a>函数组件默认 state</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">CustomButton</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">const</span> <span class="token punctuation">[</span>color<span class="token punctuation">,</span> setColor<span class="token punctuation">]</span><span class="token operator">=</span><span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">'blue'</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>color<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="4"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="jsx"><a aria-hidden="true" tabindex="-1" href="#jsx"><span class="icon icon-link"></span></a>JSX</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><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">
<!--rehype:wrap-class=row-span-2-->
<p><code>JSX</code> 仅仅只是 <code>React.createElement(component, props, ...children)</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">MyButton</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 attr-name">shadowSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</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="2"><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">MyButton</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<p>会编译为</p>
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">createElement</span><span class="token punctuation">(</span>
</span><span class="code-line line-number" line="2"> <span class="token maybe-class-name">MyButton</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="3"> <span class="token punctuation">{</span><span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> <span class="token literal-property property">shadowSize</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="4"> <span class="token string">'点击我'</span>
</span><span class="code-line line-number" line="5"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
<p>没有子节点</p>
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><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>sidebar<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</span></code></pre>
<p>会编译为</p>
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">createElement</span><span class="token punctuation">(</span>
</span><span class="code-line line-number" line="2"> <span class="token string">'div'</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="3"> <span class="token punctuation">{</span><span class="token literal-property property">className</span><span class="token operator">:</span> <span class="token string">'sidebar'</span><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="4"><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap"><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 line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Menu</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> children <span class="token punctuation">}</span></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>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>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>children<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 class="token plain-text">
</span></span><span class="code-line line-number" line="3"><span class="token plain-text">);
</span></span><span class="code-line line-number" line="4"><span class="token plain-text">
</span></span><span class="code-line line-number" line="5"><span class="token plain-text">Menu.Item = ({ children }) => (
</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 punctuation">{</span>children<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 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><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">Menu</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><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">菜单一</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span></span><span class="code-line line-number" line="11"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">菜单二</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span></span><span class="code-line line-number" line="12"><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span></span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="jsx-element"><a aria-hidden="true" tabindex="-1" href="#jsx-element"><span class="icon icon-link"></span></a>JSX Element</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">let</span> element <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, world!</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">let</span> emptyHeading <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h1</span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3">
</span><span class="code-line line-number" line="4"><span class="token keyword">const</span> root <span class="token operator">=</span> <span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">createRoot</span><span class="token punctuation">(</span>
</span><span class="code-line line-number" line="5"> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</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 keyword">const</span> element <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, world</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="8">root<span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
<p>参考：<a href="https://reactjs.org/docs/rendering-elements.html">渲染元素</a></p>
</div></div></div><div class="wrap"><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 line-number" line="1"><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="2"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>img</span> <span class="token attr-name">src</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>user<span class="token punctuation">.</span><span class="token property-access">avatarUrl</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</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>button</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>btn<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>button</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>
<p>注意：类属性 <code>className</code></p>
</div></div></div><div class="wrap"><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 line-number" line="1"><span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">'Josh Perez'</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">let</span> element <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, </span><span class="token punctuation">{</span>name<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3">
</span><span class="code-line line-number" line="4"><span class="token keyword">function</span> <span class="token function">fullName</span><span class="token punctuation">(</span><span class="token parameter">firstName<span class="token punctuation">,</span> lastName</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> firstName <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> lastName<span class="token punctuation">;</span>
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="7"><span class="token keyword">let</span> element <span class="token operator">=</span> <span class="token punctuation">(</span>
</span><span class="code-line line-number" line="8"> <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="9"><span class="token plain-text"> Hello, </span><span class="token punctuation">{</span><span class="token function">fullName</span><span class="token punctuation">(</span><span class="token string">'Julie'</span><span class="token punctuation">,</span> <span class="token string">'Johnson'</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="10"><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><span class="code-line line-number" line="11"><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="jsx-style"><a aria-hidden="true" tabindex="-1" href="#jsx-style"><span class="icon icon-link"></span></a>JSX style</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> divStyle <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">color</span><span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">backgroundImage</span><span class="token operator">:</span> <span class="token string">'url('</span> <span class="token operator">+</span> imgUrl <span class="token operator">+</span> <span class="token string">')'</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="5"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">MyComponent</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="6"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>divStyle<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>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="jsx-dangerouslysetinnerhtml"><a aria-hidden="true" tabindex="-1" href="#jsx-dangerouslysetinnerhtml"><span class="icon icon-link"></span></a>JSX dangerouslySetInnerHTML</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> markup <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">__html</span><span class="token operator">:</span> <span class="token string">'我 &#x26;middot; 你'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2">
</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">MyComponent</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="4"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span> <span class="token attr-name">dangerouslySetInnerHTML</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>markup<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
</span><span class="code-line line-number" line="5"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
<p><code>dangerouslySetInnerHTML</code> 是 React 为浏览器 DOM 提供 <code>innerHTML</code> 的替换方案。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="jsx-htmlfor"><a aria-hidden="true" tabindex="-1" href="#jsx-htmlfor"><span class="icon icon-link"></span></a>JSX htmlFor</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">MyComponent</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>div</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>input</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>radio<span class="token punctuation">"</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>ab<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>v<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>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ab<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">HTML</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span><span class="token plain-text">
</span></span><span class="code-line 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 class="token plain-text">
</span></span><span class="code-line line-number" line="6"><span class="token plain-text">);
</span></span></code></pre>
<p><code>for</code> 在 <code>JS</code> 中是保留字，JSX 元素使用了 <code>htmlFor</code> 代替</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="jsx-defaultvalue"><a aria-hidden="true" tabindex="-1" href="#jsx-defaultvalue"><span class="icon icon-link"></span></a>JSX defaultValue</h3><div class="wrap-body">
<p>非受控组件的属性，设置组件第一次挂载时的 <code>value</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>textarea</span> <span class="token attr-name">defaultValue</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Hello<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</span></code></pre>
<p><code>&#x3C;input></code>、<code>&#x3C;select></code> 和 <code>&#x3C;textarea></code> 支持 value 属性</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="jsx-defaultchecked"><a aria-hidden="true" tabindex="-1" href="#jsx-defaultchecked"><span class="icon icon-link"></span></a>JSX defaultChecked</h3><div class="wrap-body">
<p>非受控组件的属性，设置组件是否被选中</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>input</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>radio<span class="token punctuation">"</span></span> <span class="token attr-name">defaultChecked</span> <span class="token punctuation">/></span></span>
</span></code></pre>
<p>类型为 <code>checkbox</code> 或 <code>radio</code> 时，组件支持 checked 属性</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="jsx-classname"><a aria-hidden="true" tabindex="-1" href="#jsx-classname"><span class="icon icon-link"></span></a>JSX className</h3><div class="wrap-body">
<p>属性用于指定 <code>CSS</code> 的 <code>class</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>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>warp<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>div</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>React 中使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/Web_Components">Web Components</a> 使用 <code>class</code> 属性代替</p>
</div></div></div><div class="wrap row-span-2"><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">
<!--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 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><span class="code-line line-number" line="3"><span class="token keyword">function</span> <span class="token function">formatName</span><span class="token punctuation">(</span><span class="token parameter">user</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> user<span class="token punctuation">.</span><span class="token property-access">firstName</span>
</span><span class="code-line line-number" line="5"> <span class="token operator">+</span> <span class="token string">' '</span>
</span><span class="code-line line-number" line="6"> <span class="token operator">+</span> user<span class="token punctuation">.</span><span class="token property-access">lastName</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="8">
</span><span class="code-line line-number" line="9"><span class="token keyword module">export</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Greeting</span></span><span class="token punctuation">(</span><span class="token parameter">user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="10"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>user<span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="11"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
</span><span class="code-line line-number" line="12"> <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 class="token punctuation">{</span><span class="token function">formatName</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">!</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h1</span><span class="token punctuation">></span></span>
</span><span class="code-line line-number" line="13"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="14"> <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>h1</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><span class="code-line line-number" line="17"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="18"><span class="token punctuation">}</span>
</span></code></pre>
<p>注意：组件必须总是返回一些东西。</p>
</div></div><div class="h3wrap-body"><div class="wrap"><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">
<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">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"><div class="wrap-header h3wrap"><h3 id="jsx-三目运算符--与运算符-"><a aria-hidden="true" tabindex="-1" href="#jsx-三目运算符--与运算符-"><span class="icon icon-link"></span></a>JSX 三目运算符 / 与运算符 &#x26;&#x26;</h3><div class="wrap-body">
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword module">export</span> <span class="token keyword 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 line-number" line="2"> <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 line-number" line="3"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
</span><span class="code-line line-number" line="4"> <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>b</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>isLoggedIn <span class="token operator">?</span> <span class="token string">'已'</span> <span class="token operator">:</span> <span class="token string">'未'</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>b</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>div</span><span class="token punctuation">></span></span>
</span><span class="code-line line-number" line="7"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span>
</span></code></pre>
<hr>
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>isShow <span class="token operator">&#x26;&#x26;</span> <span class="token operator">&#x3C;</span>div<span class="token operator">></span>内容<span class="token operator">&#x3C;</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><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 line-number" line="1"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Dropdown</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><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">Menu</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">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">菜单一</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span></span><span class="code-line 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">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">菜单二</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span></span><span class="code-line 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">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">菜单三</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span></span><span class="code-line 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">Menu</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">Dropdown</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<p>组件名称以大驼峰式命名。</p>
</div></div></div><div class="wrap"><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 line-number" line="1"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Greeting</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">let</span> button<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>props<span class="token punctuation">.</span><span class="token property-access">isLoggedIn</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="4"> button <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">UserGreeting</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="5"> <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="6"> button <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">GuestGreeting</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="7"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="8"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>button<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 class="token punctuation">;</span>
</span><span class="code-line line-number" line="9"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><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 line-number" line="1"><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 line-number" line="2"> <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><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
</span><span class="code-line line-number" line="4"> <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="5"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token comment">/* 这里写注释 */</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><span class="token class-name">Fragment</span></span><span class="token punctuation">></span></span>
</span><span class="code-line line-number" line="7"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="8"><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 class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="函数组件"><a aria-hidden="true" tabindex="-1" href="#函数组件"><span class="icon icon-link"></span></a>函数组件</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<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><span class="code-line line-number" line="3"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">UserName</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 tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Kenny</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="4">
</span><span class="code-line line-number" line="5"><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="6"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
</span><span class="code-line line-number" line="7"> <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="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 class="token plain-text">Hello</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="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">UserName</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><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></code></pre>
<p>注意：每个组件都需要一个根元素，<a href="https://reactjs.org/docs/components-and-props.html">更多说明</a>。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="class-组件"><a aria-hidden="true" tabindex="-1" href="#class-组件"><span class="icon icon-link"></span></a>Class 组件</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">class</span> <span class="token class-name">Welcome</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <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="3"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="4"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap 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"><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">
<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"><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">
<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"><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>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"><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 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">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 line-number" line="2">
</span><span class="code-line line-number" line="3"><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>
</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>
</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> <span class="token function-variable function">with</span> <span class="token operator">=</span> <span class="token parameter">data</span> <span class="token arrow operator">=></span> <span class="token parameter"><span class="token maybe-class-name">WrappedComponent</span></span> <span class="token arrow operator">=></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 keyword">class</span> <span class="token class-name">extends</span> <span class="token maybe-class-name">Component</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="5"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="6"> <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="7"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="8"> <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="9"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
</span><span class="code-line line-number" line="10"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">WrappedComponent</span></span> <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
</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><span class="code-line line-number" line="13"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="14"><span class="token punctuation">}</span>
</span></code></pre>
<p>使用高阶组件</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">LowComponent</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">props</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>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">data</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="3"><span class="token punctuation">)</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 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></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">
<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>
<li><a href="https://reactcheatsheet.com">React 16 Cheat Sheet</a></li>
<li><a href="https://github.com/enaqx/awesome-react">Awesome React</a> <em>(github.com)</em></li>
</ul>
</div></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer></body>
</html>
Reference in New Issue View Git Blame Copy Permalink