@shixinde/vuepress-theme-init
Version:
663 lines • 166 kB
JavaScript
import{_ as e,r as p,c as t,b as s,d as l,e as i,a as n,o}from"./app-Dx9bNbfq.js";const c={},r=n(`<h2 id="初始化包" tabindex="-1"><a class="header-anchor" href="#初始化包"><span>初始化包</span></a></h2><div class="language-node line-numbers-mode" data-highlighter="prismjs" data-ext="node" data-title="node"><pre class="language-node"><code><span class="line">cnpm i react-redux react-router-dom redux</span>
<span class="line">cnpm i reset-css //初始化样式 安装这个包以后在 main.js中最上方引入即可清除样式</span>
<span class="line">cnpm i sass -D -S</span>
<span class="line">cnpm i react react-redux --save</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="项目中一般使用-purecomponent-而不是用-component" tabindex="-1"><a class="header-anchor" href="#项目中一般使用-purecomponent-而不是用-component"><span>项目中一般使用 PureComponent 而不是用 Component</span></a></h2><h2 id="调用接口-配置代理" tabindex="-1"><a class="header-anchor" href="#调用接口-配置代理"><span>调用接口 配置代理</span></a></h2><blockquote><h4 id="方法一、只能配置一个-3000-5000端口数据" tabindex="-1"><a class="header-anchor" href="#方法一、只能配置一个-3000-5000端口数据"><span>方法一、只能配置一个 3000==>5000端口数据</span></a></h4></blockquote><p>1.在page.json中添加 这个地址 是 请求路径</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"> <span class="token string-property property">"proxy"</span><span class="token operator">:</span> <span class="token string">"http://localhost:5000"</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>2.调用接口 注意，这个地址 是 该为当前路径</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"> <span class="token function-variable function">getStudentData</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'http://localhost:3000/students'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span></span>
<span class="line"> <span class="token parameter">response</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'成功'</span><span class="token punctuation">,</span> response<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token parameter">error</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'失败了'</span><span class="token punctuation">,</span> error<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>说明：</p><ol><li>优点：配置简单，前端请求资源时可以不加任何前缀。</li><li>缺点：不能配置多个代理。</li><li>工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）</li></ol><blockquote><p>方法二，高级配置</p></blockquote><p>在src目录下创建文件 <code>setupProxy.js</code>, 并写入以下代码</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"></span>
<span class="line"><span class="token keyword">const</span> <span class="token punctuation">{</span> createProxyMiddleware <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"http-proxy-middleware"</span><span class="token punctuation">)</span></span>
<span class="line">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">app</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span></span>
<span class="line"> <span class="token function">createProxyMiddleware</span><span class="token punctuation">(</span><span class="token string">"/api1"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token string">"http://localhost:5000"</span><span class="token punctuation">,</span> <span class="token comment">//配置转发目标地址(能返回数据的服务器地址)</span></span>
<span class="line"> <span class="token literal-property property">changeOrigin</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//控制服务器接收到的请求头中host字段的值</span></span>
<span class="line"> <span class="token literal-property property">pathRewrite</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">"^/api1"</span><span class="token operator">:</span> <span class="token string">""</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token comment">//去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token comment">/*</span>
<span class="line"> changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000</span>
<span class="line"> changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000</span>
<span class="line"> changeOrigin默认值为false，但我们一般将changeOrigin值设为true</span>
<span class="line"> */</span></span>
<span class="line"> <span class="token function">createProxyMiddleware</span><span class="token punctuation">(</span><span class="token string">"/api2"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token string">"http://localhost:5001"</span><span class="token punctuation">,</span> <span class="token comment">//配置转发目标地址(能返回数据的服务器地址)</span></span>
<span class="line"> <span class="token literal-property property">changeOrigin</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//控制服务器接收到的请求头中host字段的值</span></span>
<span class="line"> <span class="token literal-property property">pathRewrite</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">"^/api2"</span><span class="token operator">:</span> <span class="token string">""</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>说明：</p><ol><li>优点：可以配置多个代理，可以灵活的控制请求是否走代理。</li><li>缺点：配置繁琐，前端请求资源时必须加前缀。</li></ol><h2 id="组件沟通-消息订阅与发布" tabindex="-1"><a class="header-anchor" href="#组件沟通-消息订阅与发布"><span>组件沟通，消息订阅与发布</span></a></h2><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> PubSub <span class="token keyword">from</span> <span class="token string">'pubsub-js'</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><blockquote><h5 id="search-组件订阅消息-pubsub-publish-订阅名字-订阅数据" tabindex="-1"><a class="header-anchor" href="#search-组件订阅消息-pubsub-publish-订阅名字-订阅数据"><span>search 组件订阅消息 -- PubSub.publish('订阅名字', 订阅数据)</span></a></h5></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line">PubSub<span class="token punctuation">.</span><span class="token function">publish</span><span class="token punctuation">(</span><span class="token string">'atguigu'</span><span class="token punctuation">,</span> response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>items<span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><blockquote><h5 id="list-组件-接收消息" tabindex="-1"><a class="header-anchor" href="#list-组件-接收消息"><span>List 组件 接收消息，</span></a></h5></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//挂载时 接收订阅的消息</span></span>
<span class="line"> <span class="token keyword">const</span> token <span class="token operator">=</span> PubSub<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token string">'atguigu'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">users</span><span class="token operator">:</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token function">componentWillUnmount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//组件将要卸载时 取消订阅组件消息</span></span>
<span class="line"> PubSub<span class="token punctuation">.</span><span class="token function">unsubscribe</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>token<span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="路由-调用组件-动态样式" tabindex="-1"><a class="header-anchor" href="#路由-调用组件-动态样式"><span>路由 调用组件，动态样式</span></a></h2><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token string">'./App.css'</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> NavLink<span class="token punctuation">,</span> Route，BrowserRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span></span>
<span class="line"><span class="token keyword">import</span> List <span class="token keyword">from</span> <span class="token string">'./components/List'</span></span>
<span class="line"><span class="token keyword">import</span> Search <span class="token keyword">from</span> <span class="token string">'./components/Search'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">(</span></span>
<span class="line"> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"container"</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>BrowserRouter<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>NavLink activeClassName<span class="token operator">=</span><span class="token string">'demo'</span> to<span class="token operator">=</span><span class="token string">'/list'</span><span class="token operator">></span> list<span class="token operator"><</span><span class="token operator">/</span>NavLink<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>NavLink activeClassName<span class="token operator">=</span><span class="token string">'demo'</span> to<span class="token operator">=</span><span class="token string">'/search'</span><span class="token operator">></span> search<span class="token operator"><</span><span class="token operator">/</span>NavLink<span class="token operator">></span> <span class="token operator"><</span>hr <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Route path<span class="token operator">=</span><span class="token string">'/list'</span> component<span class="token operator">=</span><span class="token punctuation">{</span>List<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Route path<span class="token operator">=</span><span class="token string">'/search'</span> component<span class="token operator">=</span><span class="token punctuation">{</span>Search<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>BrowserRouter<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="路由-多标签截至-switch" tabindex="-1"><a class="header-anchor" href="#路由-多标签截至-switch"><span>路由 多标签截至 Switch</span></a></h2><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> Switch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span></span>
<span class="line"><span class="token operator"><</span>Switch<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>Switch<span class="token operator">></span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">(</span></span>
<span class="line"> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"container"</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Switch<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Route path<span class="token operator">=</span><span class="token string">'/list'</span> component<span class="token operator">=</span><span class="token punctuation">{</span>List<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Route path<span class="token operator">=</span><span class="token string">'/search'</span> component<span class="token operator">=</span><span class="token punctuation">{</span>Search<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>Switch<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="解决样式丢失" tabindex="-1"><a class="header-anchor" href="#解决样式丢失"><span>解决样式丢失</span></a></h2><blockquote><h5 id="_1-更改引入样式表的" tabindex="-1"><a class="header-anchor" href="#_1-更改引入样式表的"><span>1. 更改引入样式表的</span></a></h5></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token operator"><</span>link rel<span class="token operator">=</span><span class="token string">"stylesheet"</span> href<span class="token operator">=</span><span class="token string">"./css/bootstrap.css"</span><span class="token operator">></span> <span class="token comment">//原有路径</span></span>
<span class="line"> <span class="token comment">// 改为下面这种写法</span></span>
<span class="line"><span class="token operator"><</span>link rel<span class="token operator">=</span><span class="token string">"stylesheet"</span> href<span class="token operator">=</span><span class="token string">"%PUBLIC_URL%/css/bootstrap.css"</span><span class="token operator">></span> </span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h4 id="_2-更改当前路径" tabindex="-1"><a class="header-anchor" href="#_2-更改当前路径"><span>2. 更改当前路径</span></a></h4></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token operator"><</span>link rel<span class="token operator">=</span><span class="token string">"stylesheet"</span> href<span class="token operator">=</span><span class="token string">"./bootstrap.css"</span><span class="token operator">></span> <span class="token comment">//原有路径</span></span>
<span class="line"> <span class="token comment">// 改为下面这种写法</span></span>
<span class="line"><span class="token operator"><</span>link rel<span class="token operator">=</span><span class="token string">"icon"</span> href<span class="token operator">=</span><span class="token string">"/css/bootstrap.css"</span> <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h5 id="_3-更改路由模式-地址从-history路由-转为-hash路由" tabindex="-1"><a class="header-anchor" href="#_3-更改路由模式-地址从-history路由-转为-hash路由"><span>3. 更改路由模式： 地址从 history路由 转为 hash路由</span></a></h5></blockquote><h2 id="路由重定向" tabindex="-1"><a class="header-anchor" href="#路由重定向"><span>路由重定向</span></a></h2><blockquote><p>再所有组件的最下方，写 <code> <Redirect to='/路径名' /></code></p></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">(</span></span>
<span class="line"> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"container"</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>NavLink activeClassName<span class="token operator">=</span><span class="token string">'demo'</span> to<span class="token operator">=</span><span class="token string">'/list'</span><span class="token operator">></span> list<span class="token operator"><</span><span class="token operator">/</span>NavLink<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>NavLink activeClassName<span class="token operator">=</span><span class="token string">'demo'</span> to<span class="token operator">=</span><span class="token string">'/search/a/a/'</span><span class="token operator">></span> search<span class="token operator"><</span><span class="token operator">/</span>NavLink<span class="token operator">></span> <span class="token operator"><</span>hr <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Route exact path<span class="token operator">=</span><span class="token string">'/list'</span> component<span class="token operator">=</span><span class="token punctuation">{</span>List<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Route path<span class="token operator">=</span><span class="token string">'/search'</span> component<span class="token operator">=</span><span class="token punctuation">{</span>Search<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Redirect to<span class="token operator">=</span><span class="token string">'/list'</span> <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="二级路由-一定不要严格匹配" tabindex="-1"><a class="header-anchor" href="#二级路由-一定不要严格匹配"><span>二级路由--一定不要严格匹配</span></a></h2><blockquote><h3 id="父组件" tabindex="-1"><a class="header-anchor" href="#父组件"><span>父组件</span></a></h3></blockquote><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">import React, { Component } from 'react'</span>
<span class="line">import './App.css'</span>
<span class="line">import { NavLink, Route, Redirect } from 'react-router-dom'</span>
<span class="line">import List from './components/List'</span>
<span class="line">import Search from './components/Search'</span>
<span class="line"></span>
<span class="line">export default class App extends Component {</span>
<span class="line"> render() {</span>
<span class="line"> return (</span>
<span class="line"> <div className="container"></span>
<span class="line"> <NavLink activeClassName='demo' to='/list'> list</NavLink></span>
<span class="line"> <NavLink activeClassName='demo' to='/search'> search</NavLink> <hr /></span>
<span class="line"> <Route path='/list' component={List} /></span>
<span class="line"> <Route path='/search' component={Search} /></span>
<span class="line"> <Redirect to='/list' /></span>
<span class="line"> </div></span>
<span class="line"> )</span>
<span class="line"> }</span>
<span class="line">}</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>二级路由地址</p></blockquote><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">import React, { Component } from 'react'</span>
<span class="line">import { NavLink, Route, Switch } from 'react-router-dom'</span>
<span class="line">import About from './About';</span>
<span class="line">import Message from './Message';</span>
<span class="line">export default class List extends Component {</span>
<span class="line"> render() {</span>
<span class="line"> return (</span>
<span class="line"> <div></span>
<span class="line"> <NavLink activeClassName='demo' to='/list/message'>goMessage</NavLink></span>
<span class="line"> <NavLink activeClassName='demo' to='/list/about'>goAbout</NavLink></span>
<span class="line"> <hr /></span>
<span class="line"></span>
<span class="line"> <Switch></span>
<span class="line"> <Route path='/list/message' component={Message} /></span>
<span class="line"> <Route path='/list/about' component={About} /></span>
<span class="line"> </Switch></span>
<span class="line"></span>
<span class="line"> </div></span>
<span class="line"> )</span>
<span class="line"> }</span>
<span class="line">}</span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="路由传递参数" tabindex="-1"><a class="header-anchor" href="#路由传递参数"><span>路由传递参数</span></a></h2><div class="language-vb line-numbers-mode" data-highlighter="prismjs" data-ext="vb" data-title="vb"><pre class="language-vb"><code><span class="line"> <span class="token number">1</span><span class="token punctuation">.</span>params参数</span>
<span class="line"> 路由链接<span class="token punctuation">(</span>携带参数<span class="token punctuation">)</span>：<span class="token operator"><</span>Link <span class="token keyword">to</span><span class="token operator">=</span><span class="token comment">'/demo/test/tom/18'}>详情</Link></span></span>
<span class="line"> 注册路由<span class="token punctuation">(</span>声明接收<span class="token punctuation">)</span>：<span class="token operator"><</span>Route path<span class="token operator">=</span><span class="token string">"/demo/test/:name/:age"</span> component<span class="token operator">=</span><span class="token punctuation">{</span>Test<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> 接收参数：this<span class="token punctuation">.</span>props<span class="token punctuation">.</span>match<span class="token punctuation">.</span>params</span>
<span class="line"> <span class="token number">2</span><span class="token punctuation">.</span>search参数</span>
<span class="line"> 路由链接<span class="token punctuation">(</span>携带参数<span class="token punctuation">)</span>：<span class="token operator"><</span>Link <span class="token keyword">to</span><span class="token operator">=</span><span class="token comment">'/demo/test?name=tom&age=18'}>详情</Link></span></span>
<span class="line"> 注册路由<span class="token punctuation">(</span>无需声明，正常注册即可<span class="token punctuation">)</span>：<span class="token operator"><</span>Route path<span class="token operator">=</span><span class="token string">"/demo/test"</span> component<span class="token operator">=</span><span class="token punctuation">{</span>Test<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> 接收参数：this<span class="token punctuation">.</span>props<span class="token punctuation">.</span>location<span class="token punctuation">.</span>search</span>
<span class="line"> 备注：获取到的search是urlencoded编码字符串，需要借助querystring解析</span>
<span class="line"> <span class="token number">3</span><span class="token punctuation">.</span>state参数</span>
<span class="line"> 路由链接<span class="token punctuation">(</span>携带参数<span class="token punctuation">)</span>：<span class="token operator"><</span>Link <span class="token keyword">to</span><span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>pathname<span class="token punctuation">:</span><span class="token comment">'/demo/test',state:{name:'tom',age:18}}}>详情</Link></span></span>
<span class="line"> 注册路由<span class="token punctuation">(</span>无需声明，正常注册即可<span class="token punctuation">)</span>：<span class="token operator"><</span>Route path<span class="token operator">=</span><span class="token string">"/demo/test"</span> component<span class="token operator">=</span><span class="token punctuation">{</span>Test<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> 接收参数：this<span class="token punctuation">.</span>props<span class="token punctuation">.</span>location<span class="token punctuation">.</span>state</span>
<span class="line"> 备注：刷新也可以保留住参数</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="路由带参数传值-params参数" tabindex="-1"><a class="header-anchor" href="#路由带参数传值-params参数"><span>路由带参数传值 --- params参数</span></a></h3><blockquote><p>父集路由</p></blockquote><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line"><Link to={\`/list/message/\${Obj.id}\`}>跳转</Link></span>
<span class="line"><Route path='/list/message/:id' component={Message} /></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>子集路由</p></blockquote><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line"> const { id } = this.props.match.params</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="路由带参数传值-search参数" tabindex="-1"><a class="header-anchor" href="#路由带参数传值-search参数"><span>路由带参数传值 --- search参数</span></a></h3><blockquote><p>父集路由</p></blockquote><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line"><Link to={\`/list/message/?id=\${Obj.id}&title=\${obj.title}\`}>跳转</Link></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><blockquote><p>子集路由</p></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> qs <span class="token keyword">from</span> <span class="token string">'querystring-es3'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">const</span> <span class="token punctuation">{</span> search <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>location</span>
<span class="line"><span class="token keyword">const</span> <span class="token punctuation">{</span> id<span class="token punctuation">,</span>title <span class="token punctuation">}</span> <span class="token operator">=</span> qs<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>search<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="路由带参数传值-state参数" tabindex="-1"><a class="header-anchor" href="#路由带参数传值-state参数"><span>路由带参数传值 --- state参数</span></a></h3><blockquote><h4 id="缺点-如果浏览器清除浏览器历史记录以后-有可能空置" tabindex="-1"><a class="header-anchor" href="#缺点-如果浏览器清除浏览器历史记录以后-有可能空置"><span>缺点： 如果浏览器清除浏览器历史记录以后，有可能空置</span></a></h4></blockquote><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line"><NavLink to={{ pathname:'/list/message',state:{id:Obj.id}}}>跳转</NavLink></span>
<span class="line"></span>
<span class="line">const { id } = this.props.location.state || {}</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="编程式导航" tabindex="-1"><a class="header-anchor" href="#编程式导航"><span>编程式导航</span></a></h2><h3 id="类式组件-history-api" tabindex="-1"><a class="header-anchor" href="#类式组件-history-api"><span>类式组件 history-API</span></a></h3><blockquote><p>两种模式：</p><p> replace跳转、push跳转</p><p>三种形式：</p><p> params传参、query传参、search传参</p></blockquote><p></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token comment">// 携带 params 参数</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token string">/list/message/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">\`</span></span><span class="token punctuation">)</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token string">/list/message/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">\`</span></span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 携带 query 参数</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token string">/list/message?id=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">\`</span></span><span class="token punctuation">)</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token string">/list/message?id=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">\`</span></span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 携带 state 参数</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token string">/list/message</span><span class="token template-punctuation string">\`</span></span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span>id<span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token string">/list/message</span><span class="token template-punctuation string">\`</span></span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span>id<span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">//前进、后退、指定</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">goBack</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">goForward</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="函数式组件-navigate-跳转路由" tabindex="-1"><a class="header-anchor" href="#函数式组件-navigate-跳转路由"><span>函数式组件 <code><Navigate/></code>跳转路由</span></a></h3><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">{ path: '/', element: <Navigate to='/about' /> },</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">import { useOutlet, useNavigate } from 'react-router-dom';</span>
<span class="line">const navigate = useNavigate()</span>
<span class="line">const element =useOutlet()</span>
<span class="line"></span>
<span class="line">function goDetail(id) {</span>
<span class="line"> navigate(\`detail?id=\${id}\`)</span>
<span class="line"> </span>
<span class="line">}</span>
<span class="line"></span>
<span class="line"><button onClick={() => goDetail(Obj.id)}>跳转详情</button></span>
<span class="line"></span>
<span class="line">//最后使用{element} 来进行页面占位</span>
<span class="line">{element}</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="函数式组件调用路由" tabindex="-1"><a class="header-anchor" href="#函数式组件调用路由"><span>函数式组件调用路由</span></a></h2><blockquote><h3 id="传统写法" tabindex="-1"><a class="header-anchor" href="#传统写法"><span>传统写法</span></a></h3></blockquote><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">import React from 'react'</span>
<span class="line">import { Link, Route, Routes, Navigate } from 'react-router-dom'</span>
<span class="line">import About from './pages/about'</span>
<span class="line">import Home from './pages/home'</span>
<span class="line">export default function App() {</span>
<span class="line"> return (</span>
<span class="line"> <div></span>
<span class="line"> <h1> 我是App组件</h1></span>
<span class="line"> <Link to='/home'>goHome</Link></span>
<span class="line"> <Link to='/about'>goAbout</Link></span>
<span class="line"> {/* 注册路由 */}</span>
<span class="line"> <Routes></span>
<span class="line"> <Route path=\`/home/\${Obj.id}/\${Obj.name}\` element={<Home />}></Route></span>
<span class="line"> <Route path='/about' element={<About />}></Route></span>
<span class="line"> <Route path='/' element={<Navigate to='/about'/>}></Route></span>
<span class="line"> </Routes></span>
<span class="line"> </div></span>
<span class="line"> )</span>
<span class="line">}</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h3 id="外部调用的写法" tabindex="-1"><a class="header-anchor" href="#外部调用的写法"><span>外部调用的写法</span></a></h3></blockquote><p><strong>routes/index.js</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> About <span class="token keyword">from</span> <span class="token string">"../pages/about"</span></span>
<span class="line"><span class="token keyword">import</span> Home <span class="token keyword">from</span> <span class="token string">"../pages/home"</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> Navigate <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-router-dom"</span></span>
<span class="line"></span>
<span class="line"> <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line"> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/about'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token operator"><</span>About <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/home/:id/:name'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token operator"><</span>Home <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token operator"><</span>Navigate to<span class="token operator">=</span><span class="token string">'/about'</span> <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> element</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>App.js</strong></p><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">import React from 'react'</span>
<span class="line">import { Link,useRoutes } from 'react-router-dom'</span>
<span class="line">import routes from './routes'</span>
<span class="line">export default function App() {</span>
<span class="line"> const element=useRoutes(routes)</span>
<span class="line"> return (</span>
<span class="line"> <div></span>
<span class="line"> <h1> 我是App组件</h1></span>
<span class="line"> <Link to='/home'>goHome</Link></span>
<span class="line"> <Link to='/about'>goAbout</Link></span>
<span class="line"> {element}</span>
<span class="line"> </div></span>
<span class="line"> )</span>
<span class="line">}</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="调用子集路由" tabindex="-1"><a class="header-anchor" href="#调用子集路由"><span>调用子集路由</span></a></h3><p><strong>routes/index.js</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> About <span class="token keyword">from</span> <span class="token string">"../pages/about"</span></span>
<span class="line"><span class="token keyword">import</span> Home <span class="token keyword">from</span> <span class="token string">"../pages/home"</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> Navigate <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-router-dom"</span></span>
<span class="line"><span class="token keyword">import</span> News <span class="token keyword">from</span> <span class="token string">'../pages/components/News'</span></span>
<span class="line"><span class="token keyword">import</span> Message <span class="token keyword">from</span> <span class="token string">'../pages/components/Message'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line"> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/about'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token operator"><</span>About <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'news'</span><span class="token punctuation">,</span> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token operator"><</span>News <span class="token operator">/</span><span class="token operator">></span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'message'</span><span class="token punctuation">,</span> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token operator"><</span>Message <span class="token operator">/</span><span class="token operator">></span> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">]</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/home'</span><span class="token punctuation">,</span> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token operator"><</span>Home <span class="token operator">/</span><span class="token operator">></span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token operator"><</span>Navigate to<span class="token operator">=</span><span class="token string">'/about'</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> element</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h3 id="使用-outlet-组件进行占位-站在哪里-组件就先是在哪里" tabindex="-1"><a class="header-anchor" href="#使用-outlet-组件进行占位-站在哪里-组件就先是在哪里"><span>使用 <code> <Outlet/></code> 组件进行占位，站在哪里，组件就先是在哪里</span></a></h3><h3 id="to两中写法-about-news-或者-news" tabindex="-1"><a class="header-anchor" href="#to两中写法-about-news-或者-news"><span>to两中写法 <code>/about/news</code> 或者 <code>news</code></span></a></h3></blockquote><p><strong>about.jsx</strong></p><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">import React, { Fragment } from 'react'</span>
<span class="line">import { Link, Outlet } from 'react-router-dom'</span>
<span class="line">export default function About() {</span>
<span class="line"> return (</span>
<span class="line"> <Fragment></span>
<span class="line"> <hr/></span>
<span class="line"> <Link to='message'> goMessage</Link></span>
<span class="line"> <Link to='news'> goNews</Link></span>
<span class="line"> <Outlet/> //占位插槽</span>
<span class="line"> </Fragment></span>
<span class="line"> )</span>
<span class="line">}</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="一般组件想使用-路由组件的api参数-withrouter" tabindex="-1"><a class="header-anchor" href="#一般组件想使用-路由组件的api参数-withrouter"><span>一般组件想使用 路由组件的API参数 -- withRouter</span></a></h2><blockquote><p>在导出这个组件的时候 包裹一层 withRouter函数即可</p></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> withRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name">Header</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'this.props一般组件'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">)</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">(</span></span>
<span class="line"> <span class="token operator"><</span>div<span class="token operator">></span>这个是一个一般组件<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">withRouter</span><span class="token punctuation">(</span>Header<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="redux-基本使用" tabindex="-1"><a class="header-anchor" href="#redux-基本使用"><span>Redux 基本使用</span></a></h2><h3 id="类式组件" tabindex="-1"><a class="header-anchor" href="#类式组件"><span>类式组件</span></a></h3><blockquote><h3 id="精简版-102集异步" tabindex="-1"><a class="header-anchor" href="#精简版-102集异步"><span>精简版 102集异步</span></a></h3></blockquote>`,83),u=n('<h4 id="_1-去除count组件自身的状态" tabindex="-1"><a class="header-anchor" href="#_1-去除count组件自身的状态"><span>(1).去除Count组件自身的状态</span></a></h4><h4 id="_2-src下建立" tabindex="-1"><a class="header-anchor" href="#_2-src下建立"><span>(2).src下建立:</span></a></h4><p> -redux -store.js -count_reducer.js</p><h4 id="_3-store-js" tabindex="-1"><a class="header-anchor" href="#_3-store-js"><span>(3).store.js：</span></a></h4><p> 1).引入redux中的createStore函数，创建一个store 2).createStore调用时要传入一个为其服务的reducer 3).记得暴露store对象</p><h4 id="_4-count-reducer-js" tabindex="-1"><a class="header-anchor" href="#_4-count-reducer-js"><span>(4).count_reducer.js：</span></a></h4><p> 1).reducer的本质是一个函数，接收：preState,action，返回加工后的状态 2).reducer有两个作用：初始化状态，加工状态 3).reducer被第一次调用时，是store自动触发的， 传递的preState是undefined, 传递的action是:{type:'@@REDUX/INIT_a.2.b.4}</p>',7),d={id:"_5-在index-js中监测store中状态的改变-一旦发生改变重新渲染",tabindex:"-1"},k={class:"header-anchor",href:"#_5-在index-js中监测store中状态的改变-一旦发生改变重新渲染"},v=s("p",null," 备注：redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。",-1),m=n(`<p><strong>store.js</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> legacy_createStore <span class="token keyword">as</span> createStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux'</span></span>
<span class="line"><span class="token keyword">import</span> countReducer <span class="token keyword">from</span> <span class="token string">'./count_reducer'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">createStore</span><span class="token punctuation">(</span>countReducer<span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>count_reducer.js 文件</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> initState<span class="token operator">=</span><span class="token number">0</span> <span class="token comment">//初始化状态值</span></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">countReducer</span><span class="token punctuation">(</span><span class="token parameter">preState <span class="token operator">=</span> initState<span class="token punctuation">,</span> action</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'preState, action'</span><span class="token punctuation">,</span> preState<span class="token punctuation">,</span> action<span class="token punctuation">)</span></span>
<span class="line"> <span class="token keyword">const</span> <span class="token punctuation">{</span> type<span class="token punctuation">,</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> action</span>
<span class="line"> <span class="token keyword">switch</span> <span class="token punctuation">(</span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">case</span> <span class="token string">'increment'</span><span class="token operator">:</span> <span class="token comment">//如果是加</span></span>
<span class="line"> <span class="token keyword">return</span> preState <span class="token operator">+</span> data</span>
<span class="line"> <span class="token keyword">case</span> <span class="token string">'dncrement'</span><span class="token operator">:</span> <span class="token comment">//如果是减</span></span>
<span class="line"> <span class="token keyword">return</span> preState <span class="token operator">-</span> data</span>
<span class="line"> <span class="token keyword">default</span><span class="token operator">:</span></span>
<span class="line"> <span class="token keyword">return</span> preState</span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Count.jsx 组件中的代码</strong></p><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">import React, { Component } from 'react'</span>
<span class="line">import { Select, Button } from 'antd';</span>
<span class="line">// 用于获取Redux中获取的状态</span>
<span class="line">import store from '../../redux/store';</span>
<span class="line"></span>
<span class="line">export default class Count extends Component {</span>
<span class="line"> selectNumber = 1</span>
<span class="line"> // 加法</span>
<span class="line"> increment = () => {</span>
<span class="line"> store.dispatch({ type: 'increment', data: this.selectNumber * 1 })</span>
<span class="line"> }</span>
<span class="line"> // 减法</span>
<span class="line"> dncrement = () => {</span>
<span class="line"> store.dispatch({ type: 'dncrement', data: this.selectNumber * 1 })</span>
<span class="line"> }</span>
<span class="line"> // 奇数加</span>
<span class="line"> incrementIfOdd = () => {</span>
<span class="line"> if (store.getState() % 2 !== 0) {</span>
<span class="line"> store.dispatch({ type: 'increment', data: this.selectNumber * 1 })</span>
<span class="line"> }</span>
<span class="line"> }</span>
<span class="line"> // 异步加法</span>
<span class="line"> incrementAsync = () => {</span>
<span class="line"> setTimeout(() => {</span>
<span class="line"> store.dispatch({ type: 'increment', data: this.selectNumber * 1 })</span>
<span class="line"> }, 100);</span>
<span class="line"> }</span>
<span class="line"></span>
<span class="line"> render() {</span>
<span class="line"> return (</span>
<span class="line"> <div></span>
<span class="line"> <h1>Count的值为 {store.getState()}</h1></span>
<span class="line"> <Select defaultValue='1 ' style={{ width: 120, }} onChange={c => { this.selectNumber = c }}</span>
<span class="line"> options={[{ value: 1, label: 1, }, { value: 2, label: 2, }, { value: 3, label: 3, }]} /></span>
<span class="line"> <Button type='primary' onClick={this.increment} >加</Button></span>
<span class="line"> <Button type='primary' onClick={this.dncrement} >减</Button></span>
<span class="line"> <Button type='primary' onClick={this.incrementIfOdd} >奇数加</Button></span>
<span class="line"> <Button type='primary' onClick={this.incrementAsync} >异步加</Button></span>
<span class="line"> </div></span>
<span class="line"> )</span>
<span class="line"> }</span>
<span class="line">}</span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>根目录下的index.js</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom/client'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token string">'./index.css'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> reportWebVitals <span class="token keyword">from</span> <span class="token string">'./reportWebVitals'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'./redux/store'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">const</span> root <span class="token operator">=</span> ReactDOM<span class="token punctuation">.</span><span class="token function">createRoot</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">root<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>App <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// redux 的简洁写法，调用subscrib，不会引起大面积的页面重新刷新，因为有react的diff算法</span></span>
<span class="line">store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> root<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>App <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span class="token function">reportWebVitals</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h3 id="类式组件-完整版" tabindex="-1"><a class="header-anchor" href="#类式组件-完整版"><span>类式组件-完整版</span></a></h3></blockquote><p>**用于定义名字的 constant.js 文件 **</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 该模块用于定义action 对象中的type变量名</span>
<span class="line"> */</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">INCREMENT</span> <span class="token operator">=</span> <span class="token string">'increment'</span></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">DECREMENT</span> <span class="token operator">=</span><span class="token string">'decrement'</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>**用于为组件生成action对象 count_action.js 文件 **</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 该文件专门为Count组件生成action对象</span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">INCREMENT</span><span class="token punctuation">,</span> <span class="token constant">DECREMENT</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./constant"</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">createIncrementAction</span> <span class="token operator">=</span> <span class="token parameter">data</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token constant">INCREMENT</span><span class="token punctuation">,</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">createDecrementAction</span> <span class="token operator">=</span> <span class="token parameter">data</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token constant">DECREMENT</span><span class="token punctuation">,</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>用于书写count方法的文件 count_reducer.js</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span><span class="token constant">INCREMENT</span><span class="token punctuation">,</span><span class="token constant">DECREMENT</span><span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./constant.js'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">const</span> initState <span class="token operator">=</span> <span class="token number">0</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">countReducer</span><span class="token punctuation">(</span><span class="token parameter">preState <span class="token operator">=</span> initState<span class="token punctuation">,</span> action</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'preState, action'</span><span class="token punctuation">,</span> preState<span class="token punctuation">,</span> action<span class="token punctuation">)</span></span>
<span class="line"> <span class="token keyword">const</span> <span class="token punctuation">{</span> type<span class="token punctuation">,</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> action</span>
<span class="line"> <span class="token keyword">switch</span> <span class="token punctuation">(</span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">case</span> <span class="token constant">INCREMENT</span><span class="token operator">:</span> <span class="token comment">//如果是加</span></span>
<span class="line"> <span class="token keyword">return</span> preState <span class="token operator">+</span> data</span>
<span class="line"> <span class="token keyword">case</span> <span class="token constant">DECREMENT</span><span class="token operator">:</span> <span class="token comment">//如果是减</span></span>
<span class="line"> <span class="token keyword">return</span> preState <span class="token operator">-</span> data</span>
<span class="line"> <span class="token keyword">default</span><span class="token operator">:</span></span>
<span class="line"> <span class="token keyword">return</span> preState</span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>用于创建 Redux 实例 store.js</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> legacy_createStore <span class="token keyword">as</span> createStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux'</span></span>
<span class="line"><span class="token keyword">import</span> countReducer <span class="token keyword">from</span> <span class="token string">'./count_reducer'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">createStore</span><span class="token punctuation">(</span>countReducer<span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>组件调用</strong></p><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">import React, { Component } from 'react'</span>
<span class="line">import { Select, Button } from 'antd';</span>
<span class="line">// 用于获取Redux中获取的状态</span>
<span class="line">import store from '../../redux/store';</span>
<span class="line">import { createDecrementAction, createIncrementAction } from '../../redux/count_action'</span>
<span class="line"></span>
<span class="line">export default class Count extends Component {</span>
<span class="line"> selectNumber = 1</span>
<span class="line"> // 加法</span>
<span class="line"> increment = () => {</span>
<span class="line"> store.dispatch(createIncrementAction(this.selectNumber*1))</span>
<span class="line"> }</span>
<span class="line"> // 减法</span>
<span class="line"> dncrement = () => {</span>
<span class="line"> store.dispatch(createDecrementAction(this.selectNumber * 1))</span>
<span class="line"> }</span>
<span class="line"> // 奇数加</span>
<span class="line"> incrementIfOdd = () => {</span>
<span class="line"> if (store.getState() % 2 !== 0) {</span>
<span class="line"> store.dispatch(createIncrementAction(this.selectNumber * 1))</span>
<span class="line"> }</span>
<span class="line"> }</span>
<span class="line"> // 异步加法</span>
<span class="line"> incrementAsync = () => {</span>
<span class="line"> setTimeout(() => {</span>
<span class="line"> store.dispatch(createIncrementAction(this.selectNumber * 1))</span>
<span class="line"> }, 100);</span>
<span class="line"> }</span>
<span class="line"></span>
<span class="line"> render() {</span>
<span class="line"> return (</span>
<span class="line"> <div></span>
<span class="line"> <h1>Count的值为 {store.getState()}</h1></span>
<span class="line"> <Select defaultValue='1 ' style={{ width: 120, }} onChange={c => { this.selectNumber = c }}</span>
<span class="line"> options={[{ value: 1, label: 1, }, { value: 2, label: 2, }, { value: 3, label: 3, }]} /></span>
<span class="line"> <Button type='primary' onClick={this.increment} >加</Button></span>
<span class="line"> <Button type='primary' onClick={this.dncrement} >减</Button></span>
<span class="line"> <Button type='primary' onClick={this.incrementIfOdd} >奇数加</Button></span>
<span class="line"> <Button type='primary' onClick={this.incrementAsync} >异步加</Button></span>
<span class="line"> </div></span>
<span class="line"> )</span>
<span class="line"> }</span>
<span class="line">}</span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>最后在index.js 中包裹起来</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> root <span class="token operator">=</span> ReactDOM<span class="token punctuation">.</span><span class="token function">createRoot</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">root<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>App <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// redux 的简洁写法，不会引起大面积的页面重新刷新，因为有react的diff算法</span></span>
<span class="line">store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> root<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>App <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h3 id="类式组件-合并父子组件-简写形式" tabindex="-1"><a class="header-anchor" href="#类式组件-合并父子组件-简写形式"><span>类式组件-合并父子组件 简写形式</span></a></h3></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> connect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-redux"</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> createDecrementAction<span class="token punctuation">,</span> createIncrementAction <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../../redux/count_action'</span></span>
<span class="line"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> Select<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name">Count</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span></span>
<span class="line"> selectNumber <span class="token operator">=</span> <span class="token number">1</span></span>
<span class="line"> <span class="token comment">// 加法</span></span>
<span class="line"> <span class="token function-variable function">increment</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">jia</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber<span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token comment">// 减法</span></span>
<span class="line"> <span class="token function-variable function">dncrement</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">jian</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber<span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">(</span></span>
<span class="line"> <span class="token operator"><</span>div<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>h1<span class="token operator">></span>Count的值为<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>count<span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Select defaultValue<span class="token operator">=</span><span class="token string">'1 '</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">120</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token parameter">c</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber <span class="token operator">=</span> c <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="line"> options<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Button type<span class="token operator">=</span><span class="token string">'primary'</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>increment<span class="token punctuation">}</span> <span class="token operator">></span>加<span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Button type<span class="token operator">=</span><span class="token string">'primary'</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>dncrement<span class="token punctuation">}</span> <span class="token operator">></span>减<span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">connect</span><span class="token punctuation">(</span></span>
<span class="line"> <span class="token parameter">state</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">count</span><span class="token operator">:</span> state <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">jia</span><span class="token operator">:</span> createIncrementAction<span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">jian</span><span class="token operator">:</span> createDecrementAction</span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">)</span><span class="token punctuation">(</span>Count<span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="函数式组件" tabindex="-1"><a class="header-anchor" href="#函数式组件"><span>函数式组件</span></a></h3><p><strong>index.ts页面</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> legacy_createStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"redux"</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> reducer <span class="token keyword">from</span> <span class="token string">"./reducer"</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">legacy_createStore</span><span class="token punctuation">(</span>reducer<span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>reducer.ts</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> initialState <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span><span class="token number">20</span><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token parameter">state <span class="token operator">=</span> initialState<span class="token punctuation">,</span> <span class="token punctuation">{</span> type<span class="token punctuation">,</span> payload <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">switch</span> <span class="token punctuation">(</span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"></span>
<span class="line"> <span class="token keyword">case</span> type<span class="token operator">==</span><span class="token string">'123'</span><span class="token operator">:</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token operator">...</span>state<span class="token punctuation">,</span> <span class="token operator">...</span>payload <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"> <span class="token keyword">default</span><span class="token operator">:</span></span>
<span class="line"> <span class="token keyword">return</span> state</span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>main.js</strong> 外侧包裹一个 <code><Provider store={store}></code> 标签 让每个页面都可以获取store的值</p><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">import { Provider } from 'react-redux'</span>
<span class="line">import store from './store/index'</span>
<span class="line">ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(</span>
<span class="line"> <Provider store={store}></span>
<span class="line"> <BrowserRouter> {/* 路由模式 */}</span>
<span class="line"> <React.Suspense fallback={<div>Loading...</div>} > {/* 懒加载标签 */}</span>
<span class="line"> <App /></span>
<span class="line"> </React.Suspense></span>
<span class="line"> </BrowserRouter></span>
<span class="line"> </Provider ></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>home.tsx</strong> 调用数据</p><div class="language-tsx line-numbers-mode" data-highlighter="prismjs" data-ext="tsx" data-title="tsx"><pre class="language-tsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> useSelector <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-redux'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">const</span> <span class="token punctuation">{</span>num111<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useSelector</span><span class="token punctuation">(</span>state <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> num111<span class="token operator">:</span>state<span class="token punctuation">.</span>name</span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token comment">//-------------------------------------</span></span>
<span class="line"><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span>num111<span class="token punctuation">}</span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="外侧如果不想包一个标签-可以直接使用-fragment-或者使用" tabindex="-1"><a class="header-anchor" href="#外侧如果不想包一个标签-可以直接使用-fragment-或者使用"><span>外侧如果不想包一个标签，可以直接使用 Fragment 或者使用<></span></a></h2><blockquote><p>Fragment 可以接收 key值，可以用来进行循环的渲染</p><p><> </> 空标签只能进行包裹但是没有任何作用</p></blockquote><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">import React, { Fragment } from 'react'</span>
<span class="line"></span>
<span class="line">render() {</span>
<span class="line"> return (</span>
<span class="line"> <Fragment key={1}></span>
<span class="line"> <Count /></span>
<span class="line"> <hr /></span>
<span class="line"> <Person/></span>
<span class="line"> </Fragment></span>
<span class="line"> )</span>
<span class="line">}</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="错误边界" tabindex="-1"><a class="header-anchor" href="#错误边界"><span>错误边界</span></a></h2><blockquote><h3 id="理解" tabindex="-1"><a class="header-anchor" href="#理解"><span>理解：</span></a></h3></blockquote><p>错误边界：用来捕获后代组件错误，渲染出备用页面</p><blockquote><h3 id="特点" tabindex="-1"><a class="header-anchor" href="#特点"><span>特点：</span></a></h3></blockquote><p>只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误</p><blockquote><h3 id="使用方式" tabindex="-1"><a class="header-anchor" href="#使用方式"><span>使用方式：</span></a></h3></blockquote><p>getDerivedStateFromError配合componentDidCatch</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token comment">// 生命周期函数，一旦后台组件报错，就会触发</span></span>
<span class="line"><span class="token keyword">static</span> <span class="token function">getDerivedStateFromError</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token comment">// 在render之前触发</span></span>
<span class="line"> <span class="token comment">// 返回新的state</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">hasError</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"><span class="token function">componentDidCatch</span><span class="token punctuation">(</span><span class="token parameter">error<span class="token punctuation">,</span> info</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// 统计页面的错误。发送请求发送到后台去</span></span>
<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">,</span> info<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="组件通信方式总结" tabindex="-1"><a class="header-anchor" href="#组件通信方式总结"><span>组件通信方式总结</span></a></h2><blockquote><h2 id="方式" tabindex="-1"><a class="header-anchor" href="#方式"><span>方式：</span></a></h2></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"> <span class="token function">props：</span></span>
<span class="line"> <span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">.</span>children <span class="token function">props</span></span>
<span class="line"> <span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">.</span>render props</span>
<span class="line"> 消息订阅<span class="token operator">-</span>发布：</span>
<span class="line"> pubs<span class="token operator">-</span>sub、event等等</span>
<span class="line"> 集中式管理：</span>
<span class="line"> redux、dva等等</span>
<span class="line"> <span class="token literal-property property">conText</span><span class="token operator">:</span></span>
<span class="line"> 生产者<span class="token operator">-</span>消费者模式</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h2 id="组件间的关系" tabindex="-1"><a class="header-anchor" href="#组件间的关系"><span>组件间的关系</span></a></h2></blockquote><div class="language-txt line-numbers-mode" data-highlighter="prismjs" data-ext="txt" data-title="txt"><pre class="language-txt"><code><span class="line"> 父子组件：props</span>
<span class="line"> 兄弟组件(非嵌套组件)：消息订阅-发布、集中式管理</span>
<span class="line"> 祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(用的少)</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="function过程传参" tabindex="-1"><a class="header-anchor" href="#function过程传参"><span>Function过程传参</span></a></h2><blockquote><h4 id="params-传参" tabindex="-1"><a class="header-anchor" href="#params-传参"><span>Params 传参</span></a></h4></blockquote><blockquote><h4 id="search-传参" tabindex="-1"><a class="header-anchor" href="#search-传参"><span>Search 传参</span></a></h4></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> useSearchParams <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span></span>
<span class="line"><span class="token keyword">const</span> <span class="token punctuation">[</span>search<span class="token punctuation">,</span> setsearch<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useSearchParams</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> search<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'id'</span><span class="token punctuation">)</span> <span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="设置-为src目录" tabindex="-1"><a class="header-anchor" href="#设置-为src目录"><span>设置@为Src目录</span></a></h2><blockquote><p>先安装一个包 <code>cnpm i - D @types/node</code>用来解决<code>path</code>报错</p></blockquote><div class="language-tsx line-numbers-mode" data-highlighter="prismjs" data-ext="tsx" data-title="tsx"><pre class="language-tsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vite'</span></span>
<span class="line"><span class="token keyword">import</span> react <span class="token keyword">from</span> <span class="token string">'@vitejs/plugin-react'</span></span>
<span class="line"><span class="token keyword">import</span> path <span class="token keyword">from</span> <span class="token string">'path'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">react</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"> resolve<span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> alias<span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token string-property property">'@'</span><span class="token operator">:</span>path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span><span class="token string">'./src'</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h2 id="输入-不能自动识别路径" tabindex="-1"><a class="header-anchor" href="#输入-不能自动识别路径"><span>输入 @/ 不能自动识别路径</span></a></h2><p>在<code>tsconfig.json</code> 中 添加如下代码</p></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token punctuation">{</span></span>
<span class="line"> <span class="token string-property property">"compilerOptions"</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token string-property property">"baseUrl"</span><span class="token operator">:</span> <span class="token string">"./"</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token string-property property">"paths"</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token string-property property">"@/*"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"src/*"</span><span class="token punctuation">]</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="hook" tabindex="-1"><a class="header-anchor" href="#hook"><span>Hook</span></a></h2><blockquote><h5 id="uselocation-可以查看路由表信息" tabindex="-1"><a class="header-anchor" href="#uselocation-可以查看路由表信息"><span>useLocation() 可以查看路由表信息</span></a></h5></blockquote><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line">const currentRoute = useLocation() </span>
<span class="line">console.log(currentRoute)</span>
<span class="line"> // 结果 {pathname: '/comp2', search: '', hash: '', state: null, key: 'xnmozq4r'} </span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="设置-为src目录-1" tabindex="-1"><a class="header-anchor" href="#设置-为src目录-1"><span>设置@为Src目录</span></a></h2><blockquote><p>先安装一个包 <code>cnpm i - D @types/node</code>用来解决<code>path</code>报错</p></blockquote><div class="language-tsx line-numbers-mode" data-highlighter="prismjs" data-ext="tsx" data-title="tsx"><pre class="language-tsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vite'</span></span>
<span class="line"><span class="token keyword">import</span> react <span class="token keyword">from</span> <span class="token string">'@vitejs/plugin-react'</span></span>
<span class="line"><span class="token keyword">import</span> path <span class="token keyword">from</span> <span class="token string">'path'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">react</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"> resolve<span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> alias<span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token string-property property">'@'</span><span class="token operator">:</span>path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span><span class="token string">'./src'</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h2 id="输入-不能自动识别路径-1" tabindex="-1"><a class="header-anchor" href="#输入-不能自动识别路径-1"><span>输入 @/ 不能自动识别路径</span></a></h2><p>在<code>tsconfig.json</code> 中 添加如下代码</p></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token punctuation">{</span></span>
<span class="line"> <span class="token string-property property">"compilerOptions"</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token string-property property">"baseUrl"</span><span class="token operator">:</span> <span class="token string">"./"</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token string-property property">"paths"</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token string-property property">"@/*"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"src/*"</span><span class="token punctuation">]</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="路由配置流程-带懒加载" tabindex="-1"><a class="header-anchor" href="#路由配置流程-带懒加载"><span>路由配置流程（带懒加载)</span></a></h2><blockquote><h3 id="router-js" tabindex="-1"><a class="header-anchor" href="#router-js"><span>router.js</span></a></h3></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> lazy <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> Navigate <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// import About from "../views/About";</span></span>
<span class="line"><span class="token keyword">import</span> Home <span class="token keyword">from</span> <span class="token string">"../views/Home"</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">const</span> About <span class="token operator">=</span> <span class="token function">lazy</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">"../views/About"</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token comment">// const Home = lazy(() => import("../views/Home"))</span></span>
<span class="line"><span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line"> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token operator"><</span>Navigate to<span class="token operator">=</span><span class="token string">'/home'</span> <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/home'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token operator"><</span>Home <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/about'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token operator"><</span>About <span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">]</span></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> routes</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h3 id="在main里面创建路由模式" tabindex="-1"><a class="header-anchor" href="#在main里面创建路由模式"><span>在main里面创建路由模式</span></a></h3></blockquote><div class="language-tsx line-numbers-mode" data-highlighter="prismjs" data-ext="tsx" data-title="tsx"><pre class="language-tsx"><code><span class="line"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span></span>
<span class="line"><span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom/client'</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token string">'reset-css'</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token string">'@/assets/style/global.scss'</span></span>
<span class="line"><span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App'</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> BrowserRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span></span>
<span class="line">ReactDOM<span class="token punctuation">.</span><span class="token function">createRoot</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span> <span class="token keyword">as</span> HTMLElement<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">React.StrictMode</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token comment">/* 严格模式 */</span><span class="token punctuation">}</span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">BrowserRouter</span></span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token comment">/* 路由模式 */</span><span class="token punctuation">}</span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">React.Suspense</span></span> <span class="token attr-name">fallback</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Loading...</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">}</span></span> <span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token comment">/* 懒加载标签 */</span><span class="token punctuation">}</span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">App</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">React.Suspense</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">BrowserRouter</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">React.StrictMode</span></span><span class="token punctuation">></span></span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h3 id="app-tsx" tabindex="-1"><a class="header-anchor" href="#app-tsx"><span>App.tsx</span></a></h3></blockquote><div class="language-tsx line-numbers-mode" data-highlighter="prismjs" data-ext="tsx" data-title="tsx"><pre class="language-tsx"><code><span class="line"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span></span>
<span class="line"><span class="token keyword">import</span> Copm1 <span class="token keyword">from</span> <span class="token string">'./components/Comp1/inedx'</span></span>
<span class="line"><span class="token keyword">import</span> Comp2 <span class="token keyword">from</span> <span class="token string">'./components/Comp2'</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> useRoutes<span class="token punctuation">,</span> Link <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span></span>
<span class="line"><span class="token keyword">import</span> router <span class="token keyword">from</span> <span class="token string">'./router'</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token function">useRoutes</span><span class="token punctuation">(</span>router<span class="token punctuation">)</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">(</span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text"> 我是APP组件</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Copm1</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Comp2</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Link</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/home<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token plain-text">Go home</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Link</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Link</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/About<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token plain-text">Go home</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Link</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
<span class="line"> </span><span class="token punctuation">{</span>element<span class="token punctuation">}</span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,72);function b(g,h){const a=p("App");return o(),t("div",null,[r,s("blockquote",null,[u,s("h4",d,[s("a",k,[s("span",null,[l("(5).在index.js中监测store中状态的改变，一旦发生改变重新渲染"),i(a)])])]),v]),m])}const f=e(c,[["render",b],["__file","React 笔记.html.vue"]]),w=JSON.parse('{"path":"/React%E7%AC%94%E8%AE%B0/React%20%E7%AC%94%E8%AE%B0.html","title":"React 笔记","lang":"zh-CN","frontmatter":{"title":"React 笔记","date":"2022-12-29T00:00:00.000Z","tags":["React","笔记"],"categories":["居家篇"]},"headers":[{"level":2,"title":"初始化包","slug":"初始化包","link":"#初始化包","children":[]},{"level":2,"title":"项目中一般使用 PureComponent 而不是用 Component","slug":"项目中一般使用-purecomponent-而不是用-component","link":"#项目中一般使用-purecomponent-而不是用-component","children":[]},{"level":2,"title":"调用接口 配置代理","slug":"调用接口-配置代理","link":"#调用接口-配置代理","children":[]},{"level":2,"title":"组件沟通，消息订阅与发布","slug":"组件沟通-消息订阅与发布","link":"#组件沟通-消息订阅与发布","children":[]},{"level":2,"title":"路由 调用组件，动态样式","slug":"路由-调用组件-动态样式","link":"#路由-调用组件-动态样式","children":[]},{"level":2,"title":"路由 多标签截至 Switch","slug":"路由-多标签截至-switch","link":"#路由-多标签截至-switch","children":[]},{"level":2,"title":"解决样式丢失","slug":"解决样式丢失","link":"#解决样式丢失","children":[]},{"level":2,"title":"路由重定向","slug":"路由重定向","link":"#路由重定向","children":[]},{"level":2,"title":"二级路由--一定不要严格匹配","slug":"二级路由-一定不要严格匹配","link":"#二级路由-一定不要严格匹配","children":[]},{"level":2,"title":"路由传递参数","slug":"路由传递参数","link":"#路由传递参数","children":[{"level":3,"title":"路由带参数传值 --- params参数","slug":"路由带参数传值-params参数","link":"#路由带参数传值-params参数","children":[]},{"level":3,"title":"路由带参数传值 --- search参数","slug":"路由带参数传值-search参数","link":"#路由带参数传值-search参数","children":[]},{"level":3,"title":"路由带参数传值 --- state参数","slug":"路由带参数传值-state参数","link":"#路由带参数传值-state参数","children":[]}]},{"level":2,"title":"编程式导航","slug":"编程式导航","link":"#编程式导航","children":[{"level":3,"title":"类式组件 history-API","slug":"类式组件-history-api","link":"#类式组件-history-api","children":[]},{"level":3,"title":"函数式组件 <Navigate/>跳转路由","slug":"函数式组件-navigate-跳转路由","link":"#函数式组件-navigate-跳转路由","children":[]}]},{"level":2,"title":"函数式组件调用路由","slug":"函数式组件调用路由","link":"#函数式组件调用路由","children":[{"level":3,"title":"调用子集路由","slug":"调用子集路由","link":"#调用子集路由","children":[]}]},{"level":2,"title":"一般组件想使用 路由组件的API参数 -- withRouter","slug":"一般组件想使用-路由组件的api参数-withrouter","link":"#一般组件想使用-路由组件的api参数-withrouter","children":[]},{"level":2,"title":"Redux 基本使用","slug":"redux-基本使用","link":"#redux-基本使用","children":[{"level":3,"title":"类式组件","slug":"类式组件","link":"#类式组件","children":[]},{"level":3,"title":"函数式组件","slug":"函数式组件","link":"#函数式组件","children":[]}]},{"level":2,"title":"外侧如果不想包一个标签，可以直接使用 Fragment 或者使用<>","slug":"外侧如果不想包一个标签-可以直接使用-fragment-或者使用","link":"#外侧如果不想包一个标签-可以直接使用-fragment-或者使用","children":[]},{"level":2,"title":"错误边界","slug":"错误边界","link":"#错误边界","children":[]},{"level":2,"title":"组件通信方式总结","slug":"组件通信方式总结","link":"#组件通信方式总结","children":[]},{"level":2,"title":"Function过程传参","slug":"function过程传参","link":"#function过程传参","children":[]},{"level":2,"title":"设置@为Src目录","slug":"设置-为src目录","link":"#设置-为src目录","children":[]},{"level":2,"title":"Hook","slug":"hook","link":"#hook","children":[]},{"level":2,"title":"设置@为Src目录","slug":"设置-为src目录-1","link":"#设置-为src目录-1","children":[]},{"level":2,"title":"路由配置流程（带懒加载)","slug":"路由配置流程-带懒加载","link":"#路由配置流程-带懒加载","children":[]}],"git":{"updatedTime":1727229103000,"contributors":[{"name":"袁果锅","email":"2914310412@qq.com","commits":1}]},"filePathRelative":"React笔记/React 笔记.md","excerpt":"<h2>初始化包</h2>\\n<div class=\\"language-node\\" data-highlighter=\\"prismjs\\" data-ext=\\"node\\" data-title=\\"node\\"><pre class=\\"language-node\\"><code><span class=\\"line\\">cnpm i react-redux react-router-dom redux</span>\\n<span class=\\"line\\">cnpm i reset-css //初始化样式 安装这个包以后在 main.js中最上方引入即可清除样式</span>\\n<span class=\\"line\\">cnpm i sass -D -S</span>\\n<span class=\\"line\\">cnpm i react react-redux --save</span>\\n<span class=\\"line\\"></span></code></pre></div>"}');export{f as comp,w as data};