@shixinde/vuepress-theme-init
Version:
165 lines (164 loc) • 50.3 kB
JavaScript
import{_ as s,c as n,o as a,a as e}from"./app-Dx9bNbfq.js";const p={},i=e(`<h2 id="数据驱动视图-相当于-ref-reactive" tabindex="-1"><a class="header-anchor" href="#数据驱动视图-相当于-ref-reactive"><span>数据驱动视图 相当于 ==> ref reactive</span></a></h2><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250806202821571.png" alt="image-20250806202821571"></p><h2 id="获取dom-元素-ref" tabindex="-1"><a class="header-anchor" href="#获取dom-元素-ref"><span>获取DOM 元素 Ref</span></a></h2><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250806211406840.png" alt="image-20250806211406840"></p><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250806211642728.png" alt="image-20250806211642728"></p><h2 id="发布评论功能" tabindex="-1"><a class="header-anchor" href="#发布评论功能"><span>发布评论功能</span></a></h2><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250806212013056.png" alt="image-20250806212013056"></p><h2 id="发请求" tabindex="-1"><a class="header-anchor" href="#发请求"><span>发请求</span></a></h2><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250806214952225.png" alt="image-20250806214952225"></p><h2 id="监听-useeffect-函数-三个状态" tabindex="-1"><a class="header-anchor" href="#监听-useeffect-函数-三个状态"><span>监听 useEffect 函数 三个状态</span></a></h2><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250806215239921.png" alt="image-20250806215239921"></p><h2 id="hooks-注意事项" tabindex="-1"><a class="header-anchor" href="#hooks-注意事项"><span>hooks 注意事项</span></a></h2><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250806221255863.png" alt="image-20250806221255863"></p><h2 id="路由穿参" tabindex="-1"><a class="header-anchor" href="#路由穿参"><span>路由穿参</span></a></h2><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250806223611028.png" alt="image-20250806223611028"></p><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250806223633045.png" alt="image-20250806223633045"></p><h2 id="路由嵌套-二级路由" tabindex="-1"><a class="header-anchor" href="#路由嵌套-二级路由"><span>路由嵌套 二级路由</span></a></h2><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250806223854847.png" alt="image-20250806223854847"></p><h2 id="穿梭组件-穿梭到body" tabindex="-1"><a class="header-anchor" href="#穿梭组件-穿梭到body"><span>穿梭组件 穿梭到body</span></a></h2><div class="language-react line-numbers-mode" data-highlighter="prismjs" data-ext="react" data-title="react"><pre class="language-react"><code><span class="line"> {createPortal(<GlobalAudioElement ref={audioRef} />, document.body)}</span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="类中的构造期-是否需要添加super" tabindex="-1"><a class="header-anchor" href="#类中的构造期-是否需要添加super"><span>类中的构造期 是否需要添加super</span></a></h2><p></p><h2 id="类式组件" tabindex="-1"><a class="header-anchor" href="#类式组件"><span>类式组件</span></a></h2><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250809160446729.png" alt="image-20250809160446729"></p><h2 id="函数式组件-props-基础使用" tabindex="-1"><a class="header-anchor" href="#函数式组件-props-基础使用"><span>函数式组件 props 基础使用</span></a></h2><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250809190851584.png" alt="image-20250809190851584"></p><h2 id="生命周期" tabindex="-1"><a class="header-anchor" href="#生命周期"><span>生命周期</span></a></h2><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250810094535016.png" alt="image-20250810094535016"></p><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250810095302613.png" alt="image-20250810095302613"></p><h2 id="新的生命周期钩子" tabindex="-1"><a class="header-anchor" href="#新的生命周期钩子"><span>新的生命周期钩子</span></a></h2><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250810100940405.png" alt="image-20250810100940405"></p><h2 id="路由的严格匹配" tabindex="-1"><a class="header-anchor" href="#路由的严格匹配"><span>路由的严格匹配</span></a></h2><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250810161021987.png" alt="image-20250810161021987"></p><h2 id="强制刷新组件-forceupdate" tabindex="-1"><a class="header-anchor" href="#强制刷新组件-forceupdate"><span>强制刷新组件 forceUpdate</span></a></h2><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250810182537508.png" alt="image-20250810182537508"></p><h2 id="保存一个旧值" tabindex="-1"><a class="header-anchor" href="#保存一个旧值"><span>保存一个旧值</span></a></h2><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250810211105716.png" alt="image-20250810211105716"></p><h2 id="forwardref-和-useimperativehandle-相当于-vue中的defineexport" tabindex="-1"><a class="header-anchor" href="#forwardref-和-useimperativehandle-相当于-vue中的defineexport"><span>forwardRef 和 useImperativeHandle 相当于 vue中的defineExport</span></a></h2><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250810213809732.png" alt="image-20250810213809732"></p><h2 id="终止fetch请求-使用useeffect-清理函数-abortcontroller" tabindex="-1"><a class="header-anchor" href="#终止fetch请求-使用useeffect-清理函数-abortcontroller"><span>终止fetch请求 使用useEffect 清理函数 AbortController</span></a></h2><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250810220000019.png" alt="image-20250810220000019"></p><h2 id="ts-typeof-自动获取类型-不用使用any了" tabindex="-1"><a class="header-anchor" href="#ts-typeof-自动获取类型-不用使用any了"><span>TS typeof 自动获取类型 不用使用any了</span></a></h2><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250810222544462.png" alt="image-20250810222544462"></p><h2 id="usestate-useeffect-usereducer" tabindex="-1"><a class="header-anchor" href="#usestate-useeffect-usereducer"><span>useState useEffect useReducer</span></a></h2><p>usestate 相当于vue的 ref</p><p>useReducer 相当于vue的 reactive</p><p>useEffect 相当于vue的 watch + cumputed + const</p><h2 id="react-memo-缓存变化-只有props-发生变化才会重新渲染" tabindex="-1"><a class="header-anchor" href="#react-memo-缓存变化-只有props-发生变化才会重新渲染"><span>React.memo 缓存变化，只有props 发生变化才会重新渲染</span></a></h2><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250810223528759.png" alt="image-20250810223528759"></p><h2 id="usememo函数的返回值是一个计算好的值-而不是函数" tabindex="-1"><a class="header-anchor" href="#usememo函数的返回值是一个计算好的值-而不是函数"><span>useMemo函数的返回值是一个计算好的值，而不是函数</span></a></h2><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250810224323429.png" alt="image-20250810224323429"></p><h2 id="zustand-相当于-pinia" tabindex="-1"><a class="header-anchor" href="#zustand-相当于-pinia"><span>zustand 相当于 pinia</span></a></h2><blockquote><p>store / price.jsx</p></blockquote><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> create <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'zustand'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">const</span> usePriceStore <span class="token operator">=</span> <span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token keyword">set</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">price</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function-variable function">setPrice</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">price</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">set</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> price <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function-variable function">addPrice</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">price</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">set</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">price</span><span class="token operator">:</span> state<span class="token punctuation">.</span>price <span class="token operator">+</span> price <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line"> </span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> usePriceStore<span class="token punctuation">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>A 组件</p></blockquote><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> usePriceStore <span class="token keyword">from</span> <span class="token string">'../../store/price'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">A</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">const</span> <span class="token punctuation">{</span> price<span class="token punctuation">,</span> addPrice <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">usePriceStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'price ===>'</span><span class="token punctuation">,</span> price<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">(</span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">A</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>price<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">addPrice</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">add</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
<span class="line"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token constant">A</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="zustand-中间件网址https-zustand-nodejs-cn-docs-middlewares-persist" tabindex="-1"><a class="header-anchor" href="#zustand-中间件网址https-zustand-nodejs-cn-docs-middlewares-persist"><span>Zustand 中间件网址https://zustand.nodejs.cn/docs/middlewares/persist</span></a></h2><h2 id="zustand-immer-案例-代码片段" tabindex="-1"><a class="header-anchor" href="#zustand-immer-案例-代码片段"><span>Zustand + immer 案例 代码片段</span></a></h2><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-ext="jsx" data-title="jsx"><pre class="language-jsx"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> create <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'zustand'</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> immer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'zustand/middleware/immer'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">const</span> usePriceStore <span class="token operator">=</span> <span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span></span>
<span class="line"> <span class="token function">immer</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token keyword">set</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">price</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">aaa</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">bbb</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">ccc</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">ddd</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">eee</span><span class="token operator">:</span> <span class="token number">3</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function-variable function">setPrice</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">price</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">set</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> price <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function-variable function">addPrice</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">price</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">set</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">price</span><span class="token operator">:</span> state<span class="token punctuation">.</span>price <span class="token operator">+</span> price <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function-variable function">setBbb</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">set</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> state<span class="token punctuation">.</span>aaa<span class="token punctuation">.</span>bbb<span class="token punctuation">.</span>ccc <span class="token operator">=</span> state<span class="token punctuation">.</span>aaa<span class="token punctuation">.</span>bbb<span class="token punctuation">.</span>ccc <span class="token operator">+</span> <span class="token number">1</span> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> usePriceStore<span class="token punctuation">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="zustand-useshallow-避免重复渲染问题" tabindex="-1"><a class="header-anchor" href="#zustand-useshallow-避免重复渲染问题"><span>zustand useShallow，避免重复渲染问题</span></a></h2><p>zustand redux devtools 调试中间件</p><div class="language-diff line-numbers-mode" data-highlighter="prismjs" data-ext="diff" data-title="diff"><pre class="language-diff"><code><span class="line">import { create } from 'zustand'</span>
<span class="line">import { immer } from 'zustand/middleware/immer'</span>
<span class="line"><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> import { devtools } from 'zustand/middleware'</span>
<span class="line"></span></span></span>
<span class="line">const usePriceStore = create()(</span>
<span class="line"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> immer(</span>
<span class="line"></span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> devtools(</span>
<span class="line"></span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> (set) => ({</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> price: 0,</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> aaa: {</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> bbb: {</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> ccc: 0,</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> ddd: 2,</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> eee: 3</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> },</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> },</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> setPrice: (price) => set(() => ({ price })),</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> addPrice: (price) => set((state) => ({ price: state.price + price })),</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> setBbb: () => set((state) => { state.aaa.bbb.ccc = state.aaa.bbb.ccc + 1 }</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> ),</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> }),</span>
<span class="line"></span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> { name: 'priceStore' }</span>
<span class="line"></span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> )</span>
<span class="line"></span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> )</span>
<span class="line"></span></span>)</span>
<span class="line"></span>
<span class="line">export default usePriceStore;</span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="zustand-持久化存储" tabindex="-1"><a class="header-anchor" href="#zustand-持久化存储"><span>Zustand 持久化存储</span></a></h2><div class="language-diff line-numbers-mode" data-highlighter="prismjs" data-ext="diff" data-title="diff"><pre class="language-diff"><code><span class="line">import { create } from 'zustand'</span>
<span class="line">import { immer } from 'zustand/middleware/immer'</span>
<span class="line"><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> import { devtools, persist, createJSONStorage } from 'zustand/middleware'</span>
<span class="line"></span></span></span>
<span class="line">const usePriceStore = create()(</span>
<span class="line"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> immer(</span>
<span class="line"></span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> persist(</span>
<span class="line"></span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> devtools(</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> (set) => ({</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> price: 0,</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> aaa: {</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> bbb: {</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> ccc: 0,</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> ddd: 2,</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> eee: 3</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> },</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> },</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> setPrice: (price) => set(() => ({ price })),</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> addPrice: (price) => set((state) => ({ price: state.price + price })),</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> setBbb: () => set((state) => { state.aaa.bbb.ccc = state.aaa.bbb.ccc + 1 }</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> ),</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> }),</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> {</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> name: 'priceStore',</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> }</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> ),</span>
<span class="line"></span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> {</span>
<span class="line"></span><span class="token prefix inserted">+</span><span class="token line"> name: 'priceStore',</span>
<span class="line"></span><span class="token prefix inserted">+</span><span class="token line"> storage: createJSONStorage(() => sessionStorage),</span>
<span class="line"></span><span class="token prefix inserted">+</span><span class="token line"> // partialize 用的不多 可以自定义存储</span>
<span class="line"></span><span class="token prefix inserted">+</span><span class="token line"> }</span>
<span class="line"></span><span class="token prefix inserted">+</span><span class="token line"> )</span>
<span class="line"></span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> )</span>
<span class="line"></span></span>)</span>
<span class="line"></span>
<span class="line">export default usePriceStore;</span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="性能优化-独立监听某一个-避免hooks-持续调用" tabindex="-1"><a class="header-anchor" href="#性能优化-独立监听某一个-避免hooks-持续调用"><span>性能优化 独立监听某一个 避免hooks 持续调用</span></a></h2><div class="language-diff line-numbers-mode" data-highlighter="prismjs" data-ext="diff" data-title="diff"><pre class="language-diff"><code><span class="line"><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import React, { useEffect, useRef } from 'react';</span>
<span class="line"></span></span>import A from '../A/index';</span>
<span class="line">import B from '../B/index';</span>
<span class="line"><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import usePriceStore from '../../store/price';</span>
<span class="line"></span></span>function HelloWorld(props) {</span>
<span class="line"></span>
<span class="line"><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> useEffect(() => {</span>
<span class="line"></span><span class="token prefix inserted">+</span><span class="token line"> usePriceStore.subscribe((state) => state.price, (price, prevPrice) => {</span>
<span class="line"></span><span class="token prefix inserted">+</span><span class="token line"> console.log('price change ===>', price, prevPrice);</span>
<span class="line"></span><span class="token prefix inserted">+</span><span class="token line"> })</span>
<span class="line"></span><span class="token prefix inserted">+</span><span class="token line"> return () => {</span>
<span class="line"></span><span class="token prefix inserted">+</span><span class="token line"> usePriceStore.unsubscribe()</span>
<span class="line"></span><span class="token prefix inserted">+</span><span class="token line"> }, {</span>
<span class="line"></span><span class="token prefix inserted">+</span><span class="token line"> fireImmediately: true,</span>
<span class="line"></span><span class="token prefix inserted">+</span><span class="token line"> equalityFn: (a, b) => a === b,</span>
<span class="line"></span><span class="token prefix inserted">+</span><span class="token line"> }</span>
<span class="line"></span><span class="token prefix inserted">+</span><span class="token line"> }, []);</span>
<span class="line"></span></span></span>
<span class="line"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> return (</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> <div></span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> <A /></span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> <hr /></span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> <B /></span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> </div></span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> );</span>
<span class="line"></span></span>}</span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line">export default HelloWorld;</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="tailwind-封装到独立的文件中" tabindex="-1"><a class="header-anchor" href="#tailwind-封装到独立的文件中"><span>tailwind 封装到独立的文件中</span></a></h2><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250811224821132.png" alt="image-20250811224821132"></p><h2 id="将-usesearchparams-转换为对象-并附上类型" tabindex="-1"><a class="header-anchor" href="#将-usesearchparams-转换为对象-并附上类型"><span>将 useSearchParams 转换为对象, 并附上类型</span></a></h2><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token string">'use client'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> useSearchParams <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'next/navigation'</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> useMemo <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span></span>
<span class="line"></span>
<span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 将 useSearchParams 转换为对象, 并附上类型</span>
<span class="line"> * <span class="token keyword">@example</span></span>
<span class="line"> * const searchParams = useSearchParamsObject<<span class="token punctuation">{</span> mode: string <span class="token punctuation">}</span>>()</span>
<span class="line"> * const mode = searchParams.mode</span>
<span class="line"> * mode 的类型为 string | undefined</span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token generic-function"><span class="token function">useSearchParamsObject</span><span class="token generic class-name"><span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">const</span> searchParams <span class="token operator">=</span> <span class="token function">useSearchParams</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token keyword">const</span> searchParamsObject <span class="token operator">=</span> <span class="token function">useMemo</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> Object<span class="token punctuation">.</span><span class="token function">fromEntries</span><span class="token punctuation">(</span>searchParams<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">as</span> Partial<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>searchParams<span class="token punctuation">]</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token keyword">return</span> searchParamsObject</span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="mobx-react-函数式组件" tabindex="-1"><a class="header-anchor" href="#mobx-react-函数式组件"><span>Mobx-react 函数式组件</span></a></h2><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250813075452454.png" alt="image-20250813075452454"></p><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250813075351599.png" alt="image-20250813075351599"></p><h2 id="mobx-类组件" tabindex="-1"><a class="header-anchor" href="#mobx-类组件"><span>MobX 类组件</span></a></h2><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250813075528968.png" alt="image-20250813075528968"></p><p><img src="https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250813075604296.png" alt="image-20250813075604296"></p>`,76),t=[i];function l(c,o){return a(),n("div",null,t)}const d=s(p,[["render",l],["__file","React.html.vue"]]),u=JSON.parse('{"path":"/React.html","title":"","lang":"zh-CN","frontmatter":{},"headers":[{"level":2,"title":"数据驱动视图 相当于 ==> ref reactive","slug":"数据驱动视图-相当于-ref-reactive","link":"#数据驱动视图-相当于-ref-reactive","children":[]},{"level":2,"title":"获取DOM 元素 Ref","slug":"获取dom-元素-ref","link":"#获取dom-元素-ref","children":[]},{"level":2,"title":"发布评论功能","slug":"发布评论功能","link":"#发布评论功能","children":[]},{"level":2,"title":"发请求","slug":"发请求","link":"#发请求","children":[]},{"level":2,"title":"监听 useEffect 函数 三个状态","slug":"监听-useeffect-函数-三个状态","link":"#监听-useeffect-函数-三个状态","children":[]},{"level":2,"title":"hooks 注意事项","slug":"hooks-注意事项","link":"#hooks-注意事项","children":[]},{"level":2,"title":"路由穿参","slug":"路由穿参","link":"#路由穿参","children":[]},{"level":2,"title":"路由嵌套 二级路由","slug":"路由嵌套-二级路由","link":"#路由嵌套-二级路由","children":[]},{"level":2,"title":"穿梭组件 穿梭到body","slug":"穿梭组件-穿梭到body","link":"#穿梭组件-穿梭到body","children":[]},{"level":2,"title":"类中的构造期 是否需要添加super","slug":"类中的构造期-是否需要添加super","link":"#类中的构造期-是否需要添加super","children":[]},{"level":2,"title":"类式组件","slug":"类式组件","link":"#类式组件","children":[]},{"level":2,"title":"函数式组件 props 基础使用","slug":"函数式组件-props-基础使用","link":"#函数式组件-props-基础使用","children":[]},{"level":2,"title":"生命周期","slug":"生命周期","link":"#生命周期","children":[]},{"level":2,"title":"新的生命周期钩子","slug":"新的生命周期钩子","link":"#新的生命周期钩子","children":[]},{"level":2,"title":"路由的严格匹配","slug":"路由的严格匹配","link":"#路由的严格匹配","children":[]},{"level":2,"title":"强制刷新组件 forceUpdate","slug":"强制刷新组件-forceupdate","link":"#强制刷新组件-forceupdate","children":[]},{"level":2,"title":"保存一个旧值","slug":"保存一个旧值","link":"#保存一个旧值","children":[]},{"level":2,"title":"forwardRef 和 useImperativeHandle 相当于 vue中的defineExport","slug":"forwardref-和-useimperativehandle-相当于-vue中的defineexport","link":"#forwardref-和-useimperativehandle-相当于-vue中的defineexport","children":[]},{"level":2,"title":"终止fetch请求 使用useEffect 清理函数 AbortController","slug":"终止fetch请求-使用useeffect-清理函数-abortcontroller","link":"#终止fetch请求-使用useeffect-清理函数-abortcontroller","children":[]},{"level":2,"title":"TS typeof 自动获取类型 不用使用any了","slug":"ts-typeof-自动获取类型-不用使用any了","link":"#ts-typeof-自动获取类型-不用使用any了","children":[]},{"level":2,"title":"useState useEffect useReducer","slug":"usestate-useeffect-usereducer","link":"#usestate-useeffect-usereducer","children":[]},{"level":2,"title":"React.memo 缓存变化，只有props 发生变化才会重新渲染","slug":"react-memo-缓存变化-只有props-发生变化才会重新渲染","link":"#react-memo-缓存变化-只有props-发生变化才会重新渲染","children":[]},{"level":2,"title":"useMemo函数的返回值是一个计算好的值，而不是函数","slug":"usememo函数的返回值是一个计算好的值-而不是函数","link":"#usememo函数的返回值是一个计算好的值-而不是函数","children":[]},{"level":2,"title":"zustand 相当于 pinia","slug":"zustand-相当于-pinia","link":"#zustand-相当于-pinia","children":[]},{"level":2,"title":"Zustand 中间件网址https://zustand.nodejs.cn/docs/middlewares/persist","slug":"zustand-中间件网址https-zustand-nodejs-cn-docs-middlewares-persist","link":"#zustand-中间件网址https-zustand-nodejs-cn-docs-middlewares-persist","children":[]},{"level":2,"title":"Zustand + immer 案例 代码片段","slug":"zustand-immer-案例-代码片段","link":"#zustand-immer-案例-代码片段","children":[]},{"level":2,"title":"zustand useShallow，避免重复渲染问题","slug":"zustand-useshallow-避免重复渲染问题","link":"#zustand-useshallow-避免重复渲染问题","children":[]},{"level":2,"title":"Zustand 持久化存储","slug":"zustand-持久化存储","link":"#zustand-持久化存储","children":[]},{"level":2,"title":"性能优化 独立监听某一个 避免hooks 持续调用","slug":"性能优化-独立监听某一个-避免hooks-持续调用","link":"#性能优化-独立监听某一个-避免hooks-持续调用","children":[]},{"level":2,"title":"tailwind 封装到独立的文件中","slug":"tailwind-封装到独立的文件中","link":"#tailwind-封装到独立的文件中","children":[]},{"level":2,"title":"将 useSearchParams 转换为对象, 并附上类型","slug":"将-usesearchparams-转换为对象-并附上类型","link":"#将-usesearchparams-转换为对象-并附上类型","children":[]},{"level":2,"title":"Mobx-react 函数式组件","slug":"mobx-react-函数式组件","link":"#mobx-react-函数式组件","children":[]},{"level":2,"title":"MobX 类组件","slug":"mobx-类组件","link":"#mobx-类组件","children":[]}],"git":{"updatedTime":1755344722000,"contributors":[{"name":"袁果锅","email":"2914310412@qq.com","commits":1}]},"filePathRelative":"React.md","excerpt":"<h2>数据驱动视图 相当于 ==> ref reactive</h2>\\n<p><img src=\\"https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250806202821571.png\\" alt=\\"image-20250806202821571\\"></p>\\n<h2>获取DOM 元素 Ref</h2>\\n<p><img src=\\"https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250806211406840.png\\" alt=\\"image-20250806211406840\\"></p>"}');export{d as comp,u as data};