study/ZiuChen.github.io
1
0
Fork 0
mirror of https://github.com/ZiuChen/ZiuChen.github.io.git synced 2025-12-18 17:04:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Deploying to gh-pages from @ ZiuChen/ZiuChen.github.io@7294bbdd21 🚀

Browse Source
This commit is contained in:
ZiuChen
2023-08-09 16:41:26 +00:00
parent 5e1f90a489
commit 354e6a573c
54 changed files with 108 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
404.html
View File

File diff suppressed because one or more lines are too long

2
article/【2023】青训营 - 前端练习题汇总解析.html
View File

File diff suppressed because one or more lines are too long

2
article/【字节跳动】前端面试题总结.html
View File

File diff suppressed because one or more lines are too long

2
article/【快手】深入理解前端面试题.html
View File

File diff suppressed because one or more lines are too long

2
article/【用友金融】前端面试题总结.html
View File

File diff suppressed because one or more lines are too long

2
article/一文读懂事件冒泡与事件捕获.html
View File

File diff suppressed because one or more lines are too long

2
article/一文读懂伪类与伪元素.html
View File

File diff suppressed because one or more lines are too long

2
article/一文读懂函数中this指向问题.html
View File

File diff suppressed because one or more lines are too long

2
article/从0实现一个年度报告.html
View File

File diff suppressed because one or more lines are too long

2
article/彻底搞懂对象的数据属性描述符、存储属性描述符.html
View File

File diff suppressed because one or more lines are too long

2
article/浅析defineProperty与Proxy实现的双向绑定.html
View File

File diff suppressed because one or more lines are too long

2
article/深入JavaScript数据类型.html
View File

File diff suppressed because one or more lines are too long

2
article/深入Vue3源码，看看Vue.use后究竟发生了什么？.html
View File

File diff suppressed because one or more lines are too long

2
article/深入理解Proxy与Reflect.html
View File

File diff suppressed because one or more lines are too long

2
article/深入理解浏览器缓存机制.html
View File

File diff suppressed because one or more lines are too long

2
article/深入理解浏览器运行原理.html
View File

File diff suppressed because one or more lines are too long

20
assets/note_Front-end Engineering.md.2f3633d1.js → assets/note_Front-end Engineering.md.3b482009.js
View File

File diff suppressed because one or more lines are too long

2
assets/note_Front-end Engineering.md.2f3633d1.lean.js → assets/note_Front-end Engineering.md.3b482009.lean.js
View File

@@ -1 +1 @@
import{_ as s,o as a,c as n,S as l}from"./chunks/framework.04e6e156.js";const o="/assets/the-node.js-system.dd187a1f.jpeg",e="/assets/esmodule-phases.7bb37c77.png",p="/assets/hard-link-and-soft-link.b45d1c8a.jpg",c="/assets/how-pnpm-works.a14a4880.jpg",b=JSON.parse('{"title":"前端工程化","description":"","frontmatter":{},"headers":[],"relativePath":"note/Front-end Engineering.md","filePath":"note/Front-end Engineering.md","lastUpdated":1691598239000}'),r={name:"note/Front-end Engineering.md"},t=l("",254),i=[t];function d(y,D,C,F,u,A){return a(),n("div",null,i)}const h=s(r,[["render",d]]);export{b as __pageData,h as default};
import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const o="/assets/the-node.js-system.dd187a1f.jpeg",e="/assets/esmodule-phases.7bb37c77.png",p="/assets/hard-link-and-soft-link.b45d1c8a.jpg",c="/assets/how-pnpm-works.a14a4880.jpg",b=JSON.parse('{"title":"前端工程化","description":"","frontmatter":{},"headers":[],"relativePath":"note/Front-end Engineering.md","filePath":"note/Front-end Engineering.md","lastUpdated":1691598239000}'),r={name:"note/Front-end Engineering.md"},t=l("",254),i=[t];function d(y,D,C,F,u,A){return n(),a("div",null,i)}const h=s(r,[["render",d]]);export{b as __pageData,h as default};

16
assets/note_React Hooks.md.2e138c33.js → assets/note_React Hooks.md.d857d076.js
View File

@@ -1,4 +1,4 @@
import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const p="/assets/useLayoutEffect.a5021f93.svg",o="/assets/SSR.7c2917b7.svg",b=JSON.parse('{"title":"React Hooks","description":"","frontmatter":{},"headers":[],"relativePath":"note/React Hooks.md","filePath":"note/React Hooks.md","lastUpdated":1691598239000}'),e={name:"note/React Hooks.md"},t=l(`<h1 id="react-hooks" tabindex="-1">React Hooks <a class="header-anchor" href="#react-hooks" aria-label="Permalink to &quot;React Hooks&quot;">​</a></h1><ul><li>认识和体验Hooks</li><li>State/Effect</li><li>Context/Reducer</li><li>Callback/Memo</li><li>Ref/LayoutEffect</li><li>自定义Hooks使用</li></ul><h2 id="认识react-hooks" tabindex="-1">认识React Hooks <a class="header-anchor" href="#认识react-hooks" aria-label="Permalink to &quot;认识React Hooks&quot;">​</a></h2><p>Hooks 是 React16.8 推出的新特性</p><p>在没有Hooks时，类组件能够完成的大部分工作，函数式组件都无法胜任：</p><ul><li>类组件可以定义并保存组件内部状态，并在状态发生改变时触发视图重新渲染 <ul><li>函数式组件不行，每次调用函数其中的变量都会被重新初始化，重新渲染时整个函数都重新执行</li></ul></li><li>类组件可以在其内部的生命周期回调中添加副作用 <ul><li>例如<code>componentDidMount</code>在类组件生命周期只会执行一次</li><li>函数式组件没有生命周期，如果在函数体内发起网络请求，那每次重新渲染都会发起请求</li></ul></li></ul><p>类组件存在的问题：</p><ul><li>复杂组件变得难以理解 <ul><li>业务代码相互耦合，类组件变得复杂</li><li>逻辑强耦合在一起难以拆分，强行拆分会导致过度设计，进一步增加代码复杂度</li></ul></li><li>class关键字的理解 <ul><li>初学React时class关键字理解存在困难</li><li>处理<code>this</code>的指向问题需要花费额外的心智负担</li></ul></li><li>组件状态复用 <ul><li>要复用组件需要借助高阶组件</li><li><code>redux</code> 中的 <code>connect</code> 或者 <code>react-router</code> 中的 <code>withRouter</code>，高阶组件的目的就是为了状态复</li><li>或通过Provider、Consumer来共享状态，但是Comsumer嵌套问题较严重</li></ul></li></ul><p>Hooks带来的优势：</p><ul><li>在不编写class的情况下使用state和其他React特性（如生命周期）</li><li>Hooks 允许我们在函数式组件中使用状态，并在状态发生改变时让视图重新渲染</li><li>同时，我们还可以在函数式组件中使用生命周期回调</li><li>更多的优点 ...</li></ul><h2 id="计数器案例对比" tabindex="-1">计数器案例对比 <a class="header-anchor" href="#计数器案例对比" aria-label="Permalink to &quot;计数器案例对比&quot;">​</a></h2><p>分别使用Hooks和类组件编写一个计数器：</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-2J9ra" id="tab-hZOXzFU" checked="checked"><label for="tab-hZOXzFU">CounterClass.jsx</label><input type="radio" name="group-2J9ra" id="tab-DTyn4WO"><label for="tab-DTyn4WO">CounterFunctional.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// CounterClass.jsx</span></span>
import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const p="/assets/useLayoutEffect.a5021f93.svg",o="/assets/SSR.7c2917b7.svg",b=JSON.parse('{"title":"React Hooks","description":"","frontmatter":{},"headers":[],"relativePath":"note/React Hooks.md","filePath":"note/React Hooks.md","lastUpdated":1691598239000}'),e={name:"note/React Hooks.md"},t=l(`<h1 id="react-hooks" tabindex="-1">React Hooks <a class="header-anchor" href="#react-hooks" aria-label="Permalink to &quot;React Hooks&quot;">​</a></h1><ul><li>认识和体验Hooks</li><li>State/Effect</li><li>Context/Reducer</li><li>Callback/Memo</li><li>Ref/LayoutEffect</li><li>自定义Hooks使用</li></ul><h2 id="认识react-hooks" tabindex="-1">认识React Hooks <a class="header-anchor" href="#认识react-hooks" aria-label="Permalink to &quot;认识React Hooks&quot;">​</a></h2><p>Hooks 是 React16.8 推出的新特性</p><p>在没有Hooks时，类组件能够完成的大部分工作，函数式组件都无法胜任：</p><ul><li>类组件可以定义并保存组件内部状态，并在状态发生改变时触发视图重新渲染 <ul><li>函数式组件不行，每次调用函数其中的变量都会被重新初始化，重新渲染时整个函数都重新执行</li></ul></li><li>类组件可以在其内部的生命周期回调中添加副作用 <ul><li>例如<code>componentDidMount</code>在类组件生命周期只会执行一次</li><li>函数式组件没有生命周期，如果在函数体内发起网络请求，那每次重新渲染都会发起请求</li></ul></li></ul><p>类组件存在的问题：</p><ul><li>复杂组件变得难以理解 <ul><li>业务代码相互耦合，类组件变得复杂</li><li>逻辑强耦合在一起难以拆分，强行拆分会导致过度设计，进一步增加代码复杂度</li></ul></li><li>class关键字的理解 <ul><li>初学React时class关键字理解存在困难</li><li>处理<code>this</code>的指向问题需要花费额外的心智负担</li></ul></li><li>组件状态复用 <ul><li>要复用组件需要借助高阶组件</li><li><code>redux</code> 中的 <code>connect</code> 或者 <code>react-router</code> 中的 <code>withRouter</code>，高阶组件的目的就是为了状态复</li><li>或通过Provider、Consumer来共享状态，但是Comsumer嵌套问题较严重</li></ul></li></ul><p>Hooks带来的优势：</p><ul><li>在不编写class的情况下使用state和其他React特性（如生命周期）</li><li>Hooks 允许我们在函数式组件中使用状态，并在状态发生改变时让视图重新渲染</li><li>同时，我们还可以在函数式组件中使用生命周期回调</li><li>更多的优点 ...</li></ul><h2 id="计数器案例对比" tabindex="-1">计数器案例对比 <a class="header-anchor" href="#计数器案例对比" aria-label="Permalink to &quot;计数器案例对比&quot;">​</a></h2><p>分别使用Hooks和类组件编写一个计数器：</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-K9ON_" id="tab-DrrYO-s" checked="checked"><label for="tab-DrrYO-s">CounterClass.jsx</label><input type="radio" name="group-K9ON_" id="tab-UkuQBK9"><label for="tab-UkuQBK9">CounterFunctional.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// CounterClass.jsx</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> React</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">PureComponent</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">CounterClass</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">extends</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">PureComponent</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
@@ -95,7 +95,7 @@ import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const p=
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Effect Cleaned Up</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#A6ACCD;"> [])</span></span>
<span class="line"><span style="color:#89DDFF;">...</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h2 id="usecontext" tabindex="-1">useContext <a class="header-anchor" href="#usecontext" aria-label="Permalink to &quot;useContext&quot;">​</a></h2><p>在之前的开发中，要在组件中使用共享的Context有两种方式</p><ul><li>类组件可以通过<code>ClassName.contextType = SomeContext</code>绑定上下文</li><li>在类的函数中通过<code>this.context.xxx</code>获取上下文中共享的状态</li><li>同时有多个Context时/函数式组件中，通过<code>SomeContext.Consumer</code>的方式共享上下文状态</li></ul><p>其中最大的问题就是：多个Context在同时使用时会引入大量的嵌套，而<code>useContext</code>可以帮我们解决这个问题</p><p>通过<code>useContext</code>可以直接获取到某个上下文中共享的状态变量</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-OJdTp" id="tab-JWh1Ctd" checked="checked"><label for="tab-JWh1Ctd">Profile.jsx</label><input type="radio" name="group-OJdTp" id="tab-YH0JBI1"><label for="tab-YH0JBI1">index.js</label><input type="radio" name="group-OJdTp" id="tab-_cYnaDH"><label for="tab-_cYnaDH">App.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// Profile.jsx</span></span>
<span class="line"><span style="color:#89DDFF;">...</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h2 id="usecontext" tabindex="-1">useContext <a class="header-anchor" href="#usecontext" aria-label="Permalink to &quot;useContext&quot;">​</a></h2><p>在之前的开发中，要在组件中使用共享的Context有两种方式</p><ul><li>类组件可以通过<code>ClassName.contextType = SomeContext</code>绑定上下文</li><li>在类的函数中通过<code>this.context.xxx</code>获取上下文中共享的状态</li><li>同时有多个Context时/函数式组件中，通过<code>SomeContext.Consumer</code>的方式共享上下文状态</li></ul><p>其中最大的问题就是：多个Context在同时使用时会引入大量的嵌套，而<code>useContext</code>可以帮我们解决这个问题</p><p>通过<code>useContext</code>可以直接获取到某个上下文中共享的状态变量</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-ALPHA" id="tab-2E2j3da" checked="checked"><label for="tab-2E2j3da">Profile.jsx</label><input type="radio" name="group-ALPHA" id="tab-gC0BXFU"><label for="tab-gC0BXFU">index.js</label><input type="radio" name="group-ALPHA" id="tab-2ovrpT0"><label for="tab-2ovrpT0">App.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// Profile.jsx</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> React</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useContext</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">UserContext</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ThemeContext</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">../context</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
@@ -135,7 +135,7 @@ import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const p=
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#FFCB6B;">UserContext.Provider</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#F07178;"> )</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div></div></div><p>当组件上层最近的<code>SomeContext.Provider</code>提供的值发生更新时，<code>useContext</code>会使用上下文中最新的数据触发组件的重新渲染</p><h2 id="usereducer" tabindex="-1">useReducer <a class="header-anchor" href="#usereducer" aria-label="Permalink to &quot;useReducer&quot;">​</a></h2><p><code>useReducer</code>并不是Redux的替代品</p><ul><li><code>useReducer</code>是<code>useState</code>在某些场景下的替代方案</li><li>如果state需要处理的<strong>数据较为复杂</strong>，我们可以通过<code>useReducer</code>对其进行拆分</li><li>或者需要修改的state需要依赖之前的state时，也可以使用<code>useReducer</code></li></ul><p>下面举一个例子：用户信息包含多个复杂的字段，当用户执行操作后需要同时对多个字段进行修改</p><p>我们分别用<code>useState</code>和<code>useReducer</code>来实现：</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-LGDLD" id="tab-QsrV_Lu" checked="checked"><label for="tab-QsrV_Lu">UserInfoWithReducer.jsx</label><input type="radio" name="group-LGDLD" id="tab-iBKF4NQ"><label for="tab-iBKF4NQ">UserInfo.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// UserInfoWithReducer.jsx</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div></div></div><p>当组件上层最近的<code>SomeContext.Provider</code>提供的值发生更新时，<code>useContext</code>会使用上下文中最新的数据触发组件的重新渲染</p><h2 id="usereducer" tabindex="-1">useReducer <a class="header-anchor" href="#usereducer" aria-label="Permalink to &quot;useReducer&quot;">​</a></h2><p><code>useReducer</code>并不是Redux的替代品</p><ul><li><code>useReducer</code>是<code>useState</code>在某些场景下的替代方案</li><li>如果state需要处理的<strong>数据较为复杂</strong>，我们可以通过<code>useReducer</code>对其进行拆分</li><li>或者需要修改的state需要依赖之前的state时，也可以使用<code>useReducer</code></li></ul><p>下面举一个例子：用户信息包含多个复杂的字段，当用户执行操作后需要同时对多个字段进行修改</p><p>我们分别用<code>useState</code>和<code>useReducer</code>来实现：</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-gDp06" id="tab-a4Yxbrp" checked="checked"><label for="tab-a4Yxbrp">UserInfoWithReducer.jsx</label><input type="radio" name="group-gDp06" id="tab-lOUssrh"><label for="tab-lOUssrh">UserInfo.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// UserInfoWithReducer.jsx</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> React</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useReducer</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">reducer</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">action</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
@@ -278,7 +278,7 @@ import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const p=
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> bar1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">foo</span><span style="color:#A6ACCD;">()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#82AAFF;">bar1</span><span style="color:#A6ACCD;">() </span><span style="color:#676E95;font-style:italic;">// 1</span></span>
<span class="line"><span style="color:#82AAFF;">bar1</span><span style="color:#A6ACCD;">() </span><span style="color:#676E95;font-style:italic;">// 1</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>不论调用了多少次<code>bar1</code>，其内部取到的值都始终是最初的那个<code>count</code>，自然值也不会发生变化</p><p>所以，我们需要显式地为<code>useCallback</code>指定依赖state，这样才能准确地使用最新的状态定义新的函数</p><h3 id="真实的usecallback使用场景" tabindex="-1">真实的useCallback使用场景 <a class="header-anchor" href="#真实的usecallback使用场景" aria-label="Permalink to &quot;真实的useCallback使用场景&quot;">​</a></h3><p>经过之前的说明，目前<code>useCallback</code>看起来并没有实际的用途，它没有减少函数的定义次数，甚至在不合理使用时还会出现闭包陷阱，而带来的唯一好处就是：<strong>当状态没有发生改变时，保证函数指向确定且唯一</strong></p><p>下面我们举一个实际场景来说明<code>useCallback</code>的用途：</p><p>一个嵌套计数器的例子，外部计数器可以展示/改变计数器的值，子组件也可以通过调用props传递来的函数来改变计数器的值，同时外部计数器还包含了其他的状态在动态被修改</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-BiK7B" id="tab-VN3W1H7" checked="checked"><label for="tab-VN3W1H7">InnerCounter.jsx</label><input type="radio" name="group-BiK7B" id="tab-_EaakvI"><label for="tab-_EaakvI">Counter.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// InnerCounter.jsx</span></span>
<span class="line"><span style="color:#82AAFF;">bar1</span><span style="color:#A6ACCD;">() </span><span style="color:#676E95;font-style:italic;">// 1</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>不论调用了多少次<code>bar1</code>，其内部取到的值都始终是最初的那个<code>count</code>，自然值也不会发生变化</p><p>所以，我们需要显式地为<code>useCallback</code>指定依赖state，这样才能准确地使用最新的状态定义新的函数</p><h3 id="真实的usecallback使用场景" tabindex="-1">真实的useCallback使用场景 <a class="header-anchor" href="#真实的usecallback使用场景" aria-label="Permalink to &quot;真实的useCallback使用场景&quot;">​</a></h3><p>经过之前的说明，目前<code>useCallback</code>看起来并没有实际的用途，它没有减少函数的定义次数，甚至在不合理使用时还会出现闭包陷阱，而带来的唯一好处就是：<strong>当状态没有发生改变时，保证函数指向确定且唯一</strong></p><p>下面我们举一个实际场景来说明<code>useCallback</code>的用途：</p><p>一个嵌套计数器的例子，外部计数器可以展示/改变计数器的值，子组件也可以通过调用props传递来的函数来改变计数器的值，同时外部计数器还包含了其他的状态在动态被修改</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-wJt99" id="tab-Xaa8_Kt" checked="checked"><label for="tab-Xaa8_Kt">InnerCounter.jsx</label><input type="radio" name="group-wJt99" id="tab-nT7it8_"><label for="tab-nT7it8_">Counter.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// InnerCounter.jsx</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> React</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">memo</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">memo</span><span style="color:#A6ACCD;">(</span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">InnerCounter</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">props</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
@@ -526,7 +526,7 @@ import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const p=
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> theme </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">useContext</span><span style="color:#A6ACCD;">(ThemeContext)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(user</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">primaryColor) </span><span style="color:#676E95;font-style:italic;">// ...</span></span>
<span class="line"><span style="color:#89DDFF;">...</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>我们可以使用自定义Hook来简化这一操作，将所有的Context统一导入并转化为对象，直接在组件中使用</p><p>对之前的Profile组件使用Hook进行增强：</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-hOEn-" id="tab-UDcpQMz" checked="checked"><label for="tab-UDcpQMz">useSharedContext.js</label><input type="radio" name="group-hOEn-" id="tab-rqeODuT"><label for="tab-rqeODuT">Profile.js</label></div><div class="blocks"><div class="language-ts active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// useSharedContext.js</span></span>
<span class="line"><span style="color:#89DDFF;">...</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>我们可以使用自定义Hook来简化这一操作，将所有的Context统一导入并转化为对象，直接在组件中使用</p><p>对之前的Profile组件使用Hook进行增强：</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-YUUSj" id="tab-aOcGHD2" checked="checked"><label for="tab-aOcGHD2">useSharedContext.js</label><input type="radio" name="group-YUUSj" id="tab-HX7Kpds"><label for="tab-HX7Kpds">Profile.js</label></div><div class="blocks"><div class="language-ts active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// useSharedContext.js</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useContext</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">UserContext</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ThemeContext</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">../context</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
@@ -550,7 +550,7 @@ import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const p=
<span class="line"><span style="color:#F07178;"> &lt;</span><span style="color:#FFCB6B;">div</span><span style="color:#F07178;">&gt;</span><span style="color:#A6ACCD;font-style:italic;">theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#FFCB6B;">context</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#F07178;">theme</span><span style="color:#89DDFF;">}&lt;</span><span style="color:#F07178;">/</span><span style="color:#FFCB6B;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#A6ACCD;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#F07178;"> )</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div></div></div><h3 id="案例二-获取滚动位置" tabindex="-1">案例二：获取滚动位置 <a class="header-anchor" href="#案例二-获取滚动位置" aria-label="Permalink to &quot;案例二：获取滚动位置&quot;">​</a></h3><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-CssJ3" id="tab-h2PZZYM" checked="checked"><label for="tab-h2PZZYM">useScrollPosition.js</label><input type="radio" name="group-CssJ3" id="tab-y1Sc10f"><label for="tab-y1Sc10f">GiantList.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// useScrollPosition.js</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div></div></div><h3 id="案例二-获取滚动位置" tabindex="-1">案例二：获取滚动位置 <a class="header-anchor" href="#案例二-获取滚动位置" aria-label="Permalink to &quot;案例二：获取滚动位置&quot;">​</a></h3><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-IdQEK" id="tab-RFO65_8" checked="checked"><label for="tab-RFO65_8">useScrollPosition.js</label><input type="radio" name="group-IdQEK" id="tab-eU_EFT8"><label for="tab-eU_EFT8">GiantList.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// useScrollPosition.js</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useState</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useEffect</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">useScrollPosition</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">options</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{})</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
@@ -587,7 +587,7 @@ import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const p=
<span class="line"><span style="color:#F07178;"> )</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> GiantList</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div></div></div><h3 id="案例三-封装localstorage" tabindex="-1">案例三：封装localStorage <a class="header-anchor" href="#案例三-封装localstorage" aria-label="Permalink to &quot;案例三：封装localStorage&quot;">​</a></h3><p>在使用状态变量的时候，为状态变量值的更新添加副作用，将变量名作为key，值更新到localStorage中</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-pytKk" id="tab-FgEzM4R" checked="checked"><label for="tab-FgEzM4R">useLocalStorage.js</label><input type="radio" name="group-pytKk" id="tab-cRCEFwF"><label for="tab-cRCEFwF">UserInfoStorage.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// useLocalStorage.js</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> GiantList</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div></div></div><h3 id="案例三-封装localstorage" tabindex="-1">案例三：封装localStorage <a class="header-anchor" href="#案例三-封装localstorage" aria-label="Permalink to &quot;案例三：封装localStorage&quot;">​</a></h3><p>在使用状态变量的时候，为状态变量值的更新添加副作用，将变量名作为key，值更新到localStorage中</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-5-erb" id="tab-cMX__Ve" checked="checked"><label for="tab-cMX__Ve">useLocalStorage.js</label><input type="radio" name="group-5-erb" id="tab--k8hR4F"><label for="tab--k8hR4F">UserInfoStorage.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// useLocalStorage.js</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useState</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useEffect</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">useLocalStorage</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">key</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
@@ -622,7 +622,7 @@ import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const p=
<span class="line"><span style="color:#F07178;"> )</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> UserInfoStorage</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div></div></div><p>这里的<code>useState</code>还展示了一个额外的用法，向<code>useState</code>传递一个函数，函数的返回值会作为状态变量的初始值</p><h2 id="redux-hooks" tabindex="-1">Redux Hooks <a class="header-anchor" href="#redux-hooks" aria-label="Permalink to &quot;Redux Hooks&quot;">​</a></h2><p>之前的Redux开发中，为了让组件和Redux建立联系，我们使用了react-redux中的connect</p><ul><li>必须与高阶函数结合，必须使用返回的高阶组件</li><li>必须编写<code>mapStateToProps</code> <code>mapDispatchToProps</code>，将上下文状态映射到props中</li></ul><p>从Redux7.1开始，支持Hook写法，不再需要编写connect以及映射函数了</p><h3 id="useselector" tabindex="-1">useSelector <a class="header-anchor" href="#useselector" aria-label="Permalink to &quot;useSelector&quot;">​</a></h3><p>将state映射到组件中</p><ul><li>参数一：将state映射到需要的数据中</li><li>参数二：可以进行比较，来决定组件是否重新渲染</li></ul><p>默认情况下<code>useSelector</code>监听整个state的变化，只要state中有状态变量发生变化，无论当前组件是否使用到了这个状态变量，都会触发组件的重新渲染。这就需要我们显式地为其指定重新渲染的判断条件</p><blockquote><p><code>useSelector</code>会比较我们返回的两个对象是否相等：</p><div class="language-ts line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> refEquality </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">a</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">b</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> (a </span><span style="color:#89DDFF;">===</span><span style="color:#A6ACCD;"> b)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>只有两个对象全等时，才可以不触发重新渲染</p></blockquote><h3 id="usedispatch" tabindex="-1">useDispatch <a class="header-anchor" href="#usedispatch" aria-label="Permalink to &quot;useDispatch&quot;">​</a></h3><p>直接获取<code>dispatch</code>函数，之后在组件中直接调用即可</p><p>另外，我们还可以通过<code>useStore</code>来获取当前的store对象</p><p>拿之前Redux的计数器举例，使用<code>useSelector</code>与<code>useDispatch</code>进行重构：</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-e5551" id="tab-zXT0REY" checked="checked"><label for="tab-zXT0REY">[Now] Counter.jsx</label><input type="radio" name="group-e5551" id="tab-1QtbYQN"><label for="tab-1QtbYQN">[Prev] Counter.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// [Now] Counter.jsx</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> UserInfoStorage</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div></div></div><p>这里的<code>useState</code>还展示了一个额外的用法，向<code>useState</code>传递一个函数，函数的返回值会作为状态变量的初始值</p><h2 id="redux-hooks" tabindex="-1">Redux Hooks <a class="header-anchor" href="#redux-hooks" aria-label="Permalink to &quot;Redux Hooks&quot;">​</a></h2><p>之前的Redux开发中，为了让组件和Redux建立联系，我们使用了react-redux中的connect</p><ul><li>必须与高阶函数结合，必须使用返回的高阶组件</li><li>必须编写<code>mapStateToProps</code> <code>mapDispatchToProps</code>，将上下文状态映射到props中</li></ul><p>从Redux7.1开始，支持Hook写法，不再需要编写connect以及映射函数了</p><h3 id="useselector" tabindex="-1">useSelector <a class="header-anchor" href="#useselector" aria-label="Permalink to &quot;useSelector&quot;">​</a></h3><p>将state映射到组件中</p><ul><li>参数一：将state映射到需要的数据中</li><li>参数二：可以进行比较，来决定组件是否重新渲染</li></ul><p>默认情况下<code>useSelector</code>监听整个state的变化，只要state中有状态变量发生变化，无论当前组件是否使用到了这个状态变量，都会触发组件的重新渲染。这就需要我们显式地为其指定重新渲染的判断条件</p><blockquote><p><code>useSelector</code>会比较我们返回的两个对象是否相等：</p><div class="language-ts line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> refEquality </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">a</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">b</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> (a </span><span style="color:#89DDFF;">===</span><span style="color:#A6ACCD;"> b)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>只有两个对象全等时，才可以不触发重新渲染</p></blockquote><h3 id="usedispatch" tabindex="-1">useDispatch <a class="header-anchor" href="#usedispatch" aria-label="Permalink to &quot;useDispatch&quot;">​</a></h3><p>直接获取<code>dispatch</code>函数，之后在组件中直接调用即可</p><p>另外，我们还可以通过<code>useStore</code>来获取当前的store对象</p><p>拿之前Redux的计数器举例，使用<code>useSelector</code>与<code>useDispatch</code>进行重构：</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-vPtDS" id="tab-khjuGHp" checked="checked"><label for="tab-khjuGHp">[Now] Counter.jsx</label><input type="radio" name="group-vPtDS" id="tab--GnuwkS"><label for="tab--GnuwkS">[Prev] Counter.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// [Now] Counter.jsx</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">memo</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useSelector</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useDispatch</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">shallowEqual</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react-redux</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">addCount</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">subCount</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">../store/features/counter</span><span style="color:#89DDFF;">&#39;</span></span>

0
assets/note_React Hooks.md.2e138c33.lean.js → assets/note_React Hooks.md.d857d076.lean.js
View File

8
assets/note_React Router.md.80d05747.js → assets/note_React Router.md.b8a56849.js
View File

@@ -38,7 +38,7 @@ import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const A=
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#F07178;"> )</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><p>另外，这里还有一个小技巧，在最末一个路由指定一个path为<code>*</code>的路由匹配规则，可以为路由匹配添加fallback策略，当未匹配到其之前的任何域名时，会展示NotFound页面</p><h2 id="嵌套路由" tabindex="-1">嵌套路由 <a class="header-anchor" href="#嵌套路由" aria-label="Permalink to &quot;嵌套路由&quot;">​</a></h2><p>嵌套路由可以通过在<code>Route</code>组件内部嵌套新的<code>Route</code>组件来实现</p><p>再通过<code>Outlet</code>组件来指定嵌套路由的占位元素（类似于VueRouter中的router-view）</p><p>我们在之前的例子的基础上，为Home页面添加两个子页面HomeRanking和HomeRecommand</p><p>同时，我们也应该为Home组件添加默认跳转，就像根路径默认重定向到Home组件那样，进入到Home组件后也应该默认重定向一个子页面中，这里我们仍然使用到了Navigate组件</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-5Byzf" id="tab-dA5xjQU" checked="checked"><label for="tab-dA5xjQU">App.jsx </label><input type="radio" name="group-5Byzf" id="tab-0OIp5MW"><label for="tab-0OIp5MW">Home.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// App.jsx</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><p>另外，这里还有一个小技巧，在最末一个路由指定一个path为<code>*</code>的路由匹配规则，可以为路由匹配添加fallback策略，当未匹配到其之前的任何域名时，会展示NotFound页面</p><h2 id="嵌套路由" tabindex="-1">嵌套路由 <a class="header-anchor" href="#嵌套路由" aria-label="Permalink to &quot;嵌套路由&quot;">​</a></h2><p>嵌套路由可以通过在<code>Route</code>组件内部嵌套新的<code>Route</code>组件来实现</p><p>再通过<code>Outlet</code>组件来指定嵌套路由的占位元素（类似于VueRouter中的router-view）</p><p>我们在之前的例子的基础上，为Home页面添加两个子页面HomeRanking和HomeRecommand</p><p>同时，我们也应该为Home组件添加默认跳转，就像根路径默认重定向到Home组件那样，进入到Home组件后也应该默认重定向一个子页面中，这里我们仍然使用到了Navigate组件</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-QmJJI" id="tab--64_JbJ" checked="checked"><label for="tab--64_JbJ">App.jsx </label><input type="radio" name="group-QmJJI" id="tab-Q8QM-JU"><label for="tab-Q8QM-JU">Home.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// App.jsx</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> React</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">PureComponent</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Routes</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Route</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Navigate</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">NavLink</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react-router-dom</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Home </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./views/Home</span><span style="color:#89DDFF;">&#39;</span></span>
@@ -73,7 +73,7 @@ import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const A=
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#F07178;"> )</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div></div></div><h2 id="编程式导航-高阶组件" tabindex="-1">编程式导航（高阶组件） <a class="header-anchor" href="#编程式导航-高阶组件" aria-label="Permalink to &quot;编程式导航（高阶组件）&quot;">​</a></h2><p>之前使用的ReactRouter提供的路由跳转的组件，无论是<code>Link</code>还是<code>NavLink</code>可定制化能力都比较差，无法实现“点击按钮后跳转路由”这样的需求，那么我们就需要通过编程式导航，使用JS来完成路由的跳转</p><p>ReactRouter提供了编程式导航的API：<code>useNavigate</code></p><p>自ReactRouter6起，编程式导航的API不再支持ClassComponent，全面拥抱Hooks。</p><p>我们将在后续的学习中开启Hooks的写法，那么目前如何在类组件中也能使用Hooks呢？答案是高阶组件</p><p>封装一个高阶组件<code>withRouter</code>，经过高阶组件处理的类组件的props将会携带router对象，上面包含一些我们需要的属性和方法：</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-a7XAP" id="tab--1Lxfis" checked="checked"><label for="tab--1Lxfis">withRouter.js</label><input type="radio" name="group-a7XAP" id="tab-kVMIGV0"><label for="tab-kVMIGV0">Home.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// withRouter.js</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div></div></div><h2 id="编程式导航-高阶组件" tabindex="-1">编程式导航（高阶组件） <a class="header-anchor" href="#编程式导航-高阶组件" aria-label="Permalink to &quot;编程式导航（高阶组件）&quot;">​</a></h2><p>之前使用的ReactRouter提供的路由跳转的组件，无论是<code>Link</code>还是<code>NavLink</code>可定制化能力都比较差，无法实现“点击按钮后跳转路由”这样的需求，那么我们就需要通过编程式导航，使用JS来完成路由的跳转</p><p>ReactRouter提供了编程式导航的API：<code>useNavigate</code></p><p>自ReactRouter6起，编程式导航的API不再支持ClassComponent，全面拥抱Hooks。</p><p>我们将在后续的学习中开启Hooks的写法，那么目前如何在类组件中也能使用Hooks呢？答案是高阶组件</p><p>封装一个高阶组件<code>withRouter</code>，经过高阶组件处理的类组件的props将会携带router对象，上面包含一些我们需要的属性和方法：</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-SQ74E" id="tab-up2IqF2" checked="checked"><label for="tab-up2IqF2">withRouter.js</label><input type="radio" name="group-SQ74E" id="tab-vCtvhhk"><label for="tab-vCtvhhk">Home.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// withRouter.js</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useNavigate</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react-router-dom</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">withRouter</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">WrapperComponent</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
@@ -100,7 +100,7 @@ import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const A=
<span class="line"><span style="color:#F07178;"> )</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div></div></div><p>我们使用<code>withRouter</code>高阶组件对Home组件进行了增强，可以通过编程式导航来实现二级路由跳转</p><p>这里只是展示了编程式导航的用法和高阶组件的能力，目前还是尽可能使用Hooks写法编写新项目</p><h2 id="动态路由-路由传参" tabindex="-1">动态路由（路由传参） <a class="header-anchor" href="#动态路由-路由传参" aria-label="Permalink to &quot;动态路由（路由传参）&quot;">​</a></h2><p>传递参数由两种方式：</p><ul><li>动态路由的方式</li><li>查询字符串传递参数</li></ul><p>动态路由是指：路由中的<strong>路径</strong>信息并不会固定</p><ul><li>比如匹配规则为<code>/detail/:id</code>时，<code>/detail/123</code> <code>detail/888</code>都会被匹配上，并将<code>123/888</code>作为id参数传递</li><li>其中<code>/detail/:id</code>这个匹配规则被称为动态路由</li></ul><p>动态路由常见于嵌套路由跳转，比如：从歌曲列表页面点击后跳转到歌曲详情页，可以通过路由传递歌曲的ID，访问到不同歌曲的详情页</p><p>我们在之前的HomeRanking榜单中加入列表和点击跳转功能，并编写一个新的组件Detail来接收来自路由的参数</p><p>同样地，<code>react-router-dom</code>为我们提供了从路由获取参数的API：<code>useParams</code>，它是一个Hooks，我们将它应用到之前编写的高级组件<code>withRouter</code>中</p><ul><li>在使用了<code>withRouter</code>的组件中，就可以通过<code>this.props.router.params.xxx</code>获取到当前路由中传递的参数</li><li>使用动态匹配路由时，传递给Route组件的<code>path</code>属性为<code>:xxx</code>，这里是<code>/detail/:id</code></li></ul><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-g7OXP" id="tab-7nehZMS" checked="checked"><label for="tab-7nehZMS">withRouter.js</label><input type="radio" name="group-g7OXP" id="tab-0GF5cPe"><label for="tab-0GF5cPe">HomeRanking.jsx</label><input type="radio" name="group-g7OXP" id="tab-2CV3BgR"><label for="tab-2CV3BgR">Detail.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// withRouter.js</span></span>
<span class="line"><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div></div></div><p>我们使用<code>withRouter</code>高阶组件对Home组件进行了增强，可以通过编程式导航来实现二级路由跳转</p><p>这里只是展示了编程式导航的用法和高阶组件的能力，目前还是尽可能使用Hooks写法编写新项目</p><h2 id="动态路由-路由传参" tabindex="-1">动态路由（路由传参） <a class="header-anchor" href="#动态路由-路由传参" aria-label="Permalink to &quot;动态路由（路由传参）&quot;">​</a></h2><p>传递参数由两种方式：</p><ul><li>动态路由的方式</li><li>查询字符串传递参数</li></ul><p>动态路由是指：路由中的<strong>路径</strong>信息并不会固定</p><ul><li>比如匹配规则为<code>/detail/:id</code>时，<code>/detail/123</code> <code>detail/888</code>都会被匹配上，并将<code>123/888</code>作为id参数传递</li><li>其中<code>/detail/:id</code>这个匹配规则被称为动态路由</li></ul><p>动态路由常见于嵌套路由跳转，比如：从歌曲列表页面点击后跳转到歌曲详情页，可以通过路由传递歌曲的ID，访问到不同歌曲的详情页</p><p>我们在之前的HomeRanking榜单中加入列表和点击跳转功能，并编写一个新的组件Detail来接收来自路由的参数</p><p>同样地，<code>react-router-dom</code>为我们提供了从路由获取参数的API：<code>useParams</code>，它是一个Hooks，我们将它应用到之前编写的高级组件<code>withRouter</code>中</p><ul><li>在使用了<code>withRouter</code>的组件中，就可以通过<code>this.props.router.params.xxx</code>获取到当前路由中传递的参数</li><li>使用动态匹配路由时，传递给Route组件的<code>path</code>属性为<code>:xxx</code>，这里是<code>/detail/:id</code></li></ul><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-TFtEQ" id="tab-xAImSpJ" checked="checked"><label for="tab-xAImSpJ">withRouter.js</label><input type="radio" name="group-TFtEQ" id="tab-H_lbtI1"><label for="tab-H_lbtI1">HomeRanking.jsx</label><input type="radio" name="group-TFtEQ" id="tab-eX3XknB"><label for="tab-eX3XknB">Detail.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// withRouter.js</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useNavigate</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useParams</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react-router-dom</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">withRouter</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">WrapperComponent</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
@@ -165,7 +165,7 @@ import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const A=
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">router</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">navigate</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">params</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">query</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">WrapperComponent</span><span style="color:#89DDFF;"> {...</span><span style="color:#A6ACCD;">props</span><span style="color:#89DDFF;">} </span><span style="color:#C792EA;">router</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">router</span><span style="color:#89DDFF;">} /&gt;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>需要注意的是，这里的<code>useSearchParams</code>是一个Hooks的常见形态</p><p>它返回一个数组，数组的首位为值，数组的次位为改变值的方法</p><p>与对象解构不同的是，数组结构是对位解构：保证位置一致则值一致，命名随意</p><p>而对象解构恰恰相反，不必保证位置，而需要保证命名一致</p></div><h2 id="路由的配置方式" tabindex="-1">路由的配置方式 <a class="header-anchor" href="#路由的配置方式" aria-label="Permalink to &quot;路由的配置方式&quot;">​</a></h2><p>至此为止，路由的配置是耦合在<code>App.jsx</code>中的，我们可以将Routes这部分代码抽离出单独的组件，也可以通过配置的方式来完成路由映射关系的编写</p><ul><li>在ReactRouter5版本中，我们可以将路由的映射规则写为JS对象，需要引入第三方库<code>react-router-config</code></li><li>在ReactRouter6版本中，允许我们将其写为配置文件，不需要安装其他内容</li></ul><p>6版本为我们提供了一个API：<code>useRoutes</code>，将我们编写的配置文件传入此函数，可以将其转化为之前编写的组件结构，本质上也是一种语法糖</p><p>需要注意的是，Hooks只能在函数式组件中使用，这里我们将App组件改用FunctionComponent书写了</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-JHxOs" id="tab-_3RCr8R" checked="checked"><label for="tab-_3RCr8R">index.js</label><input type="radio" name="group-JHxOs" id="tab-JNDwmtE"><label for="tab-JNDwmtE">App.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// router/index.js</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>需要注意的是，这里的<code>useSearchParams</code>是一个Hooks的常见形态</p><p>它返回一个数组，数组的首位为值，数组的次位为改变值的方法</p><p>与对象解构不同的是，数组结构是对位解构：保证位置一致则值一致，命名随意</p><p>而对象解构恰恰相反，不必保证位置，而需要保证命名一致</p></div><h2 id="路由的配置方式" tabindex="-1">路由的配置方式 <a class="header-anchor" href="#路由的配置方式" aria-label="Permalink to &quot;路由的配置方式&quot;">​</a></h2><p>至此为止，路由的配置是耦合在<code>App.jsx</code>中的，我们可以将Routes这部分代码抽离出单独的组件，也可以通过配置的方式来完成路由映射关系的编写</p><ul><li>在ReactRouter5版本中，我们可以将路由的映射规则写为JS对象，需要引入第三方库<code>react-router-config</code></li><li>在ReactRouter6版本中，允许我们将其写为配置文件，不需要安装其他内容</li></ul><p>6版本为我们提供了一个API：<code>useRoutes</code>，将我们编写的配置文件传入此函数，可以将其转化为之前编写的组件结构，本质上也是一种语法糖</p><p>需要注意的是，Hooks只能在函数式组件中使用，这里我们将App组件改用FunctionComponent书写了</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-Wrk5R" id="tab-5gWiTcY" checked="checked"><label for="tab-5gWiTcY">index.js</label><input type="radio" name="group-Wrk5R" id="tab-Ui_bru6"><label for="tab-Ui_bru6">App.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// router/index.js</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Navigate</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react-router-dom</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Home </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">../views/Home</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> HomeRanking </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">../views/HomeRanking</span><span style="color:#89DDFF;">&#39;</span></span>

0
assets/note_React Router.md.80d05747.lean.js → assets/note_React Router.md.b8a56849.lean.js
View File

2
assets/note_React.md.ab251982.js → assets/note_React.md.de4b451f.js
View File

@@ -1024,7 +1024,7 @@ import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const p=
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#F07178;"> )</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br></div></div><h2 id="context跨组件传参" tabindex="-1">Context跨组件传参 <a class="header-anchor" href="#context跨组件传参" aria-label="Permalink to &quot;Context跨组件传参&quot;">​</a></h2><p>非父子组件之间的数据共享</p><ul><li>props层层传递 跨组件会很不方便 对于中间那些本不需要这些props数据的组件是冗余的</li><li>第三方状态库 外置于React 如Redux （实际开发中较为常用）</li><li>事件总线 ...</li></ul><p>针对跨组件传参的场景，React提供了一个API名为Context</p><ul><li>Context 提供了一个在组件之间共享此类值的方式，而不是显式地通过组件树逐层传递props</li><li>使用 Context 共享那些全局的数据，如主题色、用户登录状态、locales等</li></ul><h3 id="用context实现跨组件传参" tabindex="-1">用Context实现跨组件传参 <a class="header-anchor" href="#用context实现跨组件传参" aria-label="Permalink to &quot;用Context实现跨组件传参&quot;">​</a></h3><p>假设有App Profile UserCard三个嵌套组件，我们希望App中的 <code>isDarkMode</code> 状态能够透传到UserCard组件中</p><ul><li>全局通过 <code>createContext</code> 创建一个上下文</li><li>根组件通过 <code>DarkModeContext.Provider</code> 标签与 <code>value</code> 传递值到上下文中</li><li>需要使用到该值的子组件通过 <code>UserCard.contextType = DarkModeContext</code> 绑定到上下文</li><li>随后即可在子组件中通过 <code>this.context</code> 获取到此上下文当前绑定的状态值</li></ul><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-PcKm_" id="tab-BndJmLb" checked="checked"><label for="tab-BndJmLb">context.js</label><input type="radio" name="group-PcKm_" id="tab-o3P_Bjl"><label for="tab-o3P_Bjl">App.jsx</label><input type="radio" name="group-PcKm_" id="tab-aRqKw85"><label for="tab-aRqKw85">UserCard.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// context.js</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br></div></div><h2 id="context跨组件传参" tabindex="-1">Context跨组件传参 <a class="header-anchor" href="#context跨组件传参" aria-label="Permalink to &quot;Context跨组件传参&quot;">​</a></h2><p>非父子组件之间的数据共享</p><ul><li>props层层传递 跨组件会很不方便 对于中间那些本不需要这些props数据的组件是冗余的</li><li>第三方状态库 外置于React 如Redux （实际开发中较为常用）</li><li>事件总线 ...</li></ul><p>针对跨组件传参的场景，React提供了一个API名为Context</p><ul><li>Context 提供了一个在组件之间共享此类值的方式，而不是显式地通过组件树逐层传递props</li><li>使用 Context 共享那些全局的数据，如主题色、用户登录状态、locales等</li></ul><h3 id="用context实现跨组件传参" tabindex="-1">用Context实现跨组件传参 <a class="header-anchor" href="#用context实现跨组件传参" aria-label="Permalink to &quot;用Context实现跨组件传参&quot;">​</a></h3><p>假设有App Profile UserCard三个嵌套组件，我们希望App中的 <code>isDarkMode</code> 状态能够透传到UserCard组件中</p><ul><li>全局通过 <code>createContext</code> 创建一个上下文</li><li>根组件通过 <code>DarkModeContext.Provider</code> 标签与 <code>value</code> 传递值到上下文中</li><li>需要使用到该值的子组件通过 <code>UserCard.contextType = DarkModeContext</code> 绑定到上下文</li><li>随后即可在子组件中通过 <code>this.context</code> 获取到此上下文当前绑定的状态值</li></ul><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-r2iLN" id="tab-Mm4GwmT" checked="checked"><label for="tab-Mm4GwmT">context.js</label><input type="radio" name="group-r2iLN" id="tab-smnQXd2"><label for="tab-smnQXd2">App.jsx</label><input type="radio" name="group-r2iLN" id="tab-NPA7b-R"><label for="tab-NPA7b-R">UserCard.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// context.js</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">createContext</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> DarkModeContext </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createContext</span><span style="color:#A6ACCD;">()</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-tsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// App.jsx</span></span>

0
assets/note_React.md.ab251982.lean.js → assets/note_React.md.de4b451f.lean.js
View File

14
assets/note_Redux.md.d0a546a1.js → assets/note_Redux.md.1457f290.js
View File

@@ -1,4 +1,4 @@
import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const p="/assets/redux-usage.7df84df8.svg",o="/assets/redux-async-action.0dc40e11.svg",e="/assets/immutable.dc41f87b.gif",d=JSON.parse('{"title":"Redux","description":"","frontmatter":{},"headers":[],"relativePath":"note/Redux.md","filePath":"note/Redux.md","lastUpdated":1691598239000}'),t={name:"note/Redux.md"},c=l(`<h1 id="redux" tabindex="-1">Redux <a class="header-anchor" href="#redux" aria-label="Permalink to &quot;Redux&quot;">​</a></h1><h2 id="理解javascript的纯函数" tabindex="-1">理解JavaScript的纯函数 <a class="header-anchor" href="#理解javascript的纯函数" aria-label="Permalink to &quot;理解JavaScript的纯函数&quot;">​</a></h2><ul><li>函数式编程中有一个非常重要的概念 <strong>纯函数</strong>，JavaScript符合函数式编程的范式，所以也有纯函数的概念 <ul><li>在React开发中，纯函数被多次提及：</li><li>React组件被要求像一个纯函数（为什么是像，因为还有类组件）</li><li>Redux中有一个reducer的概念，同样是要求必须是一个纯函数</li></ul></li><li>掌握纯函数对于理解很多框架的设计都是有帮助的</li></ul><p>一个纯函数必然具备以下特征：</p><ul><li>确定的输入一定产生确定的输出</li><li>函数的执行过程中，不能产生副作用</li></ul><h2 id="为什么需要redux" tabindex="-1">为什么需要Redux <a class="header-anchor" href="#为什么需要redux" aria-label="Permalink to &quot;为什么需要Redux&quot;">​</a></h2><ul><li>JS需要管理的状态越来越多，越来越复杂</li><li>状态不断发生变化之间又相互依赖，这要求视图层也能同步更新</li><li>React提供了自动更新视图的方法，但状态仍需要手动管理</li><li>Redux可以帮我们管理状态，提供了<strong>可预测的状态管理</strong></li><li>框架无关，体积只有2KB大小</li></ul><h2 id="redux的核心理念" tabindex="-1">Redux的核心理念 <a class="header-anchor" href="#redux的核心理念" aria-label="Permalink to &quot;Redux的核心理念&quot;">​</a></h2><p>Redux的核心理念 Store</p><ul><li>定义一个统一的规范来操作数据，这样就可以做到对数据的跟踪</li><li><code>list.push()</code> <code>list[0].age = 18</code></li></ul><p>Redux的核心理念 Action</p><ul><li>Redux要求：要修改数据，必须通过Action来修改</li><li>所有数据的变化，必须通过派发（Patch）Action来更新</li><li>Action是一个普通的JS对象，用来描述此次更新的type与content</li><li><code>const action = { type: &#39;ADD_ITEM&#39;, item: { name: &#39;Ziu&#39;, age: 18 } }</code></li></ul><p>Redux的核心理念 Reducer</p><ul><li>如何将Store和Action联系在一起？</li><li>reducer是一个纯函数</li><li>完成的工作就是：将传入的state和action结合起来，生成一个新的state</li><li><code>patch</code> =&gt; <code>reducer</code> =&gt; <code>newState</code> =&gt; <code>Store</code></li></ul><h2 id="redux-demo" tabindex="-1">Redux Demo <a class="header-anchor" href="#redux-demo" aria-label="Permalink to &quot;Redux Demo&quot;">​</a></h2><p>下例中，通过<code>createStore</code>创建了一个Store（已经不推荐了）</p><ul><li>initialState用于在调用<code>createStore</code>时作为默认值传入<code>reducer</code></li><li>后续每次<code>store.dispatch</code>都会调用<code>reducer</code></li><li>通过<code>reducer</code>更新state中的数据</li></ul><p>在React中，可以通过<code>store.subscribe</code>注册State变化的监听回调</p><ul><li>当state发生变化时，通过调用<code>this.forceUpdate</code>触发组件的更新</li><li>一般情况下，我们在<code>componentDidMount</code>注册监听回调，在<code>componentWillUnmount</code>解除监听</li></ul><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-PjX5N" id="tab-4wOHpLh" checked="checked"><label for="tab-4wOHpLh">App.jsx</label><input type="radio" name="group-PjX5N" id="tab-enHqx0X"><label for="tab-enHqx0X">index.js</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// App.jsx</span></span>
import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const p="/assets/redux-usage.7df84df8.svg",o="/assets/redux-async-action.0dc40e11.svg",e="/assets/immutable.dc41f87b.gif",d=JSON.parse('{"title":"Redux","description":"","frontmatter":{},"headers":[],"relativePath":"note/Redux.md","filePath":"note/Redux.md","lastUpdated":1691598239000}'),t={name:"note/Redux.md"},c=l(`<h1 id="redux" tabindex="-1">Redux <a class="header-anchor" href="#redux" aria-label="Permalink to &quot;Redux&quot;">​</a></h1><h2 id="理解javascript的纯函数" tabindex="-1">理解JavaScript的纯函数 <a class="header-anchor" href="#理解javascript的纯函数" aria-label="Permalink to &quot;理解JavaScript的纯函数&quot;">​</a></h2><ul><li>函数式编程中有一个非常重要的概念 <strong>纯函数</strong>，JavaScript符合函数式编程的范式，所以也有纯函数的概念 <ul><li>在React开发中，纯函数被多次提及：</li><li>React组件被要求像一个纯函数（为什么是像，因为还有类组件）</li><li>Redux中有一个reducer的概念，同样是要求必须是一个纯函数</li></ul></li><li>掌握纯函数对于理解很多框架的设计都是有帮助的</li></ul><p>一个纯函数必然具备以下特征：</p><ul><li>确定的输入一定产生确定的输出</li><li>函数的执行过程中，不能产生副作用</li></ul><h2 id="为什么需要redux" tabindex="-1">为什么需要Redux <a class="header-anchor" href="#为什么需要redux" aria-label="Permalink to &quot;为什么需要Redux&quot;">​</a></h2><ul><li>JS需要管理的状态越来越多，越来越复杂</li><li>状态不断发生变化之间又相互依赖，这要求视图层也能同步更新</li><li>React提供了自动更新视图的方法，但状态仍需要手动管理</li><li>Redux可以帮我们管理状态，提供了<strong>可预测的状态管理</strong></li><li>框架无关，体积只有2KB大小</li></ul><h2 id="redux的核心理念" tabindex="-1">Redux的核心理念 <a class="header-anchor" href="#redux的核心理念" aria-label="Permalink to &quot;Redux的核心理念&quot;">​</a></h2><p>Redux的核心理念 Store</p><ul><li>定义一个统一的规范来操作数据，这样就可以做到对数据的跟踪</li><li><code>list.push()</code> <code>list[0].age = 18</code></li></ul><p>Redux的核心理念 Action</p><ul><li>Redux要求：要修改数据，必须通过Action来修改</li><li>所有数据的变化，必须通过派发（Patch）Action来更新</li><li>Action是一个普通的JS对象，用来描述此次更新的type与content</li><li><code>const action = { type: &#39;ADD_ITEM&#39;, item: { name: &#39;Ziu&#39;, age: 18 } }</code></li></ul><p>Redux的核心理念 Reducer</p><ul><li>如何将Store和Action联系在一起？</li><li>reducer是一个纯函数</li><li>完成的工作就是：将传入的state和action结合起来，生成一个新的state</li><li><code>patch</code> =&gt; <code>reducer</code> =&gt; <code>newState</code> =&gt; <code>Store</code></li></ul><h2 id="redux-demo" tabindex="-1">Redux Demo <a class="header-anchor" href="#redux-demo" aria-label="Permalink to &quot;Redux Demo&quot;">​</a></h2><p>下例中，通过<code>createStore</code>创建了一个Store（已经不推荐了）</p><ul><li>initialState用于在调用<code>createStore</code>时作为默认值传入<code>reducer</code></li><li>后续每次<code>store.dispatch</code>都会调用<code>reducer</code></li><li>通过<code>reducer</code>更新state中的数据</li></ul><p>在React中，可以通过<code>store.subscribe</code>注册State变化的监听回调</p><ul><li>当state发生变化时，通过调用<code>this.forceUpdate</code>触发组件的更新</li><li>一般情况下，我们在<code>componentDidMount</code>注册监听回调，在<code>componentWillUnmount</code>解除监听</li></ul><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-6oEDR" id="tab-aZ9W-Ba" checked="checked"><label for="tab-aZ9W-Ba">App.jsx</label><input type="radio" name="group-6oEDR" id="tab-XrBO3rt"><label for="tab-XrBO3rt">index.js</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// App.jsx</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> React</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">PureComponent</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> store </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./store</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
@@ -71,7 +71,7 @@ import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const p=
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> store </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createStore</span><span style="color:#A6ACCD;">(reducer)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> store</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br></div></div></div></div><p><img src="`+p+`" alt="redux-usage"></p><h2 id="进一步封装" tabindex="-1">进一步封装 <a class="header-anchor" href="#进一步封装" aria-label="Permalink to &quot;进一步封装&quot;">​</a></h2><p>可以将耦合在一起的代码拆分到不同文件中</p><ul><li>将<code>reducer</code>抽取出来<code>reducer.js</code>，简化<code>store/index.js</code>内容</li><li>将<code>action.type</code>抽取为常量<code>constants.js</code>，使用时做导入，以保证一致性</li><li>将<code>action</code>抽取出来<code>actionFactory.js</code>，用于外部dispatch时规范类型</li></ul><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-A5fGu" id="tab-7K6ukiE" checked="checked"><label for="tab-7K6ukiE">index.js</label><input type="radio" name="group-A5fGu" id="tab-lEvNpQz"><label for="tab-lEvNpQz">constants.js</label><input type="radio" name="group-A5fGu" id="tab-PIeQelz"><label for="tab-PIeQelz">reducer.js</label><input type="radio" name="group-A5fGu" id="tab-cHuI1ux"><label for="tab-cHuI1ux">actionFactory.js</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// store/index.js</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> store</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br></div></div></div></div><p><img src="`+p+`" alt="redux-usage"></p><h2 id="进一步封装" tabindex="-1">进一步封装 <a class="header-anchor" href="#进一步封装" aria-label="Permalink to &quot;进一步封装&quot;">​</a></h2><p>可以将耦合在一起的代码拆分到不同文件中</p><ul><li>将<code>reducer</code>抽取出来<code>reducer.js</code>，简化<code>store/index.js</code>内容</li><li>将<code>action.type</code>抽取为常量<code>constants.js</code>，使用时做导入，以保证一致性</li><li>将<code>action</code>抽取出来<code>actionFactory.js</code>，用于外部dispatch时规范类型</li></ul><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-hi1bO" id="tab-y08n7LQ" checked="checked"><label for="tab-y08n7LQ">index.js</label><input type="radio" name="group-hi1bO" id="tab-quN8hYG"><label for="tab-quN8hYG">constants.js</label><input type="radio" name="group-hi1bO" id="tab-R6YjPGz"><label for="tab-R6YjPGz">reducer.js</label><input type="radio" name="group-hi1bO" id="tab-Mwp4Bea"><label for="tab-Mwp4Bea">actionFactory.js</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// store/index.js</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">createStore</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">redux</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> reducer </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./reducer</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
@@ -146,7 +146,7 @@ import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const p=
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#F07178;"> )</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h2 id="redux的三大原则" tabindex="-1">Redux的三大原则 <a class="header-anchor" href="#redux的三大原则" aria-label="Permalink to &quot;Redux的三大原则&quot;">​</a></h2><p>单一数据源</p><ul><li>整个应用程序的状态都被存储在一棵Object Tree上</li><li>且这个Object Tree只存储在一个Store中</li><li>但Redux并不强制限制创建多Store，不利于数据维护</li><li>单一数据源有利于整个应用程序的维护、追踪、修改</li></ul><p>State属性是只读的</p><ul><li>允许修改State的方法只有patch action，不要直接修改State</li><li>确保了View或网络请求都不能修改State</li><li>保证所有的修改都能被追踪、按照严格的顺序执行，不用担心竞态（race condition）的问题</li></ul><p>使用纯函数来执行修改</p><ul><li>通过reducer将旧State与新State联系在一起，并且返回一个<strong>新的State</strong></li><li>随着应用程序复杂程度增加，可以将reducer拆分为多个小的reducer，分别用于操作不同State Tree的某一部分</li><li>所有的reducer都应该是纯函数，不能产生任何的副作用</li></ul><h2 id="优化重复代码" tabindex="-1">优化重复代码 <a class="header-anchor" href="#优化重复代码" aria-label="Permalink to &quot;优化重复代码&quot;">​</a></h2><p>当编写了一些案例的时候会发现，React结合Redux时会编写很多重复的代码</p><p>在每个需要用到Redux中状态的组件中，都需要在不同生命周期做添加订阅/解除订阅的处理，组件初始化时还要从store中取最新的状态</p><p>针对重复代码的问题，可以使用之前学到的高阶组件来做优化</p><p>Redux官方提供的库<code>react-redux</code>，可以让我们更方便的在React中使用Redux</p><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">react-redux</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>在Profile组件中，通过高阶函数<code>connect</code>实现的</p><p>将store中需要的状态通过<code>mapStoreToProps</code>转为props，并将需要使用store中状态的组件传入调用connect返回的函数中</p><p>在<code>Profile</code>组件中就可以从props中获取到store中的状态</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-p8Ki7" id="tab-xwi3rs4" checked="checked"><label for="tab-xwi3rs4">App.jsx</label><input type="radio" name="group-p8Ki7" id="tab-tw7RTli"><label for="tab-tw7RTli">Profile.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// App.jsx</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h2 id="redux的三大原则" tabindex="-1">Redux的三大原则 <a class="header-anchor" href="#redux的三大原则" aria-label="Permalink to &quot;Redux的三大原则&quot;">​</a></h2><p>单一数据源</p><ul><li>整个应用程序的状态都被存储在一棵Object Tree上</li><li>且这个Object Tree只存储在一个Store中</li><li>但Redux并不强制限制创建多Store，不利于数据维护</li><li>单一数据源有利于整个应用程序的维护、追踪、修改</li></ul><p>State属性是只读的</p><ul><li>允许修改State的方法只有patch action，不要直接修改State</li><li>确保了View或网络请求都不能修改State</li><li>保证所有的修改都能被追踪、按照严格的顺序执行，不用担心竞态（race condition）的问题</li></ul><p>使用纯函数来执行修改</p><ul><li>通过reducer将旧State与新State联系在一起，并且返回一个<strong>新的State</strong></li><li>随着应用程序复杂程度增加，可以将reducer拆分为多个小的reducer，分别用于操作不同State Tree的某一部分</li><li>所有的reducer都应该是纯函数，不能产生任何的副作用</li></ul><h2 id="优化重复代码" tabindex="-1">优化重复代码 <a class="header-anchor" href="#优化重复代码" aria-label="Permalink to &quot;优化重复代码&quot;">​</a></h2><p>当编写了一些案例的时候会发现，React结合Redux时会编写很多重复的代码</p><p>在每个需要用到Redux中状态的组件中，都需要在不同生命周期做添加订阅/解除订阅的处理，组件初始化时还要从store中取最新的状态</p><p>针对重复代码的问题，可以使用之前学到的高阶组件来做优化</p><p>Redux官方提供的库<code>react-redux</code>，可以让我们更方便的在React中使用Redux</p><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">react-redux</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>在Profile组件中，通过高阶函数<code>connect</code>实现的</p><p>将store中需要的状态通过<code>mapStoreToProps</code>转为props，并将需要使用store中状态的组件传入调用connect返回的函数中</p><p>在<code>Profile</code>组件中就可以从props中获取到store中的状态</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-QMwyZ" id="tab-T0BPvAb" checked="checked"><label for="tab-T0BPvAb">App.jsx</label><input type="radio" name="group-QMwyZ" id="tab-7NyIud6"><label for="tab-7NyIud6">Profile.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// App.jsx</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> React</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">PureComponent</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Provider</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react-redux</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> store </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./store</span><span style="color:#89DDFF;">&#39;</span></span>
@@ -216,7 +216,7 @@ import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const p=
<span class="line"><span style="color:#F07178;"> )</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br></div></div><p>本质上是<code>connect</code>内部对操作进行了封装，把逻辑隐藏起来了：</p><ul><li>调用<code>connect</code>这个<strong>高阶函数</strong>，返回一个<strong>高阶组件</strong></li><li>为高阶组件传入映射目标组件，最后高阶组件返回一个新组件</li><li>新组件的props包含了来自Store中状态/dispatch的映射</li></ul><h2 id="异步action" tabindex="-1">异步Action <a class="header-anchor" href="#异步action" aria-label="Permalink to &quot;异步Action&quot;">​</a></h2><p>有些场景下，我们希望组件能够直接调用Store中的action来触发网络请求，并且获取到数据</p><p>但是dispatch只允许派发对象类型的Action，不能通过dispatch派发函数</p><p>可以通过中间件<code>redux-thunk</code>来对Redux做增强，让dispatch能够对函数进行派发</p><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">redux-thunk</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>通过<code>applyMiddleware</code>引入<code>redux-thunk</code>这个中间件：</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-aH2wG" id="tab-Uq3u7ys" checked="checked"><label for="tab-Uq3u7ys">index.js</label><input type="radio" name="group-aH2wG" id="tab-Na_ZStx"><label for="tab-Na_ZStx">actionFactory.js</label><input type="radio" name="group-aH2wG" id="tab-DkRsNJI"><label for="tab-DkRsNJI">list.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight has-highlighted-lines"><code><span class="line"><span style="color:#676E95;font-style:italic;">// store/index.js</span></span>
<span class="line"><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br></div></div><p>本质上是<code>connect</code>内部对操作进行了封装，把逻辑隐藏起来了：</p><ul><li>调用<code>connect</code>这个<strong>高阶函数</strong>，返回一个<strong>高阶组件</strong></li><li>为高阶组件传入映射目标组件，最后高阶组件返回一个新组件</li><li>新组件的props包含了来自Store中状态/dispatch的映射</li></ul><h2 id="异步action" tabindex="-1">异步Action <a class="header-anchor" href="#异步action" aria-label="Permalink to &quot;异步Action&quot;">​</a></h2><p>有些场景下，我们希望组件能够直接调用Store中的action来触发网络请求，并且获取到数据</p><p>但是dispatch只允许派发对象类型的Action，不能通过dispatch派发函数</p><p>可以通过中间件<code>redux-thunk</code>来对Redux做增强，让dispatch能够对函数进行派发</p><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">redux-thunk</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>通过<code>applyMiddleware</code>引入<code>redux-thunk</code>这个中间件：</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-ddbJ2" id="tab-H5BksQB" checked="checked"><label for="tab-H5BksQB">index.js</label><input type="radio" name="group-ddbJ2" id="tab-NYTFpxp"><label for="tab-NYTFpxp">actionFactory.js</label><input type="radio" name="group-ddbJ2" id="tab-3PjV3-Z"><label for="tab-3PjV3-Z">list.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight has-highlighted-lines"><code><span class="line"><span style="color:#676E95;font-style:italic;">// store/index.js</span></span>
<span class="line highlighted"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">createStore</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">applyMiddleware</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">redux</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line highlighted"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> thunk </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">redux-thunk</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> reducer </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./reducer</span><span style="color:#89DDFF;">&#39;</span></span>
@@ -316,7 +316,7 @@ import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const p=
<span class="line"><span style="color:#F07178;"> counter</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">counterReducer</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">counter</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">action</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> postList</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">postListReducer</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">postList</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">action</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h2 id="reduxtoolkit" tabindex="-1">ReduxToolkit <a class="header-anchor" href="#reduxtoolkit" aria-label="Permalink to &quot;ReduxToolkit&quot;">​</a></h2><ul><li>ReduxToolkit重构</li><li>ReduxToolkit异步</li><li>connect高阶组件</li><li>中间件的实现原理</li><li>React状态管理选择</li></ul><h2 id="认识reduxtoolkit" tabindex="-1">认识ReduxToolkit <a class="header-anchor" href="#认识reduxtoolkit" aria-label="Permalink to &quot;认识ReduxToolkit&quot;">​</a></h2><p>之前在使用<code>createStore</code>创建Store时会出现deprecated标识，推荐我们使用<code>@reduxjs/toolkit</code>包中的<code>configureStore</code>函数</p><p>Redux Toolkit是官方推荐编写Redux逻辑的方法</p><ul><li>在前面学习Redux时已经发现，Redux的逻辑编写过于繁琐、麻烦</li><li>代码分拆在不同模块中，存在大量重复代码</li><li>Redux Toolkit旨在成为编写Redux逻辑的标准方式，从而解决上面提到的问题</li><li>这个包常被称为：RTK</li></ul><h2 id="使用reduxtoolkit重写store" tabindex="-1">使用ReduxToolkit重写Store <a class="header-anchor" href="#使用reduxtoolkit重写store" aria-label="Permalink to &quot;使用ReduxToolkit重写Store&quot;">​</a></h2><p>Redux Toolkit依赖于react-redux包，所以需要同时安装这二者</p><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@reduxjs/toolkit</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">react-redux</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Redux Toolkit的核心API主要是下述几个：</p><ul><li><code>configureStore</code> 包装createStore以提供简化的配置选项和良好的默认值 <ul><li>可以自动组合你的slice reducer 添加你提供的任何Redux中间件</li><li>默认包含redux-thunk，并启用Redux DevTools Extension</li></ul></li><li><code>createSlice</code> 创建切片 片段 <ul><li>接受reducer函数的对象、切片名称和初始状态值，并自动生成切片reducer，并带有actions</li></ul></li><li><code>createAsyncThunk</code><ul><li>接受一个动作类型字符串和一个返回Promise的函数</li><li>并生成一个<code>pending / fullfilled / rejected</code>基于该承诺分派动作类型的thunk</li></ul></li></ul><p>写一个Demo：</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-GQT8-" id="tab-6jomcjc" checked="checked"><label for="tab-6jomcjc">index.js</label><input type="radio" name="group-GQT8-" id="tab-pYJi-HJ"><label for="tab-pYJi-HJ">counter.js</label><input type="radio" name="group-GQT8-" id="tab-djXvw2Z"><label for="tab-djXvw2Z">Counter.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// store/index.js</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h2 id="reduxtoolkit" tabindex="-1">ReduxToolkit <a class="header-anchor" href="#reduxtoolkit" aria-label="Permalink to &quot;ReduxToolkit&quot;">​</a></h2><ul><li>ReduxToolkit重构</li><li>ReduxToolkit异步</li><li>connect高阶组件</li><li>中间件的实现原理</li><li>React状态管理选择</li></ul><h2 id="认识reduxtoolkit" tabindex="-1">认识ReduxToolkit <a class="header-anchor" href="#认识reduxtoolkit" aria-label="Permalink to &quot;认识ReduxToolkit&quot;">​</a></h2><p>之前在使用<code>createStore</code>创建Store时会出现deprecated标识，推荐我们使用<code>@reduxjs/toolkit</code>包中的<code>configureStore</code>函数</p><p>Redux Toolkit是官方推荐编写Redux逻辑的方法</p><ul><li>在前面学习Redux时已经发现，Redux的逻辑编写过于繁琐、麻烦</li><li>代码分拆在不同模块中，存在大量重复代码</li><li>Redux Toolkit旨在成为编写Redux逻辑的标准方式，从而解决上面提到的问题</li><li>这个包常被称为：RTK</li></ul><h2 id="使用reduxtoolkit重写store" tabindex="-1">使用ReduxToolkit重写Store <a class="header-anchor" href="#使用reduxtoolkit重写store" aria-label="Permalink to &quot;使用ReduxToolkit重写Store&quot;">​</a></h2><p>Redux Toolkit依赖于react-redux包，所以需要同时安装这二者</p><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@reduxjs/toolkit</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">react-redux</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Redux Toolkit的核心API主要是下述几个：</p><ul><li><code>configureStore</code> 包装createStore以提供简化的配置选项和良好的默认值 <ul><li>可以自动组合你的slice reducer 添加你提供的任何Redux中间件</li><li>默认包含redux-thunk，并启用Redux DevTools Extension</li></ul></li><li><code>createSlice</code> 创建切片 片段 <ul><li>接受reducer函数的对象、切片名称和初始状态值，并自动生成切片reducer，并带有actions</li></ul></li><li><code>createAsyncThunk</code><ul><li>接受一个动作类型字符串和一个返回Promise的函数</li><li>并生成一个<code>pending / fullfilled / rejected</code>基于该承诺分派动作类型的thunk</li></ul></li></ul><p>写一个Demo：</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-Pll7e" id="tab-HSXPOFj" checked="checked"><label for="tab-HSXPOFj">index.js</label><input type="radio" name="group-Pll7e" id="tab-AU51c5C"><label for="tab-AU51c5C">counter.js</label><input type="radio" name="group-Pll7e" id="tab-IRE9ipB"><label for="tab-IRE9ipB">Counter.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// store/index.js</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">configureStore</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@reduxjs/toolkit</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> counterSlice </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./features/counter</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
@@ -388,7 +388,7 @@ import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const p=
<span class="line"><span style="color:#F07178;"> )</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br></div></div></div></div><p><code>createSlice</code> 函数参数解读</p><ul><li><code>name</code> 标记Slice 展示在dev-tool中</li><li><code>initialState</code> 初始化状态</li><li><code>reducers</code> 对象 对应之前的reducer函数</li><li>返回值: 一个对象 包含所有actions</li></ul><p><code>configureStore</code> 解读</p><ul><li><code>reducer</code> 将slice中的reducer组成一个对象，传入此参数</li><li><code>middleware</code> 额外的中间件 <ul><li>RTK已经为我们集成了<code>redux-thunk</code>和<code>redux-devtool</code>两个中间件</li></ul></li><li><code>devTools</code> 布尔值 是否启用开发者工具</li></ul><h2 id="使用rtk执行异步dispatch" tabindex="-1">使用RTK执行异步dispatch <a class="header-anchor" href="#使用rtk执行异步dispatch" aria-label="Permalink to &quot;使用RTK执行异步dispatch&quot;">​</a></h2><p>实际场景中都是在组件中发起网络请求，并且将状态更新到Store中</p><p>之前的开发中，我们通过<code>redux-thunk</code>这个中间件，让dispatch中可以进行异步操作</p><p>ReduxToolkit默认已经给我们集成了Thunk相关的功能：<code>createAsyncThunk</code></p><p>下面我们使用RTK实现一下这个场景：在Profile中请求postList数据并保存在Store中，并展示出来</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-PpylD" id="tab-m5bZYuN" checked="checked"><label for="tab-m5bZYuN">postList.js</label><input type="radio" name="group-PpylD" id="tab-2VUudjC"><label for="tab-2VUudjC">index.js</label><input type="radio" name="group-PpylD" id="tab-opE8JM6"><label for="tab-opE8JM6">Profile.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight has-highlighted-lines"><code><span class="line"><span style="color:#676E95;font-style:italic;">// store/features/postList.js</span></span>
<span class="line"><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br></div></div></div></div><p><code>createSlice</code> 函数参数解读</p><ul><li><code>name</code> 标记Slice 展示在dev-tool中</li><li><code>initialState</code> 初始化状态</li><li><code>reducers</code> 对象 对应之前的reducer函数</li><li>返回值: 一个对象 包含所有actions</li></ul><p><code>configureStore</code> 解读</p><ul><li><code>reducer</code> 将slice中的reducer组成一个对象，传入此参数</li><li><code>middleware</code> 额外的中间件 <ul><li>RTK已经为我们集成了<code>redux-thunk</code>和<code>redux-devtool</code>两个中间件</li></ul></li><li><code>devTools</code> 布尔值 是否启用开发者工具</li></ul><h2 id="使用rtk执行异步dispatch" tabindex="-1">使用RTK执行异步dispatch <a class="header-anchor" href="#使用rtk执行异步dispatch" aria-label="Permalink to &quot;使用RTK执行异步dispatch&quot;">​</a></h2><p>实际场景中都是在组件中发起网络请求，并且将状态更新到Store中</p><p>之前的开发中，我们通过<code>redux-thunk</code>这个中间件，让dispatch中可以进行异步操作</p><p>ReduxToolkit默认已经给我们集成了Thunk相关的功能：<code>createAsyncThunk</code></p><p>下面我们使用RTK实现一下这个场景：在Profile中请求postList数据并保存在Store中，并展示出来</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-ZkY-9" id="tab-NbVzvC-" checked="checked"><label for="tab-NbVzvC-">postList.js</label><input type="radio" name="group-ZkY-9" id="tab-xHzylxl"><label for="tab-xHzylxl">index.js</label><input type="radio" name="group-ZkY-9" id="tab-lXF59fr"><label for="tab-lXF59fr">Profile.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight has-highlighted-lines"><code><span class="line"><span style="color:#676E95;font-style:italic;">// store/features/postList.js</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">createSlice</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">createAsyncThunk</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@reduxjs/toolkit</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line highlighted"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> fetchPostList </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createAsyncThunk</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">fetch/postList</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">async</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
@@ -556,7 +556,7 @@ import{_ as s,o as n,c as a,S as l}from"./chunks/framework.04e6e156.js";const p=
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">WrapperComponent</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{...</span><span style="color:#FFCB6B;">this</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">props</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{...</span><span style="color:#FFCB6B;">state</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{...</span><span style="color:#FFCB6B;">dispatch</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> /</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#F07178;"> }</span></span>
<span class="line"><span style="color:#F07178;"> }</span></span>
<span class="line"><span style="color:#F07178;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><p>经过优化后，每次store.state发生变化会触发setState，由React内部的机制来决定组件是否应当重新渲染</p><p>如果组件依赖的state发生变化了，那么React会替我们执行re-render，而不是每次都强制执行re-render</p><p>进一步地，我们可以补充更多细节：</p><ul><li>当组件卸载时解除监听 <ul><li><code>store.subscribe</code>会返回一个<code>unsubscribe</code>函数 用于解除监听</li></ul></li><li>解除与业务代码store的耦合 <ul><li>目前的store来自业务代码 更优的做法是从context中动态获取到store</li><li>应当提供一个context Provider供用户使用</li><li>就像<code>react-redux</code>一样，使用connect前需要将App用Provider包裹并传入store</li></ul></li></ul><p>至此就基本完成了一个connect函数</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-ymwl5" id="tab-GxOh-_0" checked="checked"><label for="tab-GxOh-_0">connect.js</label><input type="radio" name="group-ymwl5" id="tab-o1TtPbz"><label for="tab-o1TtPbz">storeContext.js</label><input type="radio" name="group-ymwl5" id="tab-pzi5XLD"><label for="tab-pzi5XLD">App.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// connect.js</span></span>
<span class="line"><span style="color:#F07178;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><p>经过优化后，每次store.state发生变化会触发setState，由React内部的机制来决定组件是否应当重新渲染</p><p>如果组件依赖的state发生变化了，那么React会替我们执行re-render，而不是每次都强制执行re-render</p><p>进一步地，我们可以补充更多细节：</p><ul><li>当组件卸载时解除监听 <ul><li><code>store.subscribe</code>会返回一个<code>unsubscribe</code>函数 用于解除监听</li></ul></li><li>解除与业务代码store的耦合 <ul><li>目前的store来自业务代码 更优的做法是从context中动态获取到store</li><li>应当提供一个context Provider供用户使用</li><li>就像<code>react-redux</code>一样，使用connect前需要将App用Provider包裹并传入store</li></ul></li></ul><p>至此就基本完成了一个connect函数</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-soxuU" id="tab-NCtF1U-" checked="checked"><label for="tab-NCtF1U-">connect.js</label><input type="radio" name="group-soxuU" id="tab-U1dHnZs"><label for="tab-U1dHnZs">storeContext.js</label><input type="radio" name="group-soxuU" id="tab--LXeVHM"><label for="tab--LXeVHM">App.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// connect.js</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">PureComponent</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">StoreContext</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./storeContext</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>

0
assets/note_Redux.md.d0a546a1.lean.js → assets/note_Redux.md.1457f290.lean.js
View File

2
hashmap.json
View File

@@ -1 +1 @@
{"article_深入vue3源码，看看vue.use后究竟发生了什么？.md":"acdc089e","index.md":"86ae0e97","article_深入javascript数据类型.md":"0ec1315b","article_【用友金融】前端面试题总结.md":"41ec0540","article_深入理解proxy与reflect.md":"c7296246","article_【快手】深入理解前端面试题.md":"b4dd25f0","note_mysql.md":"0cd9cc6a","article_深入理解浏览器缓存机制.md":"06b54fd1","article_深入理解浏览器运行原理.md":"278714ea","note_ssr.md":"2d68a1c1","article_一文读懂事件冒泡与事件捕获.md":"d660d1d2","article_一文读懂函数中this指向问题.md":"82ad79e7","article_从0实现一个年度报告.md":"b90d1096","article_彻底搞懂对象的数据属性描述符、存储属性描述符.md":"4008b4f8","article_浅析defineproperty与proxy实现的双向绑定.md":"c7dc82d9","note_react router.md":"80d05747","project_clipboardmanager_guide_index.md":"2ea74122","project_clipboardmanager_index.md":"f93a8236","project_clipboardmanager_log_index.md":"8c04f8e2","project_clipboardmanager_statement_index.md":"25f6e4fe","project_clipboardmanager_vip_index.md":"c8519ac4","project_jsrunner_index.md":"ec6b75fb","project_jsrunner_log_index.md":"40a35379","project_markdown_index.md":"9be7e873","project_markdown_log_index.md":"48e0c8ec","project_markdown_shortcut_index.md":"428f3081","project_smartwordbreak_index.md":"3c19c09c","project_smartwordbreak_log_index.md":"07f32dc0","project_smartwordbreak_statement_index.md":"a2ae9300","self_index.md":"2d91844b","works_contribution.md":"e7e35640","works_opensource.md":"7c47dc92","article_【2023】青训营 - 前端练习题汇总解析.md":"189eb39d","note_react hooks.md":"2e138c33","note_css.md":"6bd77aac","article_一文读懂伪类与伪元素.md":"38ae0f3a","note_javascriptenhanced.md":"8589bda3","note_redux.md":"d0a546a1","note_javascript.md":"78a9a50c","note_front-end engineering.md":"2f3633d1","article_【字节跳动】前端面试题总结.md":"575e8a98","note_react.md":"ab251982"}
{"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md":"4008b4f8","article_【2023】青训营 - 前端练习题汇总解析.md":"189eb39d","article_一文读懂函数中this指向问题.md":"82ad79e7","article_从0实现一个年度报告.md":"b90d1096","article_【字节跳动】前端面试题总结.md":"575e8a98","project_jsrunner_log_index.md":"40a35379","project_markdown_index.md":"9be7e873","project_markdown_log_index.md":"48e0c8ec","project_markdown_shortcut_index.md":"428f3081","project_smartwordbreak_index.md":"3c19c09c","project_smartwordbreak_log_index.md":"07f32dc0","project_smartwordbreak_statement_index.md":"a2ae9300","self_index.md":"2d91844b","works_contribution.md":"e7e35640","works_opensource.md":"7c47dc92","article_【快手】深入理解前端面试题.md":"b4dd25f0","article_【用友金融】前端面试题总结.md":"41ec0540","note_javascript.md":"78a9a50c","project_jsrunner_index.md":"ec6b75fb","article_浅析defineproperty与proxy实现的双向绑定.md":"c7dc82d9","article_深入javascript数据类型.md":"0ec1315b","article_深入vue3源码，看看vue.use后究竟发生了什么？.md":"acdc089e","article_深入理解浏览器运行原理.md":"278714ea","index.md":"86ae0e97","article_深入理解浏览器缓存机制.md":"06b54fd1","note_mysql.md":"0cd9cc6a","note_react hooks.md":"d857d076","note_redux.md":"1457f290","note_ssr.md":"2d68a1c1","article_深入理解proxy与reflect.md":"c7296246","project_clipboardmanager_guide_index.md":"2ea74122","project_clipboardmanager_index.md":"f93a8236","project_clipboardmanager_log_index.md":"8c04f8e2","project_clipboardmanager_statement_index.md":"25f6e4fe","project_clipboardmanager_vip_index.md":"c8519ac4","note_react router.md":"b8a56849","article_一文读懂事件冒泡与事件捕获.md":"d660d1d2","note_front-end engineering.md":"3b482009","note_css.md":"6bd77aac","article_一文读懂伪类与伪元素.md":"38ae0f3a","note_react.md":"de4b451f","note_javascriptenhanced.md":"8589bda3"}

2
index.html
View File

File diff suppressed because one or more lines are too long

2
note/CSS.html
View File

File diff suppressed because one or more lines are too long

20
note/Front-end Engineering.html
View File

File diff suppressed because one or more lines are too long

2
note/JavaScript.html
View File

File diff suppressed because one or more lines are too long

2
note/JavaScriptEnhanced.html
View File

File diff suppressed because one or more lines are too long

2
note/MySQL.html
View File

File diff suppressed because one or more lines are too long

20
note/React Hooks.html
View File

File diff suppressed because one or more lines are too long

12
note/React Router.html
View File

File diff suppressed because one or more lines are too long

6
note/React.html
View File

File diff suppressed because one or more lines are too long

18
note/Redux.html
View File

File diff suppressed because one or more lines are too long

2
note/SSR.html
View File

File diff suppressed because one or more lines are too long

2
project/ClipboardManager/guide/index.html
View File

File diff suppressed because one or more lines are too long

2
project/ClipboardManager/index.html
View File

File diff suppressed because one or more lines are too long

2
project/ClipboardManager/log/index.html
View File

File diff suppressed because one or more lines are too long

2
project/ClipboardManager/statement/index.html
View File

File diff suppressed because one or more lines are too long

2
project/ClipboardManager/vip/index.html
View File

File diff suppressed because one or more lines are too long

2
project/JSRunner/index.html
View File

File diff suppressed because one or more lines are too long

2
project/JSRunner/log/index.html
View File

File diff suppressed because one or more lines are too long

2
project/Markdown/index.html
View File

File diff suppressed because one or more lines are too long

2
project/Markdown/log/index.html
View File

File diff suppressed because one or more lines are too long

2
project/Markdown/shortcut/index.html
View File

File diff suppressed because one or more lines are too long

2
project/SmartWordBreak/index.html
View File

File diff suppressed because one or more lines are too long

2
project/SmartWordBreak/log/index.html
View File

File diff suppressed because one or more lines are too long

2
project/SmartWordBreak/statement/index.html
View File

File diff suppressed because one or more lines are too long

2
self/index.html
View File

File diff suppressed because one or more lines are too long

2
works/contribution.html
View File

File diff suppressed because one or more lines are too long

2
works/opensource.html
View File

File diff suppressed because one or more lines are too long