"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", div: "div", h2: "h2", h3: "h3", h4: "h4", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {R2Image} = _components; if (!R2Image) _missingMdxReference("R2Image", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["性能优化的目标是：", _jsx(_components.strong, { children: "减少加载时间，提升交互流畅度" }), "。性能差的主要表现是 ", _jsx(_components.strong, { children: "白屏时间长" }), " 和 ", _jsx(_components.strong, { children: "操作卡顿" }), "，根本原因有两类："] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "加载慢" }), "：资源体积过大（JS、CSS、图片、字体等）、网络请求过多。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "渲染慢" }), "：频繁的 DOM 操作、过多的重排重绘、未合理使用动画或监听器，或者同一时间加载的DOM太多了。"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["因此，优化思路也分为两个方向：", _jsx(_components.strong, { children: "资源层面" }), "（让文件更小、请求更少）和 ", _jsx(_components.strong, { children: "代码层面" }), "（减少不必要的计算和渲染）。"] }), "\n", _jsxs(_components.h2, { id: "性能优化基础", children: ["性能优化基础", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#性能优化基础", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["在性能优化之前需要搞明白一些基础概念，", _jsx(_components.strong, { children: "浏览器渲染原理" }), "、", _jsx(_components.strong, { children: "性能优化指标" }), "、", _jsx(_components.strong, { children: "性能监控工具" }), "。"] }), "\n", _jsxs(_components.h3, { id: "浏览器渲染原理", children: ["浏览器渲染原理", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#浏览器渲染原理", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "当浏览器拿到一个网页后，需要把 HTML、CSS、JS 转换成屏幕上可见的像素。这个过程大致可以分为五个关键步骤：" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: ["解析", _jsx(_components.span, { className: "token constant", children: "HTML" }), " → 构建", _jsx(_components.span, { className: "token constant", children: "DOM" }), "树（遇见js则下载js资源）\n"] }), _jsx(_components.span, { className: "code-line", children: " ↓\n" }), _jsxs(_components.span, { className: "code-line", children: ["解析", _jsx(_components.span, { className: "token constant", children: "CSS" }), " → 构建", _jsx(_components.span, { className: "token constant", children: "CSSOM" }), "树\n"] }), _jsx(_components.span, { className: "code-line", children: " ↓\n" }), _jsxs(_components.span, { className: "code-line", children: ["（遇到内联", _jsx(_components.span, { className: "token operator", children: "/" }), "外联脚本时，可能等待", _jsx(_components.span, { className: "token constant", children: "CSS" }), "下载并执行", _jsx(_components.span, { className: "token constant", children: "JS" }), "）\n"] }), _jsx(_components.span, { className: "code-line", children: " ↓\n" }), _jsxs(_components.span, { className: "code-line", children: ["继续解析", _jsx(_components.span, { className: "token constant", children: "HTML" }), "，直到结束\n"] }), _jsx(_components.span, { className: "code-line", children: " ↓\n" }), _jsxs(_components.span, { className: "code-line", children: ["合并", _jsx(_components.span, { className: "token constant", children: "DOM" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " ", _jsx(_components.span, { className: "token constant", children: "CSSOM" }), " → 渲染树\n"] }), _jsx(_components.span, { className: "code-line", children: " ↓\n" }), _jsx(_components.span, { className: "code-line", children: "布局 → 绘制 → 合成\n" })] }) }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "构建 DOM 树" }), "：浏览器从网络或本地读取 HTML 字节流后，会经过解码、词法分析、语法分析等过程，将标签嵌套关系转换为树状结构，这就是 DOM 树。它完整描述了文档的节点层级、属性以及文本内容。需要注意的是，当解析 HTML 过程中遇到不带 ", _jsx(_components.code, { children: "async" }), " 或 ", _jsx(_components.code, { children: "defer" }), " 的 ", _jsx(_components.code, { children: "\n" })] }) }) })] }), "\n", _jsxs(_components.h3, { id: "防抖节流", children: ["防抖节流", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#防抖节流", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["防抖和节流也是性能优化比较重要的一个点，一般可以使用", _jsx(_components.code, { children: "loadsh" }), "库去实现，不过这里以原理复述一下。"] }), "\n", _jsxs(_components.h4, { id: "防抖", children: ["防抖", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#防抖", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "核心思想" }), "：在事件连续触发的过程中，函数", _jsx(_components.strong, { children: "只在最后一次触发后等待一段固定时间" }), "才执行。如果在此期间再次触发，则重新计时。\n", _jsx(_components.strong, { children: "适用场景" }), "："] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "搜索框输入（用户停止输入后才发起请求）" }), "\n", _jsx(_components.li, { children: "窗口 resize（用户调整完窗口大小后再重新计算布局）" }), "\n", _jsx(_components.li, { children: "表单验证（用户输完一段内容后验证）" }), "\n", _jsxs(_components.li, { children: ["按钮提交（防止重复点击，但一般", _jsx(_components.code, { children: "disabled" }), "就足够了，或者大厂对所有请求进行封装也不是不可，但是太重了）"] }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 防抖示例" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "debounce" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "fn", _jsx(_components.span, { className: "token punctuation", children: "," }), " delay", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "let" }), " timer ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "..." }), "args", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "timer", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token function", children: "clearTimeout" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "timer", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" timer ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "setTimeout" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "fn" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "apply" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "this" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " args", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" timer ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " delay", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 使用" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " handleInput ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "debounce" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token builtin", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'搜索:'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " e", _jsx(_components.span, { className: "token punctuation", children: "." }), "target", _jsx(_components.span, { className: "token punctuation", children: "." }), "value", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "300" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["input", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "addEventListener" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'input'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " handleInput", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h4, { id: "节流", children: ["节流", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#节流", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "核心思想" }), "：在事件连续触发的过程中，函数", _jsx(_components.strong, { children: "每隔固定时间执行一次" }), "，保证一定时间间隔内最多执行一次。\n", _jsx(_components.strong, { children: "适用场景" }), "："] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "滚动加载更多（监听滚动条位置）" }), "\n", _jsx(_components.li, { children: "鼠标移动位置上报（如游戏中的鼠标坐标）" }), "\n", _jsx(_components.li, { children: "拖拽元素时计算位置" }), "\n", _jsx(_components.li, { children: "动画帧率控制" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 节流" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "throttle" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "fn", _jsx(_components.span, { className: "token punctuation", children: "," }), " delay", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "let" }), " lastTime ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "..." }), "args", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " now ", _jsx(_components.span, { className: "token operator", children: "=" }), " Date", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "now" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "now ", _jsx(_components.span, { className: "token operator", children: "-" }), " lastTime ", _jsx(_components.span, { className: "token operator", children: ">=" }), " delay", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "fn" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "apply" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "this" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " args", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" lastTime ", _jsx(_components.span, { className: "token operator", children: "=" }), " now", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h3, { id: "react渲染优化", children: ["React渲染优化", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#react渲染优化", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "react在进行setState更新以及props变化的时候，是以整个组件为基础更新的，也就是说，一个组件状态变化，会触发它自身以及所有子组件的重新渲染（即使子组件的 props 没有变化）。这种设计简化了开发，但在大型应用中容易造成性能浪费。" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "React.memo缓存组件" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "React.memo" }), " 是一个高阶组件，它会对组件的 props 进行", _jsx(_components.strong, { children: "浅比较" }), "。如果 props 没有变化，则跳过本次渲染，直接复用上次结果。"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["如果 props 中包含函数、对象，每次父组件渲染都会创建新引用，导致浅比较失效。此时需要配合 ", _jsx(_components.code, { children: "useCallback" }), "、", _jsx(_components.code, { children: "useMemo" }), "。"] }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " Child ", _jsx(_components.span, { className: "token operator", children: "=" }), " React", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "memo" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "Child" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " name ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token builtin", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'Child render'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token operator", children: "<" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "name", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "useMemo缓存计算结果" }) }), "\n", _jsxs(_components.p, { children: ["避免每次渲染都进行昂贵的计算，同时也能保持对象/数组的引用稳定，辅助 ", _jsx(_components.code, { children: "React.memo" }), "。"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " expensiveValue ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useMemo" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token function", children: "computeExpensiveValue" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "a", _jsx(_components.span, { className: "token punctuation", children: "," }), " b", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "a", _jsx(_components.span, { className: "token punctuation", children: "," }), " b", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 缓存对象引用" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " config ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useMemo" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " theme", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'dark'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " size", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'large'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "useCallback缓存函数" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["防止函数在每次渲染时重新创建，导致子组件的 ", _jsx(_components.code, { children: "React.memo" }), " 失效。"] }), "\n", _jsx(_components.li, { children: "其次useCallback和useMemo一般作为useEffect的依赖性的时候也需要进行使用。" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " handleClick ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useCallback" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "doSomething" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "id", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "id", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 仅在 id 变化时重新创建函数" }), "\n"] })] }) }) })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }