https://blog.kai.vg/Recent content on Kai's BlogHugo -- gohugo.iozh-cnWed, 11 Dec 2024 20:00:00 +0800https://blog.kai.vg/p/transmission-ipv6-only/Wed, 11 Dec 2024 20:00:00 +0800https://blog.kai.vg/p/transmission-ipv6-only/<img src="https://blog.kai.vg/p/transmission-ipv6-only/1.jpg" alt="Featured image of post 为Transmission设置IPV6 Only做种" /><h2 id="前言">前言 </h2><p>默认情况下，Transmission是同时监听IPV4和IPV6网络来实现BT/PT下载的。 现在遇到了一种使用场景是一台IPV6 Only的服务器使用Transmission来PT保种，同时因为其他业务需要，另外安装了Cloudflare Warp，使服务器同时拥有IPV4与IPV6的网络出口。按照PT的规则，Warp的IP是不可以作为PT做种使用的，因此现在需要让Transmission仅使用IPV6。查看了Transmission的Web端设置，并没有这方面可供修改。因此记录一下通过修改配置文件来实现上述目的的方法。</p> <h2 id="具体操作">具体操作 </h2><ol> <li>找到Transmission的配置目录，打开 <code>settings.json</code> 文件</li> <li>找到其中 <code>bind-address-ipv4</code> 配置的位置，默认是：<code>0.0.0.0</code>。因为现在的需求是禁用掉IPV4监听，所以把这个<code>0.0.0.0</code>改成一个不存在的本地地址即可，比如 <code>127.0.0.10</code> <ul> <li>如果要禁用IPV6的话，则是修改 <code>bind-address-ipv6</code> 配置，默认是：<code>::</code> ，比如可以修改为： <code>::10</code>等</li> </ul> </li> <li>保存修改</li> <li>重启Transmission，即可实现单栈网络监听</li> </ol> https://blog.kai.vg/p/gost-forward/Tue, 15 Oct 2024 00:00:00 +0800https://blog.kai.vg/p/gost-forward/<img src="https://blog.kai.vg/p/gost-forward/2.jpg" alt="Featured image of post Gost使用加密隧道转发数据" /><h1 id="需求">需求 </h1><ul> <li>有两台机器A与B，需要都能访问 <code>x.x.x.x:xx</code> 地址。其中B机器能直接访问，A机器只能与B机器连通，无法访问 <code>x.x.x.x:xx</code> 地址。因此需要用Gost搭建端口转发，实现A访问B的特定端口，B再往<code>x.x.x.x:xx</code> 地址发送请求</li> <li>为了隐私与安全性考量，B的特定端口需要有权限校验，防止任何人都能访问</li> </ul> <h1 id="准备工作">准备工作 </h1><ol> <li>到<a class="link" href="https://github.com/go-gost/gost/releases" target="_blank" rel="noopener" >这里</a>下载最新版Gost到A、B两台机器上</li> <li>将可执行文件放入 <code>/usr/local/bin/gost</code> 路径下</li> </ol> <h1 id="b机器配置">B机器配置 </h1><h2 id="具体写法">具体写法 </h2><p>使用 <code>relay+tls</code>模式监听本地8888端口，并将接收到的数据解密后发送到 <code>x.x.x.x:xx</code></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">/usr/local/bin/gost -L<span class="o">=</span>relay+tls://user:pwd@:8888/0:0 -F<span class="o">=</span>forward+tcp://x.x.x.x:xx </span></span></code></pre></td></tr></table> </div> </div><h2 id="持续化运行">持续化运行 </h2><p>需要编写systemd配置信息将Gost放入systemd运行维护，创建 <code>/etc/systemd/system/gost.service</code> 文件：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">[Unit] </span></span><span class="line"><span class="cl">Description=GO Simple Tunnel </span></span><span class="line"><span class="cl">After=network.target </span></span><span class="line"><span class="cl">Wants=network.target </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">[Service] </span></span><span class="line"><span class="cl">Type=simple </span></span><span class="line"><span class="cl">ExecStart=/usr/local/bin/gost -L=relay+tls://user:pwd@:8888/0:0 -F=forward+tcp://x.x.x.x:xx </span></span><span class="line"><span class="cl">Restart=always </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">[Install] </span></span><span class="line"><span class="cl">WantedBy=multi-user.target </span></span></code></pre></td></tr></table> </div> </div><p>执行：<code>systemctl daemon-reload &amp;&amp; systemctl enable gost &amp;&amp; systemctl start gost</code> 即可实现启动Gost并开机自启</p> <h1 id="a机器配置">A机器配置 </h1><p>需要在本地监听一个端口（例如9999），使用与B机器相同配置的加密模式后转发到B机器的8888端口，A机器上访问 <code>127.0.0.1:9999</code> 即会被Gost转发到B机器后再转发到 <code>x.x.x.x:xx</code> 地址</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">/usr/local/bin/gost -L<span class="o">=</span>tcp://:9999/0:0 -F<span class="o">=</span>relay+tls://user:pwd@B_address:8888/0:0 </span></span></code></pre></td></tr></table> </div> </div><h2 id="持续化运行-1">持续化运行 </h2><p>需要编写systemd配置信息将Gost放入systemd运行维护，创建 <code>/etc/systemd/system/gost.service</code> 文件：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">[Unit] </span></span><span class="line"><span class="cl">Description=GO Simple Tunnel </span></span><span class="line"><span class="cl">After=network.target </span></span><span class="line"><span class="cl">Wants=network.target </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">[Service] </span></span><span class="line"><span class="cl">Type=simple </span></span><span class="line"><span class="cl">ExecStart=/usr/local/bin/gost -L=tcp://:9999/0:0 -F=relay+tls://user:pwd@B_address:8888/0:0 </span></span><span class="line"><span class="cl">Restart=always </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">[Install] </span></span><span class="line"><span class="cl">WantedBy=multi-user.target </span></span></code></pre></td></tr></table> </div> </div><p>执行：<code>systemctl daemon-reload &amp;&amp; systemctl enable gost &amp;&amp; systemctl start gost</code> 即可实现启动Gost并开机自启</p> <h1 id="效果">效果 </h1><p>A机器上访问 <code>127.0.0.1:9999</code> 地址，数据就会通过Gost的加密隧道到达B机器，再由B机器转发到 <code>x.x.x.x:xx</code> 地址</p> https://blog.kai.vg/p/react-1/Wed, 18 Aug 2021 23:25:00 +0800https://blog.kai.vg/p/react-1/<img src="https://blog.kai.vg/p/react-1/cover.jpg" alt="Featured image of post React学习笔记（一）- 面向组件编程" /><h2 id="1基本理解和使用">1、基本理解和使用 </h2><h3 id="函数式组件">函数式组件 </h3><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http</span><span class="err">-</span><span class="na">equiv</span><span class="o">=</span><span class="s">&#34;X-UA-Compatible&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;IE=edge&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;viewport&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;width=device-width, initial-scale=1.0&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span><span class="nx">函数式组件</span><span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;test&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!--</span> <span class="nx">引入核心库</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/react.development.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!--</span> <span class="nx">引入react</span><span class="o">-</span><span class="nx">dom</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/react-dom.development.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!--</span> <span class="nx">引入babel</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/babel.min.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!--</span> <span class="nx">此处一定写babel</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/babel&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 1.创建函数式组件 </span></span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">MyComponent</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span><span class="nx">我是用函数定义的组件</span><span class="err">（</span><span class="nx">适用于</span><span class="err">【</span><span class="nx">简单组件</span><span class="err">】</span><span class="nx">的定义</span><span class="err">）</span><span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 2.渲染组件到页面 </span></span></span><span class="line"><span class="cl"> <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(&lt;</span><span class="nt">MyComponent</span> <span class="p">/&gt;,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="类式组件">类式组件 </h3><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http</span><span class="err">-</span><span class="na">equiv</span><span class="o">=</span><span class="s">&#34;X-UA-Compatible&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;IE=edge&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;viewport&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;width=device-width, initial-scale=1.0&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span><span class="nx">函数式组件</span><span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;test&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!--</span> <span class="nx">引入核心库</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/react.development.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!--</span> <span class="nx">引入react</span><span class="o">-</span><span class="nx">dom</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/react-dom.development.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!--</span> <span class="nx">引入babel</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/babel.min.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!--</span> <span class="nx">此处一定写babel</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/babel&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 1.创建类式组件 </span></span></span><span class="line"><span class="cl"> <span class="kr">class</span> <span class="nx">MyComponent</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">render</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span><span class="nx">我是用类定义的组件</span><span class="err">（</span><span class="nx">适用于</span><span class="err">【</span><span class="nx">复杂组件</span><span class="err">】</span><span class="nx">的定义</span><span class="err">）</span><span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 2.渲染组件到页面 </span></span></span><span class="line"><span class="cl"> <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(&lt;</span><span class="nt">MyComponent</span> <span class="p">/&gt;,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="2state">2、State </h2><ul> <li> <p>state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)</p> </li> <li> <p>组件被称为&quot;状态机&quot;, 通过更新组件的state来更新对应的页面显示(重新渲染组件)</p> </li> <li> <p>组件中render方法中的this为组件实例对象</p> </li> <li> <p>组件自定义的方法中this为undefined，如何解决？</p> <ul> <li>强制绑定this: 通过函数对象的bind()</li> <li>箭头函数</li> </ul> </li> <li> <p><strong>状态数据，不能直接修改或更新</strong> ，用setState更新，<strong>是合并的动作</strong></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c">&lt;!--</span> <span class="nx">此处一定写babel</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/babel&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 1.创建类式组件 </span></span></span><span class="line"><span class="cl"> <span class="kr">class</span> <span class="nx">MyComponent</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">super</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 初始化状态 </span></span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">isHot</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 类组件获取this指向当前组件的方法一：将changeWeather绑定上this后生成新的方法重新赋值给changeWeather </span></span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">changeWeather</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">changeWeather</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">render</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">changeWeather</span><span class="p">}&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">今天天气很</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">isHot</span> <span class="o">?</span> <span class="s1">&#39;炎热&#39;</span> <span class="o">:</span> <span class="s1">&#39;凉爽&#39;</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">//changeweather放在哪里？——Weather的原型对象上，供实例使用 </span></span></span><span class="line"><span class="cl"> <span class="c1">//由于changeleather是作为onClick的回调，所以不是通过实例调用的，是直接调用 </span></span></span><span class="line"><span class="cl"> <span class="c1">//类中的方法默认开启了局部的严格模式，所以changeweather中的this为undefined </span></span></span><span class="line"><span class="cl"> <span class="nx">changeWeather</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 严重注意，state不可以直接更改，比如以下 </span></span></span><span class="line"><span class="cl"> <span class="c1">// this.state.isHot = !this.state.isHot </span></span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span> <span class="nx">isHot</span><span class="o">:</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">isHot</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 2.渲染组件到页面 </span></span></span><span class="line"><span class="cl"> <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(&lt;</span><span class="nt">MyComponent</span> <span class="p">/&gt;,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div></li> <li> <p><strong>setState引起组件的后续动作是异步的！！！！！！</strong></p> </li> </ul> <hr> <p><strong>精简代码写法</strong></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c">&lt;!--</span> <span class="nx">此处一定写babel</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/babel&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 1.创建类式组件 </span></span></span><span class="line"><span class="cl"> <span class="kr">class</span> <span class="nx">MyComponent</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 初始化状态 </span></span></span><span class="line"><span class="cl"> <span class="nx">state</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">isHot</span><span class="o">:</span> <span class="kc">true</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">render</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">changeWeather</span><span class="p">}&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">今天天气很</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">isHot</span> <span class="o">?</span> <span class="s1">&#39;炎热&#39;</span> <span class="o">:</span> <span class="s1">&#39;凉爽&#39;</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 自定义方法：赋值语句+箭头函数 </span></span></span><span class="line"><span class="cl"> <span class="nx">changeWeather</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span> <span class="nx">isHot</span><span class="o">:</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">isHot</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 2.渲染组件到页面 </span></span></span><span class="line"><span class="cl"> <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(&lt;</span><span class="nt">MyComponent</span> <span class="p">/&gt;,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="21setstate">2.1、setState </h3><p><strong>setState更新状态的2种写法</strong></p> <h4 id="对象式的setstate">对象式的setState </h4><p><code>setState(stateChange, [callback])</code></p> <ul> <li>stateChange为状态改变对象(该对象可以体现出状态的更改)</li> <li>callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span><span class="nx">Component</span><span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kr">class</span> <span class="nx">Demo</span> <span class="kr">extends</span> <span class="nx">Component</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">state</span> <span class="o">=</span> <span class="p">{</span><span class="nx">count</span><span class="o">:</span> <span class="mi">0</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">add</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span><span class="nx">count</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 更新状态 </span></span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">count</span><span class="o">:</span> <span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">},</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 改完状态、render执行完的回调 </span></span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">render</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span><span class="nx">当前求和为</span><span class="err">：</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">}&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">add</span><span class="p">}&gt;</span><span class="nx">点我</span><span class="o">+</span><span class="mi">1</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="函数式的setstate">函数式的setState </h4><p><code>setState(updater, [callback])</code></p> <ul> <li>updater为返回stateChange对象的函数</li> <li>updater可以接收到state和props</li> <li>callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span><span class="nx">Component</span><span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kr">class</span> <span class="nx">Demo</span> <span class="kr">extends</span> <span class="nx">Component</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">state</span> <span class="o">=</span> <span class="p">{</span><span class="nx">count</span><span class="o">:</span> <span class="mi">0</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">add</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 对象式的setState </span></span></span><span class="line"><span class="cl"> <span class="c1">// const {count} = this.state </span></span></span><span class="line"><span class="cl"> <span class="c1">// // 更新状态 </span></span></span><span class="line"><span class="cl"> <span class="c1">// this.setState({count: count + 1}, () =&gt; { </span></span></span><span class="line"><span class="cl"> <span class="c1">// // 改完状态、render执行完的回调 </span></span></span><span class="line"><span class="cl"> <span class="c1">// console.log(this.state.count) </span></span></span><span class="line"><span class="cl"> <span class="c1">// }) </span></span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 函数式setState </span></span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">((</span><span class="nx">state</span><span class="p">,</span> <span class="nx">props</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span><span class="nx">count</span><span class="o">:</span> <span class="nx">state</span><span class="p">.</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 改完状态、render执行完的回调 </span></span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">render</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span><span class="nx">当前求和为</span><span class="err">：</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">}&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">add</span><span class="p">}&gt;</span><span class="nx">点我</span><span class="o">+</span><span class="mi">1</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="总结">总结 </h4><ol> <li>对象式的setState是函数式的setState的简写方式(语法糖)</li> <li>使用原则： <ol> <li>如果新状态不依赖于原状态 ===&gt; 使用对象方式</li> <li>如果新状态依赖于原状态 ===&gt; 使用函数方式</li> <li>如果需要在setState()执行后获取最新的状态数据，要在第二个callback函数中读取</li> </ol> </li> </ol> <h2 id="3props">3、props </h2><ul> <li>props是只读的</li> <li>标签体的内容也是可以通过props中的children属性拿到，是一种特殊的标签属性</li> </ul> <hr> <h3 id="31基本使用">3.1、基本使用 </h3><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c">&lt;!--</span> <span class="nx">此处一定写babel</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/babel&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">class</span> <span class="nx">Person</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">render</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">作者</span><span class="err">：</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">name</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">性别</span><span class="err">：</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">sex</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">年龄</span><span class="err">：</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">age</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 2.渲染组件到页面 </span></span></span><span class="line"><span class="cl"> <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Person</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;tom&#34;</span> <span class="na">age</span><span class="o">=</span><span class="s">&#34;18&#34;</span> <span class="na">sex</span><span class="o">=</span><span class="s">&#34;女&#34;</span> <span class="p">/&gt;,</span> </span></span><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="32批量传递props">3.2、批量传递props </h3><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c">&lt;!--</span> <span class="nx">此处一定写babel</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/babel&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">class</span> <span class="nx">Person</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">render</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">作者</span><span class="err">：</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">name</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">性别</span><span class="err">：</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">sex</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">年龄</span><span class="err">：</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">age</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 2.渲染组件到页面 </span></span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">p</span> <span class="o">=</span> <span class="p">{</span><span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;老刘&#39;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span><span class="mi">18</span><span class="p">,</span> <span class="nx">sex</span><span class="o">:</span> <span class="s1">&#39;女&#39;</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(&lt;</span><span class="nt">Person</span> <span class="p">{</span><span class="na">...p</span><span class="p">}</span> <span class="p">/&gt;,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="33对props传值做类型限制">3.3、对props传值做类型限制 </h3><ul> <li>需要引入prop-types.js</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;test&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!--</span> <span class="nx">引入核心库</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/react.development.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!--</span> <span class="nx">引入react</span><span class="o">-</span><span class="nx">dom</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/react-dom.development.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!--</span> <span class="nx">引入babel</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/babel.min.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!--</span> <span class="nx">引入prop</span><span class="o">-</span><span class="nx">types</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/prop-types.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!--</span> <span class="nx">此处一定写babel</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/babel&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">class</span> <span class="nx">Person</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">render</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">作者</span><span class="err">：</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">name</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">性别</span><span class="err">：</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">sex</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">年龄</span><span class="err">：</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">age</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 设置入参格式 </span></span></span><span class="line"><span class="cl"> <span class="nx">Person</span><span class="p">.</span><span class="nx">propTypes</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 限制只能字符串，且必传 </span></span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="nx">PropTypes</span><span class="p">.</span><span class="nx">string</span><span class="p">.</span><span class="nx">isRequired</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 设置默认值 </span></span></span><span class="line"><span class="cl"> <span class="nx">Person</span><span class="p">.</span><span class="nx">defaultProps</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">sex</span><span class="o">:</span> <span class="s1">&#39;无&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 2.渲染组件到页面 </span></span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">p</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;老刘&#39;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">18</span><span class="p">,</span> <span class="nx">sex</span><span class="o">:</span> <span class="s1">&#39;女&#39;</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(&lt;</span><span class="nt">Person</span> <span class="p">{</span><span class="na">...p</span><span class="p">}</span> <span class="p">/&gt;,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>props简写：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/babel&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">class</span> <span class="nx">Person</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 设置入参格式 </span></span></span><span class="line"><span class="cl"> <span class="kr">static</span> <span class="nx">propTypes</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 限制只能字符串，且必传 </span></span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="nx">PropTypes</span><span class="p">.</span><span class="nx">string</span><span class="p">.</span><span class="nx">isRequired</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 设置默认值 </span></span></span><span class="line"><span class="cl"> <span class="kr">static</span> <span class="nx">defaultProps</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">sex</span><span class="o">:</span> <span class="s1">&#39;无&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">render</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">作者</span><span class="err">：</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">name</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">性别</span><span class="err">：</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">sex</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">年龄</span><span class="err">：</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">age</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 2.渲染组件到页面 </span></span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">p</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;老刘&#39;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">18</span><span class="p">,</span> <span class="nx">sex</span><span class="o">:</span> <span class="s1">&#39;女&#39;</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(&lt;</span><span class="nt">Person</span> <span class="p">{</span><span class="na">...p</span><span class="p">}</span> <span class="p">/&gt;,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="34函数式组件使用props">3.4、函数式组件使用props </h3><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/babel&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 1.创建函数式组件 </span></span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">Person</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">作者</span><span class="err">：</span><span class="p">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">name</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">性别</span><span class="err">：</span><span class="p">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">sex</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">年龄</span><span class="err">：</span><span class="p">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">age</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 2.渲染组件到页面 </span></span></span><span class="line"><span class="cl"> <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Person</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;jery&#34;</span> <span class="na">age</span><span class="o">=</span><span class="p">{</span><span class="mi">18</span><span class="p">}</span> <span class="na">sex</span><span class="o">=</span><span class="s">&#34;女&#34;</span> <span class="p">/&gt;,</span> </span></span><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="4refs">4、refs </h2><ul> <li>组件内的标签可以定义ref属性来标识自己</li> </ul> <hr> <h3 id="41字符串形式的ref过时">4.1、字符串形式的ref（过时） </h3><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/babel&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 创建组件 </span></span></span><span class="line"><span class="cl"> <span class="kr">class</span> <span class="nx">Demo</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">showData</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">input1</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">showData2</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span><span class="nx">input2</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span> </span></span><span class="line"><span class="cl"> <span class="nx">alert</span><span class="p">(</span><span class="nx">input2</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">render</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">ref</span><span class="o">=</span><span class="s">&#34;input1&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&#34;点击按钮提示数据&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="na">ref</span><span class="o">=</span><span class="s">&#34;button1&#34;</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">showData</span><span class="p">}&gt;</span><span class="nx">点我提示左侧数据</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span><span class="o">&amp;</span><span class="nx">nbsp</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">ref</span><span class="o">=</span><span class="s">&#34;input2&#34;</span> <span class="na">onBlur</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">showData2</span><span class="p">}</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&#34;失去焦点提示数据&#34;</span> <span class="p">/&gt;</span><span class="o">&amp;</span><span class="nx">nbsp</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 2.渲染虚拟dom到页面 </span></span></span><span class="line"><span class="cl"> <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(&lt;</span><span class="nt">Demo</span><span class="p">/&gt;,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="42回调形式的ref">4.2、回调形式的ref </h3><ul> <li>如果ref回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入参数null，然后第二次会传入参数DOM元素。这是因为在每次渲染时会创建一个新的函数实例，所以React 清空旧的ref并且设置新的。通过<strong>将ref的回调函数定义成class的绑定函数</strong>的方式可以避免上述问题，但是大多数情况下它是无关紧要的。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/babel&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 创建组件 </span></span></span><span class="line"><span class="cl"> <span class="kr">class</span> <span class="nx">Demo</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">showData</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">input1</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">showData2</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span><span class="nx">input2</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span> </span></span><span class="line"><span class="cl"> <span class="nx">alert</span><span class="p">(</span><span class="nx">input2</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">render</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="cm">/* 内联回调函数方式获取ref */</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">ref</span><span class="o">=</span><span class="p">{</span><span class="nx">currentNode</span> <span class="p">=&gt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">input1</span> <span class="o">=</span> <span class="nx">currentNode</span><span class="p">}</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&#34;点击按钮提示数据&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">showData</span><span class="p">}&gt;</span><span class="nx">点我提示左侧数据</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span><span class="o">&amp;</span><span class="nx">nbsp</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">ref</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">saveInput</span><span class="p">}</span> <span class="na">onBlur</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">showData2</span><span class="p">}</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&#34;失去焦点提示数据&#34;</span> <span class="p">/&gt;</span><span class="o">&amp;</span><span class="nx">nbsp</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// class的绑定函数设置ref </span></span></span><span class="line"><span class="cl"> <span class="nx">saveInput</span> <span class="o">=</span> <span class="p">(</span><span class="nx">currentNode</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">input2</span> <span class="o">=</span> <span class="nx">currentNode</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 2.渲染虚拟dom到页面 </span></span></span><span class="line"><span class="cl"> <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(&lt;</span><span class="nt">Demo</span><span class="p">/&gt;,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="43createref使用">4.3、createRef使用 </h3><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/babel&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 创建组件 </span></span></span><span class="line"><span class="cl"> <span class="kr">class</span> <span class="nx">Demo</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点 </span></span></span><span class="line"><span class="cl"> <span class="c1">// 但是该容器是专用的，只能放在一个标签上 </span></span></span><span class="line"><span class="cl"> <span class="nx">myRef</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createRef</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">showData</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">myRef</span><span class="p">.</span><span class="nx">current</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">render</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">ref</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">myRef</span><span class="p">}</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&#34;点击按钮提示数据&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">showData</span><span class="p">}&gt;</span><span class="nx">点我提示左侧数据</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span><span class="o">&amp;</span><span class="nx">nbsp</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 2.渲染虚拟dom到页面 </span></span></span><span class="line"><span class="cl"> <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(&lt;</span><span class="nt">Demo</span><span class="p">/&gt;,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="5事件处理">5、事件处理 </h2><ul> <li>通过onXxx属性指定事件处理函数(注意大小写) <ul> <li>React使用的是自定义(合成)事件, 而不是使用的原生DOM事件</li> <li>React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)</li> </ul> </li> <li>通过event.target得到发生事件的DOM元素对象</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/babel&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 创建组件 </span></span></span><span class="line"><span class="cl"> <span class="kr">class</span> <span class="nx">Demo</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 创建ref容器 </span></span></span><span class="line"><span class="cl"> <span class="nx">myRef</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createRef</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">showData</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">myRef</span><span class="p">.</span><span class="nx">current</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">showData2</span> <span class="o">=</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">alert</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">render</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">ref</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">myRef</span><span class="p">}</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&#34;点击按钮提示数据&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">showData</span><span class="p">}&gt;</span><span class="nx">点我提示左侧数据</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span><span class="o">&amp;</span><span class="nx">nbsp</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">onBlur</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">showData2</span><span class="p">}</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&#34;失去焦点提示数据&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 2.渲染虚拟dom到页面 </span></span></span><span class="line"><span class="cl"> <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(&lt;</span><span class="nt">Demo</span><span class="p">/&gt;,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="6高阶函数与函数柯里化">6、高阶函数与函数柯里化 </h2><ul> <li>高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数 <ul> <li>若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数</li> <li>若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数</li> </ul> </li> <li>函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式</li> </ul> <hr> <p><strong>用函数柯里化实现：</strong></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="nx">saveFormData</span> <span class="o">=</span> <span class="p">(</span><span class="nx">dataType</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">setstate</span><span class="p">({[</span><span class="nx">dataType</span><span class="p">]</span><span class="o">:</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">render</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">form</span> <span class="na">onSubmit</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">用户名</span><span class="err">：</span><span class="p">&lt;</span><span class="nt">input</span> <span class="na">onChange</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">saveFormData</span><span class="p">(</span><span class="s1">&#39;username&#39;</span><span class="p">)}</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;username&#34;</span><span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">密码</span><span class="err">：</span><span class="p">&lt;</span><span class="nt">input</span> <span class="na">onChange</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">saveFormData</span><span class="p">(</span><span class="s1">&#39;password&#39;</span><span class="p">)}</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;password&#34;</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;password&#34;</span><span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span><span class="p">&gt;</span><span class="nx">登录</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">form</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <p><strong>不用函数柯里化实现：</strong></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">//保存表单数据到状态中 </span></span></span><span class="line"><span class="cl"><span class="nx">saveFormData</span> <span class="o">=</span> <span class="p">(</span><span class="nx">dataType</span><span class="p">,</span><span class="nx">event</span><span class="p">)=&gt;{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({[</span><span class="nx">dataType</span><span class="p">]</span><span class="o">:</span><span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">render</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">form</span> <span class="na">onSubmit</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">用户名</span><span class="err">：</span><span class="p">&lt;</span><span class="nt">input</span> <span class="na">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">event</span> <span class="p">=&gt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">saveFormData</span><span class="p">(</span><span class="s1">&#39;username&#39;</span><span class="p">,</span><span class="nx">event</span><span class="p">)</span> <span class="p">}</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;username&#34;</span><span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">密码</span><span class="err">：</span><span class="p">&lt;</span><span class="nt">input</span> <span class="na">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">event</span> <span class="p">=&gt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">saveFormData</span><span class="p">(</span><span class="s1">&#39;password&#39;</span><span class="p">,</span><span class="nx">event</span><span class="p">)</span> <span class="p">}</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;password&#34;</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;password&#34;</span><span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span><span class="p">&gt;</span><span class="nx">登录</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">form</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="7组件的生命周期">7、组件的生命周期 </h2><h3 id="71生命周期流程图旧">7.1、生命周期流程图(旧) </h3><p><img alt="生命周期流程图(旧)" class="gallery-image" data-flex-basis="297px" data-flex-grow="123" height="366" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://i.loli.net/2021/08/18/Rqfck6LOXm7ClPa.png" width="453"></p> <ol> <li><strong>初始化阶段</strong>: 由ReactDOM.render()触发&mdash;初次渲染 <ol> <li>constructor()</li> <li>componentWillMount()</li> <li>render()</li> <li>componentDidMount()</li> </ol> </li> <li><strong>更新阶段</strong>: 由组件内部this.setSate()或父组件重新render触发 <ol> <li>shouldComponentUpdate()</li> <li>componentWillUpdate()</li> <li>render()</li> <li>componentDidUpdate()</li> </ol> </li> <li><strong>卸载组件</strong>: 由ReactDOM.unmountComponentAtNode()触发 <ol> <li>componentWillUnmount()</li> </ol> </li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt"> 10 </span><span class="lnt"> 11 </span><span class="lnt"> 12 </span><span class="lnt"> 13 </span><span class="lnt"> 14 </span><span class="lnt"> 15 </span><span class="lnt"> 16 </span><span class="lnt"> 17 </span><span class="lnt"> 18 </span><span class="lnt"> 19 </span><span class="lnt"> 20 </span><span class="lnt"> 21 </span><span class="lnt"> 22 </span><span class="lnt"> 23 </span><span class="lnt"> 24 </span><span class="lnt"> 25 </span><span class="lnt"> 26 </span><span class="lnt"> 27 </span><span class="lnt"> 28 </span><span class="lnt"> 29 </span><span class="lnt"> 30 </span><span class="lnt"> 31 </span><span class="lnt"> 32 </span><span class="lnt"> 33 </span><span class="lnt"> 34 </span><span class="lnt"> 35 </span><span class="lnt"> 36 </span><span class="lnt"> 37 </span><span class="lnt"> 38 </span><span class="lnt"> 39 </span><span class="lnt"> 40 </span><span class="lnt"> 41 </span><span class="lnt"> 42 </span><span class="lnt"> 43 </span><span class="lnt"> 44 </span><span class="lnt"> 45 </span><span class="lnt"> 46 </span><span class="lnt"> 47 </span><span class="lnt"> 48 </span><span class="lnt"> 49 </span><span class="lnt"> 50 </span><span class="lnt"> 51 </span><span class="lnt"> 52 </span><span class="lnt"> 53 </span><span class="lnt"> 54 </span><span class="lnt"> 55 </span><span class="lnt"> 56 </span><span class="lnt"> 57 </span><span class="lnt"> 58 </span><span class="lnt"> 59 </span><span class="lnt"> 60 </span><span class="lnt"> 61 </span><span class="lnt"> 62 </span><span class="lnt"> 63 </span><span class="lnt"> 64 </span><span class="lnt"> 65 </span><span class="lnt"> 66 </span><span class="lnt"> 67 </span><span class="lnt"> 68 </span><span class="lnt"> 69 </span><span class="lnt"> 70 </span><span class="lnt"> 71 </span><span class="lnt"> 72 </span><span class="lnt"> 73 </span><span class="lnt"> 74 </span><span class="lnt"> 75 </span><span class="lnt"> 76 </span><span class="lnt"> 77 </span><span class="lnt"> 78 </span><span class="lnt"> 79 </span><span class="lnt"> 80 </span><span class="lnt"> 81 </span><span class="lnt"> 82 </span><span class="lnt"> 83 </span><span class="lnt"> 84 </span><span class="lnt"> 85 </span><span class="lnt"> 86 </span><span class="lnt"> 87 </span><span class="lnt"> 88 </span><span class="lnt"> 89 </span><span class="lnt"> 90 </span><span class="lnt"> 91 </span><span class="lnt"> 92 </span><span class="lnt"> 93 </span><span class="lnt"> 94 </span><span class="lnt"> 95 </span><span class="lnt"> 96 </span><span class="lnt"> 97 </span><span class="lnt"> 98 </span><span class="lnt"> 99 </span><span class="lnt">100 </span><span class="lnt">101 </span><span class="lnt">102 </span><span class="lnt">103 </span><span class="lnt">104 </span><span class="lnt">105 </span><span class="lnt">106 </span><span class="lnt">107 </span><span class="lnt">108 </span><span class="lnt">109 </span><span class="lnt">110 </span><span class="lnt">111 </span><span class="lnt">112 </span><span class="lnt">113 </span><span class="lnt">114 </span><span class="lnt">115 </span><span class="lnt">116 </span><span class="lnt">117 </span><span class="lnt">118 </span><span class="lnt">119 </span><span class="lnt">120 </span><span class="lnt">121 </span><span class="lnt">122 </span><span class="lnt">123 </span><span class="lnt">124 </span><span class="lnt">125 </span><span class="lnt">126 </span><span class="lnt">127 </span><span class="lnt">128 </span><span class="lnt">129 </span><span class="lnt">130 </span><span class="lnt">131 </span><span class="lnt">132 </span><span class="lnt">133 </span><span class="lnt">134 </span><span class="lnt">135 </span><span class="lnt">136 </span><span class="lnt">137 </span><span class="lnt">138 </span><span class="lnt">139 </span><span class="lnt">140 </span><span class="lnt">141 </span><span class="lnt">142 </span><span class="lnt">143 </span><span class="lnt">144 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/babel&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="cm">/* </span></span></span><span class="line"><span class="cl"><span class="cm"> 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染 </span></span></span><span class="line"><span class="cl"><span class="cm"> 1. constructor() </span></span></span><span class="line"><span class="cl"><span class="cm"> 2. componentWillMount() </span></span></span><span class="line"><span class="cl"><span class="cm"> 3. render() </span></span></span><span class="line"><span class="cl"><span class="cm"> 4. componentDidMount() =====&gt; 常用 </span></span></span><span class="line"><span class="cl"><span class="cm"> 一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息 </span></span></span><span class="line"><span class="cl"><span class="cm"> 2. 更新阶段: 由组件内部this.setSate()或父组件render触发 </span></span></span><span class="line"><span class="cl"><span class="cm"> 1. shouldComponentUpdate() </span></span></span><span class="line"><span class="cl"><span class="cm"> 2. componentWillUpdate() </span></span></span><span class="line"><span class="cl"><span class="cm"> 3. render() =====&gt; 必须使用的一个 </span></span></span><span class="line"><span class="cl"><span class="cm"> 4. componentDidUpdate() </span></span></span><span class="line"><span class="cl"><span class="cm"> 3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发 </span></span></span><span class="line"><span class="cl"><span class="cm"> 1. componentWillUnmount() =====&gt; 常用 </span></span></span><span class="line"><span class="cl"><span class="cm"> 一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息 </span></span></span><span class="line"><span class="cl"><span class="cm">*/</span> </span></span><span class="line"><span class="cl"><span class="c1">//创建组件 </span></span></span><span class="line"><span class="cl"><span class="kr">class</span> <span class="nx">Count</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">//构造器 </span></span></span><span class="line"><span class="cl"> <span class="nx">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Count---constructor&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="kr">super</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="c1">//初始化状态 </span></span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span><span class="nx">count</span><span class="o">:</span><span class="mi">0</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">//加1按钮的回调 </span></span></span><span class="line"><span class="cl"> <span class="nx">add</span> <span class="o">=</span> <span class="p">()=&gt;{</span> </span></span><span class="line"><span class="cl"> <span class="c1">//获取原状态 </span></span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span><span class="nx">count</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span> </span></span><span class="line"><span class="cl"> <span class="c1">//更新状态 </span></span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">count</span><span class="o">:</span><span class="nx">count</span><span class="o">+</span><span class="mi">1</span><span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">//卸载组件按钮的回调 </span></span></span><span class="line"><span class="cl"> <span class="nx">death</span> <span class="o">=</span> <span class="p">()=&gt;{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">unmountComponentAtNode</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">//强制更新按钮的回调 </span></span></span><span class="line"><span class="cl"> <span class="nx">force</span> <span class="o">=</span> <span class="p">()=&gt;{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">forceUpdate</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">//组件将要挂载的钩子 </span></span></span><span class="line"><span class="cl"> <span class="nx">componentWillMount</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Count---componentWillMount&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">//组件挂载完毕的钩子 </span></span></span><span class="line"><span class="cl"> <span class="nx">componentDidMount</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Count---componentDidMount&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">//组件将要卸载的钩子 </span></span></span><span class="line"><span class="cl"> <span class="nx">componentWillUnmount</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Count---componentWillUnmount&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">//控制组件更新的“阀门” </span></span></span><span class="line"><span class="cl"> <span class="nx">shouldComponentUpdate</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Count---shouldComponentUpdate&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">//组件将要更新的钩子 </span></span></span><span class="line"><span class="cl"> <span class="nx">componentWillUpdate</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Count---componentWillUpdate&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">//组件更新完毕的钩子 </span></span></span><span class="line"><span class="cl"> <span class="nx">componentDidUpdate</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Count---componentDidUpdate&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">render</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Count---render&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span><span class="nx">count</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span><span class="nx">当前求和为</span><span class="err">：</span><span class="p">{</span><span class="nx">count</span><span class="p">}&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">add</span><span class="p">}&gt;</span><span class="nx">点我</span><span class="o">+</span><span class="mi">1</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">death</span><span class="p">}&gt;</span><span class="nx">卸载组件</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">force</span><span class="p">}&gt;</span><span class="nx">不更改任何状态中的数据</span><span class="err">，</span><span class="nx">强制更新一下</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">//父组件A </span></span></span><span class="line"><span class="cl"><span class="kr">class</span> <span class="nx">A</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">//初始化状态 </span></span></span><span class="line"><span class="cl"> <span class="nx">state</span> <span class="o">=</span> <span class="p">{</span><span class="nx">carName</span><span class="o">:</span><span class="s1">&#39;奔驰&#39;</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">changeCar</span> <span class="o">=</span> <span class="p">()=&gt;{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">carName</span><span class="o">:</span><span class="s1">&#39;奥拓&#39;</span><span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">render</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span><span class="nx">我是A组件</span><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">changeCar</span><span class="p">}&gt;</span><span class="nx">换车</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">B</span> <span class="na">carName</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">carName</span><span class="p">}/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">//子组件B </span></span></span><span class="line"><span class="cl"><span class="kr">class</span> <span class="nx">B</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">//组件将要接收新的props的钩子 </span></span></span><span class="line"><span class="cl"> <span class="nx">componentWillReceiveProps</span><span class="p">(</span><span class="nx">props</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;B---componentWillReceiveProps&#39;</span><span class="p">,</span><span class="nx">props</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">//控制组件更新的“阀门” </span></span></span><span class="line"><span class="cl"> <span class="nx">shouldComponentUpdate</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;B---shouldComponentUpdate&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="c1">//组件将要更新的钩子 </span></span></span><span class="line"><span class="cl"> <span class="nx">componentWillUpdate</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;B---componentWillUpdate&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">//组件更新完毕的钩子 </span></span></span><span class="line"><span class="cl"> <span class="nx">componentDidUpdate</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;B---componentDidUpdate&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">render</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;B---render&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span><span class="nx">我是B组件</span><span class="err">，</span><span class="nx">接收到的车是</span><span class="o">:</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">carName</span><span class="p">}&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">//渲染组件 </span></span></span><span class="line"><span class="cl"><span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(&lt;</span><span class="nt">Count</span><span class="p">/&gt;,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="72生命周期流程图新17以后">7.2、生命周期流程图(新，17以后) </h3><p><img alt="生命周期流程图" class="gallery-image" data-flex-basis="341px" data-flex-grow="142" height="339" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://i.loli.net/2021/08/18/WEDTHxuCsdZM8QS.png" width="483"></p> <ol> <li><strong>初始化阶段:</strong> 由ReactDOM.render()触发&mdash;初次渲染 <ol> <li>constructor()</li> <li>getDerivedStateFromProps(props,state)：从props中得到派生的状态，也就是state的值在任何时候都取决于props时使用</li> <li>render()</li> <li>componentDidMount()</li> </ol> </li> <li><strong>更新阶段</strong>: 由组件内部this.setSate()或父组件重新render触发 <ol> <li>getDerivedStateFromProps(props,state)：从props中得到派生的状态，也就是state的值在任何时候都取决于props时使用</li> <li>shouldComponentUpdate()</li> <li>render()</li> <li>getSnapshotBeforeUpdate</li> <li>componentDidUpdate(preProps, preState)：preProps和preState都是更新前的数据</li> </ol> </li> <li><strong>卸载组件</strong>: 由ReactDOM.unmountComponentAtNode()触发 <ol> <li>componentWillUnmount()</li> </ol> </li> </ol> <hr> <ul> <li>若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps</li> <li><code>getSnapshotBeforeUpdate(prevProps, prevState)</code> 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。<strong>此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate()</strong></li> </ul> <h3 id="73重要的勾子">7.3、重要的勾子 </h3><ul> <li>render：初始化渲染或更新渲染调用</li> <li>componentDidMount：开启监听, 发送ajax请求</li> <li>componentWillUnmount：做一些收尾工作, 如: 清理定时器</li> </ul> <h3 id="74即将废弃的勾子">7.4、即将废弃的勾子 </h3><ul> <li>componentWillMount</li> <li>componentWillReceiveProps</li> <li>componentWillUpdate</li> </ul> <h2 id="8虚拟dom与dom-diffing算法">8、虚拟DOM与DOM Diffing算法 </h2><p><img alt="虚拟DOM与DOM Diffing算法" class="gallery-image" data-flex-basis="477px" data-flex-grow="199" height="334" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://i.loli.net/2021/08/18/KUwNg9cW3IoQxXs.png" width="665"></p> https://blog.kai.vg/p/raspberry-pi-compile-install-opencv4/Mon, 09 Sep 2019 22:00:00 +0800https://blog.kai.vg/p/raspberry-pi-compile-install-opencv4/<img src="https://blog.kai.vg/p/raspberry-pi-compile-install-opencv4/cover.jpg" alt="Featured image of post Raspberry Pi编译安装OpenCV4" /><h2 id="前言">前言 </h2><p>因为最近准备往树莓派上放一个基于OpenCV的项目，在PC上测试没有问题后放在树莓派上<code>pip install -r requirements.txt</code>的时候却提示：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">ERROR: Could not find a version that satisfies the requirement opencv-python (from versions: none) </span></span><span class="line"><span class="cl">ERROR: No matching distribution found for opencv-python </span></span></code></pre></td></tr></table> </div> </div><p>再去网上搜索后才发现<code>opencv-python</code>这个库并没有提供ARM架构的二进制包。不过偶然发现还有一个专门为树莓派提供的<a class="link" href="https://www.piwheels.org" target="_blank" rel="noopener" >第三方依赖库</a>，可是这里目前只提供基于Python3.5且版本号太低无法满足我当前项目的要求，那接下来就只剩下源码自己独立编译这条路了。</p> <h2 id="环境准备">环境准备 </h2><ul> <li> <p>Python3.7.4</p> </li> <li> <p>需要安装Numpy：<code>pip install numpy</code></p> </li> <li> <p>扩展文件系统</p> <ol> <li> <p>输入 <code>sudo raspi-config</code></p> </li> <li> <p>选择 <code>Advanced Options</code></p> </li> <li> <p>选择 <code>Expand Filesystem</code></p> </li> </ol> </li> <li> <p>扩充Swap</p> <ol> <li> <p>编辑文件：<code>sudo vi /etc/dphys-swapfile</code>，将<code>CONF_SWAPSIZE</code>的值修改成<code>2048</code></p> </li> <li> <p>重启dphys-swapfile：<code>sudo /etc/init.d/dphys-swapfile restart</code></p> </li> </ol> </li> <li> <p>更新系统的包</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">sudo apt-get update </span></span></code></pre></td></tr></table> </div> </div></li> <li> <p>在系统中安装相关依赖</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">sudo apt-get install build-essential cmake unzip pkg-config </span></span><span class="line"><span class="cl">sudo apt-get install libjpeg-dev libpng-dev libtiff-dev </span></span><span class="line"><span class="cl">sudo apt-get install libavcodec-dev libavformat-dev libswscale-dev libv4l-dev </span></span><span class="line"><span class="cl">sudo apt-get install libxvidcore-dev libx264-dev </span></span><span class="line"><span class="cl">sudo apt-get install libgtk-3-dev </span></span><span class="line"><span class="cl">sudo apt-get install libcanberra-gtk* </span></span><span class="line"><span class="cl">sudo apt-get install libatlas-base-dev gfortran </span></span><span class="line"><span class="cl">sudo apt-get install python3-dev </span></span></code></pre></td></tr></table> </div> </div></li> <li> <p>下载源码并解压</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">wget -O opencv.zip https://github.com/opencv/opencv/archive/4.1.1.zip </span></span><span class="line"><span class="cl">wget -O opencv_contrib.zip https://codeload.github.com/opencv/opencv_contrib/zip/4.1.1 </span></span><span class="line"><span class="cl">unzip opencv.zip </span></span><span class="line"><span class="cl">unzip opencv_contrib.zip </span></span></code></pre></td></tr></table> </div> </div></li> </ul> <h2 id="编译安装">编译安装 </h2><ul> <li> <p>在<code>opencv-4.1.1</code>中创建<code>build</code>文件夹，用于存放源码编译后的产物</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl"><span class="nb">cd</span> opencv-4.1.1 </span></span><span class="line"><span class="cl">mkdir build </span></span><span class="line"><span class="cl"><span class="nb">cd</span> build </span></span></code></pre></td></tr></table> </div> </div></li> <li> <p>配置CMake参数</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">sudo cmake -D <span class="nv">CMAKE_BUILD_TYPE</span><span class="o">=</span>RELEASE </span></span><span class="line"><span class="cl">-D <span class="nv">CMAKE_INSTALL_PREFIX</span><span class="o">=</span>/usr/local </span></span><span class="line"><span class="cl">-D <span class="nv">OPENCV_EXTRA_MODULES_PATH</span><span class="o">=</span>/home/pi/opencv/opencv_contrib-4.1.1/modules </span></span><span class="line"><span class="cl">-D <span class="nv">ENABLE_NEON</span><span class="o">=</span>ON </span></span><span class="line"><span class="cl">-D <span class="nv">ENABLE_VFPV3</span><span class="o">=</span>ON </span></span><span class="line"><span class="cl">-D <span class="nv">WITH_FFMPEG</span><span class="o">=</span>ON </span></span><span class="line"><span class="cl">-D <span class="nv">INSTALL_PYTHON_EXAMPLES</span><span class="o">=</span>ON </span></span><span class="line"><span class="cl">-D <span class="nv">WITH_GSTREAMER</span><span class="o">=</span>ON </span></span><span class="line"><span class="cl">-D <span class="nv">OPENCV_EXTRA_EXE_LINKER_FLAGS</span><span class="o">=</span>-latomic </span></span><span class="line"><span class="cl">-D <span class="nv">BUILD_EXAMPLES</span><span class="o">=</span>ON .. </span></span></code></pre></td></tr></table> </div> </div></li> <li> <p>在CMake检查结束后，会打印出详细的信息，需要检查其中<code>Python3</code>部分的各个参数是否都有值。</p> </li> <li> <p>确认没问题后即开始编译OpenCV，建议可以在这时候使用<code>screen</code>命令创建一个可以在后台持续执行的会话。</p> </li> <li> <p>可以在make后增加<code>-j2</code>参数指定使用2个核心参与编译，这里使用单核编译，即不加任何参数。敲完命令后就需要等待大约七八小时后才能完成（Raspberry Pi 3B）</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">sudo make </span></span></code></pre></td></tr></table> </div> </div></li> <li> <p>编译结束并且没有报错信息后，需要修改一下配置，<code>modules/python3/CMakeFiles/opencv_python3.dir/link.txt</code>中第一行增加<code>-latomic</code>参数</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">vi build/modules/python3/CMakeFiles/opencv_python3.dir/link.txt </span></span></code></pre></td></tr></table> </div> </div><p>在第一行中的起始中 <code>/usr/bin/c++ -fPIC -fsigned-char -W -Wall</code> 修改为 <code>/usr/bin/c++ -fPIC -latomic -fsigned-char -W -Wall</code></p> </li> <li> <p>安装OpenCV</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">sudo make install </span></span><span class="line"><span class="cl">sudo ldconfig </span></span></code></pre></td></tr></table> </div> </div></li> </ul> <h2 id="检查安装结果">检查安装结果 </h2><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="err">$</span> <span class="n">python</span> </span></span><span class="line"><span class="cl"><span class="n">Python</span> <span class="mf">3.7.4</span> <span class="p">(</span><span class="n">default</span><span class="p">,</span> <span class="n">Sep</span> <span class="mi">8</span> <span class="mi">2019</span><span class="p">,</span> <span class="mi">10</span><span class="p">:</span><span class="mi">06</span><span class="p">:</span><span class="mi">39</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">[</span><span class="n">GCC</span> <span class="mf">8.3.0</span><span class="p">]</span> <span class="n">on</span> <span class="n">linux</span> </span></span><span class="line"><span class="cl"><span class="n">Type</span> <span class="s2">&#34;help&#34;</span><span class="p">,</span> <span class="s2">&#34;copyright&#34;</span><span class="p">,</span> <span class="s2">&#34;credits&#34;</span> <span class="ow">or</span> <span class="s2">&#34;license&#34;</span> <span class="k">for</span> <span class="n">more</span> <span class="n">information</span><span class="o">.</span> </span></span><span class="line"><span class="cl"><span class="o">&gt;&gt;&gt;</span> <span class="kn">import</span> <span class="nn">cv2</span> </span></span><span class="line"><span class="cl"><span class="o">&gt;&gt;&gt;</span> <span class="n">cv2</span><span class="o">.</span><span class="n">__version__</span> </span></span><span class="line"><span class="cl"><span class="s1">&#39;4.1.1&#39;</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="参考链接">参考链接 </h2><ul> <li> <p><a class="link" href="https://goldensoap.github.io/2018/10/20/%E3%80%90%E6%A0%91%E8%8E%93%E6%B4%BE%E3%80%91%E7%BC%96%E8%AF%91%E5%AE%89%E8%A3%85opencv/" target="_blank" rel="noopener" >【树莓派】编译安装opencv+python调用</a></p> </li> <li> <p><a class="link" href="https://www.pyimagesearch.com/2018/09/26/install-opencv-4-on-your-raspberry-pi/" target="_blank" rel="noopener" >Install OpenCV 4 on your Raspberry Pi</a></p> </li> </ul> https://blog.kai.vg/p/learn-procedure/Tue, 04 Sep 2018 14:25:00 +0800https://blog.kai.vg/p/learn-procedure/<img src="https://blog.kai.vg/p/learn-procedure/cover.jpg" alt="Featured image of post 存储过程" /><p>公司的项目使用到了存储过程，由于此前在学校从未接触到，因此记录下学习笔记。</p> <h2 id="什么是存储过程">什么是存储过程 </h2><p>存储过程（Stored Procedure）是在大型数据库系统中，一组为了完成特定功能的SQL 语句集，存储在数据库中，经过第一次编译后再次调用不需要再次编译，用户通过指定存储过程的名字并给出参数（如果该存储过程带有参数）来执行它。</p> <h2 id="使用存储过程的优点">使用存储过程的优点 </h2><ol> <li> <p>存储过程只在创造时进行编译，以后每次执行存储过程都不需再重新编译，而一般SQL语句每执行一次就编译一次,所以使用存储过程可提高数据库执行速度。</p> </li> <li> <p>当对数据库进行复杂操作时，可将此复杂操作用存储过程封装起来与数据库提供的事务处理结合一起使用。</p> </li> <li> <p>存储过程可以重复使用,可减少数据库开发人员的工作量。</p> </li> <li> <p>安全性高,可设定只有某些用户才具有对指定存储过程的使用权。</p> </li> </ol> <h2 id="简单例子">简单例子 </h2><h3 id="基本语法">基本语法 </h3><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-sql" data-lang="sql"><span class="line"><span class="cl"><span class="c1">--------------创建存储过程----------------- </span></span></span><span class="line"><span class="cl"><span class="k">CREATE</span><span class="w"> </span><span class="p">[</span><span class="k">OR</span><span class="w"> </span><span class="k">REPLACE</span><span class="p">]</span><span class="w"> </span><span class="k">PROCEDURE</span><span class="w"> </span><span class="n">procedure_name</span><span class="p">(</span><span class="err">参数列表</span><span class="p">)</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="k">AS</span><span class="w"> </span><span class="c1">-- as不可以省略，也可以用is </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="c1">--PL/SQL体部分 </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="k">END</span><span class="w"> </span><span class="n">procedure_name</span><span class="p">;</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="c1">--------------调用存储过程----------------- </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="k">EXECUTE</span><span class="w"> </span><span class="n">Procedure_name</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="w"> </span><span class="c1">--存储过程如果有参数，后面加参数格式为：@参数名=value，也可直接为参数值value </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="c1">--------------删除存储过程----------------- </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="k">drop</span><span class="w"> </span><span class="k">procedure</span><span class="w"> </span><span class="n">procedure_name</span><span class="w"> </span><span class="c1">--在存储过程中能调用另外一个存储过程，而不能删除另外一个存储过程 </span></span></span></code></pre></td></tr></table> </div> </div><ul> <li>存储过程或者存储函数，只能创建或者替换。</li> <li>参数可以带也可以不带。</li> </ul> <h3 id="不带参数的存储过程">不带参数的存储过程 </h3><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-sql" data-lang="sql"><span class="line"><span class="cl"><span class="k">CREATE</span><span class="w"> </span><span class="k">OR</span><span class="w"> </span><span class="k">REPLACE</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="k">procedure</span><span class="w"> </span><span class="n">test</span><span class="w"> </span><span class="k">as</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="k">begin</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="n">dbms_output</span><span class="p">.</span><span class="n">put_line</span><span class="p">(</span><span class="s1">&#39;HelloWorld&#39;</span><span class="p">);</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="k">end</span><span class="p">;</span><span class="w"> </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="带参数的存储过程">带参数的存储过程 </h3><p>给指定的员工涨100元工资,并且打印涨前和涨后的薪水:</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-sql" data-lang="sql"><span class="line"><span class="cl"><span class="k">create</span><span class="w"> </span><span class="k">or</span><span class="w"> </span><span class="k">replace</span><span class="w"> </span><span class="k">procedure</span><span class="w"> </span><span class="n">test</span><span class="p">(</span><span class="n">pempno</span><span class="w"> </span><span class="k">in</span><span class="w"> </span><span class="n">emp</span><span class="p">.</span><span class="n">empno</span><span class="o">%</span><span class="k">type</span><span class="p">)</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="k">as</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="n">pename</span><span class="w"> </span><span class="n">emp</span><span class="p">.</span><span class="n">ename</span><span class="o">%</span><span class="k">type</span><span class="p">;</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="n">beforesal</span><span class="w"> </span><span class="n">emp</span><span class="p">.</span><span class="n">sal</span><span class="o">%</span><span class="k">type</span><span class="p">;</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="n">aftersal</span><span class="w"> </span><span class="n">emp</span><span class="p">.</span><span class="n">sal</span><span class="o">%</span><span class="k">type</span><span class="p">;</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="k">begin</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="k">select</span><span class="w"> </span><span class="n">ename</span><span class="p">,</span><span class="n">sal</span><span class="w"> </span><span class="k">into</span><span class="w"> </span><span class="n">pename</span><span class="p">,</span><span class="n">beforesal</span><span class="w"> </span><span class="k">from</span><span class="w"> </span><span class="n">emp</span><span class="w"> </span><span class="k">where</span><span class="w"> </span><span class="n">empno</span><span class="o">=</span><span class="n">pempno</span><span class="p">;</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="n">aftersal</span><span class="p">:</span><span class="o">=</span><span class="n">beforesal</span><span class="o">+</span><span class="mi">100</span><span class="p">;</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="k">update</span><span class="w"> </span><span class="n">emp</span><span class="w"> </span><span class="k">set</span><span class="w"> </span><span class="n">sal</span><span class="o">=</span><span class="n">aftersal</span><span class="w"> </span><span class="k">where</span><span class="w"> </span><span class="n">empno</span><span class="o">=</span><span class="n">pempno</span><span class="p">;</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="n">dbms_output</span><span class="p">.</span><span class="n">put_line</span><span class="p">(</span><span class="s1">&#39;姓名: &#39;</span><span class="o">||</span><span class="n">pename</span><span class="o">||</span><span class="s1">&#39; 涨前工资:&#39;</span><span class="o">||</span><span class="n">beforesal</span><span class="o">||</span><span class="s1">&#39;涨后工资:&#39;</span><span class="o">||</span><span class="n">aftersal</span><span class="p">);</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="k">end</span><span class="p">;</span><span class="w"> </span></span></span></code></pre></td></tr></table> </div> </div><p><strong>注意</strong></p> <ul> <li>要明确说明参数是输入参数（<strong>in</strong>)还是输出参数（<strong>out</strong>)</li> <li>为保证调用多个存储过程中处在同一个事务中，所以一般不在存储过程或者存储函数中，commit或rollback</li> </ul> <h3 id="调用执行方式">调用执行方式 </h3><ol> <li><code>exec</code>命令 exec是SQLPlus命令，<strong>只能在SQLPlus中使用</strong>，exec可以直接跟存储过程名（可以省略括号）</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">SQL&gt; <span class="nb">set</span> serveroutput on<span class="p">;</span> </span></span><span class="line"><span class="cl">SQL&gt; <span class="nb">exec</span> test<span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="2"> <li>使用<code>call</code>命令 在SQL中使用<code>call</code>调用存储过程时，需要带上括号，不限制使用场景</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">SQL&gt; <span class="nb">set</span> serveroutput on<span class="p">;</span> </span></span><span class="line"><span class="cl">SQL&gt; call test<span class="o">()</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="3"> <li>使用PLSQL语句调用</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">SQL&gt; <span class="nb">set</span> serveroutput on<span class="p">;</span> </span></span><span class="line"><span class="cl">SQL&gt; begin </span></span><span class="line"><span class="cl"> test<span class="p">;</span> </span></span><span class="line"><span class="cl"> end<span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div>