mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-08 01:53:34 +08:00
1 line
20 KiB
JavaScript
1 line
20 KiB
JavaScript
(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["67221e83"],{"10b7492e":function(e,n,t){"use strict";t.d(n,"__esModule",{value:!0}),t.d(n,"texts",{enumerable:!0,get:function(){return a;}}),t("e8b87e4f");let a=[{value:"\u6211\u4EEC\u77E5\u9053\uFF0CReact 18 \u63D0\u4F9B\u4E86\u4E00\u4E2A\u4E13\u95E8\u4E3A CSS-IN-JS \u4F7F\u7528\u7684 ",paraId:0},{value:"useInsertionEffect",paraId:0},{value:" hooks\uFF0C\u5B83\u4F1A\u6BD4 ",paraId:0},{value:"useLayoutEffect",paraId:0},{value:" \u62E5\u6709\u66F4\u5FEB\u7684\u65F6\u5E8F\u4F18\u5148\u7EA7\uFF0C\u4ECE\u800C\u4FDD\u8BC1\u4E0D\u4F1A\u56E0\u4E3A\u4E66\u5199\u987A\u5E8F\u800C\u5F71\u54CD\u8C03\u7528\u987A\u5E8F\u7684\u95EE\u9898\uFF1A",paraId:0},{value:"useLayoutEffect(() => {\n console.log('layout effect');\n}, []);\n\nuseInsertionEffect(() => {\n console.log('insertion effect');\n}, []);\n\n// Console:\n// - insertion effect\n// - layout effect\n",paraId:1},{value:"\u5728\u65E9\u671F ",paraId:2},{value:"@ant-design/cssinjs",paraId:2},{value:" \u5B9E\u73B0\u4E2D\uFF0C\u7531\u4E8E\u9700\u8981\u517C\u5BB9 React 17 \u7248\u672C\uFF0C\u6211\u4EEC\u5E76\u6CA1\u6709\u9009\u62E9 ",paraId:2},{value:"useInsertionEffect",paraId:2},{value:"\uFF0C\u800C\u662F\u901A\u8FC7\u5728 render \u9636\u6BB5\u6DFB\u52A0\u6837\u5F0F\u7684\u65B9\u5F0F\u6765\u6A21\u62DF\u63D0\u524D\u63D2\u5165\u7684\u6548\u679C\uFF1A",paraId:2},{value:"// pseudocode. Not used in real world\nfunction useStyleInsertion(hash: string, counter: Record<string, number>) {\n useMemo(() => {\n if (!counter[hash]) {\n // Insert only when current style not inserted\n }\n\n counter[hash] += 1;\n }, [hash]);\n\n useEffect(\n () => () => {\n counter[hash] -= 1;\n\n if (!counter[hash]) {\n // Remove if set to clear on destroy\n }\n },\n [hash],\n );\n}\n",paraId:3},{value:"\u4EE5\u4E0A\u4EE3\u7801\u4F1A\u5BF9\u4F7F\u7528\u6837\u5F0F\u8FDB\u884C\u7EDF\u8BA1\uFF0C\u5982\u679C\u53D1\u73B0\u5F53\u524D\u6837\u5F0F\u6CA1\u6709\u88AB\u63D2\u5165\u8FC7\uFF0C\u5C31\u4F1A\u5728 render \u9636\u6BB5\u63D2\u5165\u6837\u5F0F\uFF0C\u5426\u5219\u5C31\u4E0D\u4F1A\u63D2\u5165\u3002\u540C\u6837\u7684\uFF0C\u5982\u679C\u53D1\u73B0\u5F53\u524D\u6837\u5F0F\u914D\u7F6E\u4E86\u672A\u4F7F\u7528\u65F6\u5378\u8F7D\uFF0C\u5219\u4F1A\u5728 effect \u786E\u8BA4\u8BA1\u6570\u540E\u6E05\u9664\u3002\u6B64\u5916\uFF0C\u8FD8\u6709\u4E00\u5957\u7C7B\u4F3C\u7684\u4EE3\u7801\u4F1A\u76D1\u542C token \u7684\u53D8\u5316\uFF0C\u5F53\u5B58\u5728\u591A\u4EFD token \u65F6\u4F1A\u5BF9\u4E0D\u518D\u4F7F\u7528\u7684 token \u5BF9\u5E94\u7684\u6240\u6709\u6837\u5F0F ",paraId:4},{value:"<style />",paraId:4},{value:" \u8FDB\u884C\u6E05\u7406\uFF0C\u4EE5\u907F\u514D\u8FC7\u591A\u7684\u4E3B\u9898\u5207\u6362\u5BFC\u81F4\u7684\u5185\u5B58\u6CC4\u6F0F\u3002",paraId:4},{value:"\u8FD9\u6BB5\u4EE3\u7801\u5728 React 17 \u53EF\u4EE5\u5B8C\u7F8E\u8FD0\u884C\uFF0C\u5728 React 18 \u7684 StrictMode \u4E0B\u4E5F\u8FD0\u884C\u7684\u5341\u5206\u6B63\u5E38\u3002",paraId:5},{value:"counter",paraId:5},{value:" \u603B\u662F\u6210\u5BF9\u51FA\u73B0\u4E0E\u6D88\u5931\u3002\u4F46\u662F\u5B83\u5728 Suspense \u4E0B\uFF0C\u5C31\u4F1A\u6709\u6982\u7387\u51FA\u73B0\u95EE\u9898\u4E86\u3002",paraId:5},{value:"React 18 \u7684 StrictMode \u548C ",paraId:6,tocIndex:0},{value:"React 17",paraId:6,tocIndex:0},{value:"\u4E0D\u540C\u7684\u662F\uFF0C\u5B83\u4F1A\u5728\u5404\u4E2A\u9636\u6BB5\u8FDB\u884C\u591A\u6B21\u8C03\u7528\uFF0C\u4ECE\u800C\u786E\u4FDD\u5F00\u53D1\u8005\u5BF9 Effect \u8FDB\u884C\u4E86\u6E05\u7406\uFF1A",paraId:6,tocIndex:0},{value:"const My = () => {\n console.log('render');\n\n useMemo(() => {\n console.log('memo');\n }, []);\n\n useEffect(() => {\n console.log('effect');\n\n return () => {\n console.log('effect cleanup');\n };\n }, []);\n};\n\n<StrictMode>\n <My />\n</StrictMode>;\n\n// Console:\n// - render\n// - memo\n// - render\n// - memo\n// - effect\n// - effect cleanup\n// - effect\n",paraId:7,tocIndex:0},{value:"\u4ECE\u4E0A\u9762\u7684\u4F8B\u5B50\u53EF\u4EE5\u77E5\u9053\uFF0C",paraId:8,tocIndex:0},{value:"counter",paraId:8,tocIndex:0},{value:" \u5728 StrictMode \u867D\u7136\u4F1A\u7D2F\u52A0\uFF0C\u4F46\u662F\u6700\u7EC8\u4F1A\u662F\u6B63\u786E\u7684\u503C\uFF08\u5373\u6BCF\u4E2A\u7EC4\u4EF6\u53EA\u8BA1\u7B97 1 \u6B21\u7EDF\u8BA1\uFF09\uFF1A",paraId:8,tocIndex:0},{value:"memo: 1",paraId:9,tocIndex:0},{value:"memo: 2",paraId:9,tocIndex:0},{value:"effect cleanup: 1",paraId:9,tocIndex:0},{value:"\u4F46\u662F StrictMode \u53EA\u662F\u5BF9 Suspense \u7684\u6A21\u62DF\u3002\u5728\u771F\u5B9E\u573A\u666F\u4E0B\uFF0C\u6267\u884C\u6B21\u6570\u5E76\u4E0D\u4F1A\u4FDD\u8BC1\u6210\u5BF9\u51FA\u73B0\u3002",paraId:10,tocIndex:0},{value:"\u6211\u4EEC\u4F7F\u7528 ",paraId:11,tocIndex:1},{value:"umi",paraId:11,tocIndex:1},{value:" \u8FDB\u884C\u7AD9\u70B9\u5F00\u53D1\uFF0C\u5B83\u9ED8\u8BA4\u6309\u9875\u62C6\u5305\u3001\u6309\u9700\u52A0\u8F7D\u3002\u901A\u8FC7 Suspense \u7684\u65B9\u5F0F\u5728\u52A0\u8F7D\u8FC7\u7A0B\u4E2D\u663E\u793A loading \u72B6\u6001\uFF1A",paraId:11,tocIndex:1},{value:"<BrowserRoutes>\n <Routs>\n <Suspense fallback={<Loading />} />\n </Routs>\n</BrowserRoutes>\n",paraId:12,tocIndex:1},{value:"\u5728\u9875\u9762\u5207\u6362\u65F6\uFF0C\u5076\u53D1\u51FA\u73B0\u9875\u9762\u5F80\u590D\u5207\u6362\u65F6\u90E8\u5206\u6837\u5F0F\u4E22\u5931\u7684\u60C5\u51B5\uFF1A",paraId:13,tocIndex:1},{value:"\u5176\u4E2D Page 1 \u4E22\u5931\u90E8\u5206\u7684\u6837\u5F0F\u4E3A Page 1 \u72EC\u6709\u7684\u6837\u5F0F\uFF08\u901A\u8FC7 ConfigProvider \u5B9A\u5236\u4E86\u4E00\u4E9B token\uFF09\uFF0C\u800C Page 2 \u7684\u6837\u5F0F\u5219\u4E3A Page 1 \u4E0E Page 2 \u901A\u7528\u7684\u6837\u5F0F\u3002",paraId:14,tocIndex:1},{value:"\u5728\u6211\u4EEC\u6700\u521D\u4ECB\u7ECD\u7684\u6837\u5F0F\u7BA1\u7406\u903B\u8F91\u53EF\u4EE5\u660E\u767D\uFF0CPage 1 \u7531\u4E8E\u4E3A\u72EC\u7ACB token \u5BF9\u5E94\u7684\u6837\u5F0F\uFF0C\u56E0\u800C\u5728 Page 2 \u6E32\u67D3\u65F6\u4F1A\u88AB\u6E05\u7406\u6389\u6240\u6709\u7684\u5BF9\u5E94 token \u7684\u6837\u5F0F ",paraId:15,tocIndex:1},{value:"<style />",paraId:15,tocIndex:1},{value:"\u3002\u8FD9\u770B\u8D77\u6765\u662F\u7B26\u5408\u9884\u671F\u7684\uFF0C\u90A3\u4E48\u95EE\u9898\u5C31\u51FA\u5728\u4E86\u5207\u56DE Page 1 \u65F6\u6837\u5F0F\u6CA1\u6709\u88AB\u91CD\u65B0\u63D2\u5165\u3002",paraId:15,tocIndex:1},{value:"\u5728\u7ECF\u8FC7\u4E00\u7CFB\u5217\u65AD\u70B9\u540E\uFF0C\u6211\u4EEC\u53D1\u73B0\u8FD9\u4E2A\u95EE\u9898\u51FA\u73B0\u5728\u8BA1\u6570\u5668\u4E0D\u540C\u6B65\u4E4B\u4E0A\u3002\u7531\u4E8E Suspense \u7684\u7279\u6027\uFF0C\u5B83\u4F1A\u5728\u52A0\u8F7D\u8FC7\u7A0B\u4E2D\u591A\u6B21\u8C03\u7528\u7EC4\u4EF6\uFF0C\u6240\u4EE5\u7EC4\u4EF6\u6837\u5F0F\u6CE8\u518C\u7684\u65F6\u673A\u4E5F\u4F1A\u88AB\u8C03\u7528\u591A\u6B21\u3002\u800C\u7531\u4E8E\u6211\u4EEC\u7684\u8BA1\u6570\u5668\u662F\u5728 render \u9636\u6BB5\u8FDB\u884C\u7684\uFF0C\u6240\u4EE5\u5728 Suspense \u4E0B\uFF0C\u8BA1\u6570\u5668\u4F1A\u88AB\u591A\u6B21\u8C03\u7528\uFF0C\u4ECE\u800C\u5BFC\u81F4\u8BA1\u6570\u5668\u7684\u503C\u4E0D\u6B63\u786E\uFF1A",paraId:16,tocIndex:2},{value:"render: 0",paraId:17,tocIndex:2},{value:"useMemo: 1",paraId:17,tocIndex:2},{value:"render: 1",paraId:17,tocIndex:2},{value:"useMemo: 2",paraId:17,tocIndex:2},{value:"effect: 2",paraId:17,tocIndex:2},{value:"\u4E0D\u50CF StrictMode\uFF0Ceffect \u5E76\u6CA1\u6709\u518D\u6B21\u6267\u884C\uFF0C\u6240\u4EE5 effect cleanup \u4E5F\u4E0D\u4F1A\u6267\u884C",paraId:17,tocIndex:2},{value:"\u8BA1\u6570\u5668\u4E0D\u540C\u6B65\u5BFC\u81F4 token \u5C42\u9762\u5DF2\u7ECF\u8BA4\u4E3A\u6837\u5F0F\u5DF2\u7ECF\u6CA1\u6709\u518D\u4F7F\u7528\u6240\u4EE5\u8FDB\u884C\u4E86\u6279\u91CF\u6E05\u7406\uFF0C\u800C\u5728\u7EC4\u4EF6\u6837\u5F0F\u5C42\u9762\u5219\u8BA4\u4E3A\u8FD8\u6709\u5176\u4ED6\u7EC4\u4EF6\u5728\u4F7F\u7528\uFF0C\u6240\u4EE5\u5F53\u91CD\u65B0\u8FDB\u5165 Page 1 \u65F6\u5E76\u4E0D\u4F1A\u91CD\u65B0\u63D2\u5165\u6837\u5F0F\u3002",paraId:18,tocIndex:2},{value:"\u663E\u800C\u6613\u89C1\uFF0CSuspense \u7531\u4E8E\u5176\u7279\u6027\uFF0C\u6211\u4EEC\u4E0D\u80FD\u901A\u8FC7 ",paraId:19,tocIndex:3},{value:"useMemo",paraId:19,tocIndex:3},{value:" \u6765\u505A\u8BA1\u6570\u5668\uFF0C\u5B83\u4E0D\u4F1A\u548C ",paraId:19,tocIndex:3},{value:"useEffect",paraId:19,tocIndex:3},{value:" \u6210\u5BF9\u51FA\u73B0\u3002\u6240\u4EE5\u6211\u4EEC\u8003\u8651\u9700\u8981\u4F7F\u7528 ",paraId:19,tocIndex:3},{value:"useInsertionEffect",paraId:19,tocIndex:3},{value:" \u6765\u8FDB\u884C\u6837\u5F0F\u7684\u63D2\u5165\uFF1A",paraId:19,tocIndex:3},{value:"// pseudocode. Not used in real world\nuseInsertionEffect(() => {\n if (!counter[hash]) {\n // Insert only when current style not inserted\n }\n counter[hash] += 1;\n\n return () => {\n counter[hash] -= 1;\n\n if (!counter[hash]) {\n // Remove if set to clear on destroy\n }\n };\n}, [hash]);\n",paraId:20,tocIndex:3},{value:"\u800C\u5BF9\u4E8E React 17 \u7248\u672C\uFF0C\u5219\u964D\u7EA7\u4E3A ",paraId:21,tocIndex:3},{value:"useLayoutEffect",paraId:21,tocIndex:3},{value:"\uFF1A",paraId:21,tocIndex:3},{value:"const useMergedInsertionEffect = useInsertionEffect || useLayoutEffect;\n\nuseMergedInsertionEffect(() => {\n // Same as above\n}, [hash]);\n",paraId:22,tocIndex:3},{value:"\u7ECF\u8FC7\u8FD9\u6837\u7684\u4FEE\u6539\u540E\uFF0C\u6211\u4EEC\u53D1\u73B0 React 17 \u7684 CI \u6302\u4E86\u3002\u5728\u68C0\u67E5\u540E\uFF0C\u53D1\u73B0 ",paraId:23,tocIndex:3},{value:"useLayoutEffect",paraId:23,tocIndex:3},{value:" \u5C31\u4F1A\u51FA\u73B0\u65F6\u5E8F\u95EE\u9898\uFF1A",paraId:23,tocIndex:3},{value:"// Some logic measure DOM size\nuseLayoutEffect(() => {\n // This is not correct since style is not applied\n const { clientHeight } = nodeRef.current;\n}, []);\n\n// Inject style\nuseLayoutEffect(() => {\n // ...\n}, [hash]);\n",paraId:24,tocIndex:3},{value:"\u6D4B\u91CF\u7684 ",paraId:25,tocIndex:3},{value:"useLayoutEffect",paraId:25,tocIndex:3},{value:" \u5148\u4E8E\u6CE8\u5165\u6837\u5F0F\u6267\u884C\uFF0C\u5BFC\u81F4\u83B7\u53D6\u4E86\u9519\u8BEF\u7684\u5C3A\u5BF8\u4FE1\u606F\u3002\u4E5F\u53EF\u4EE5\u9884\u6D4B\u5230\u8FD9\u4F1A\u5BF9\u5F00\u53D1\u8005\u4EA7\u751F\u5F71\u54CD\u3002\u56E0\u800C\u6211\u4EEC\u9000\u800C\u6C42\u5176\u6B21\uFF0C\u5728 React 17 \u7248\u672C\u65F6\u4F1A\u964D\u7EA7\u4E3A\u539F\u5148\u7684 ",paraId:25,tocIndex:3},{value:"useMemo",paraId:25,tocIndex:3},{value:" \u63D2\u5165\u3002",paraId:25,tocIndex:3},{value:"\u5728\u4E0A\u9762\u7684\u65B9\u6848\u4E2D\uFF0C\u6211\u4EEC\u542F\u7528\u4E86 ",paraId:26,tocIndex:4},{value:"useInsertionEffect",paraId:26,tocIndex:4},{value:" \u4ECE\u800C\u5B8C\u7F8E\u89E3\u51B3\u4E86\u6E32\u67D3\u95EE\u9898\u3002\u4F46\u5728 React 17 \u53CA\u4EE5\u4E0B\u7248\u672C\uFF0C\u6211\u4EEC\u4ECD\u7136\u4F1A\u5728 render \u9636\u6BB5\u63D2\u5165\u6837\u5F0F\uFF0C\u4F46\u662F\u4F1A\u5728 effect \u9636\u6BB5\u8BA9\u5F15\u7528\u8BA1\u6570\u52A0\u4E00\u3002\u4F46\u662F\u8FD9\u5E26\u6765\u4E86\u65B0\u7684\u95EE\u9898\uFF0C\u6211\u4EEC\u6765\u770B\u4E00\u6BB5\u4EE3\u7801 (",paraId:26,tocIndex:4},{value:"CodeSandbox",paraId:26,tocIndex:4},{value:")\uFF1A",paraId:26,tocIndex:4},{value:"import React from 'react';\n\nconst A = () => {\n React.useMemo(() => {\n console.log('A render');\n }, []);\n\n React.useEffect(() => {\n console.log('A mounted');\n return () => {\n console.log('A unmounted');\n };\n }, []);\n\n return <div>A</div>;\n};\n\nconst B = () => {\n React.useMemo(() => {\n console.log('B render');\n }, []);\n\n React.useEffect(() => {\n console.log('B mounted');\n return () => {\n console.log('B unmounted');\n };\n }, []);\n\n return <div>B</div>;\n};\n\nexport default function App() {\n const [show, setShow] = React.useState(true);\n\n const toggle = () => {\n setShow((prev) => !prev);\n };\n\n return (\n <div>\n <button onClick={toggle}>toggle</button>\n <div>{show ? <A /> : <B />}</div>\n </div>\n );\n}\n",paraId:27,tocIndex:4},{value:"\u5728\u8FD9\u6BB5\u4EE3\u7801\uFF08\u4E25\u683C\u6A21\u5F0F\uFF09\u4E2D\uFF0C\u70B9\u51FB\u6309\u94AE\u4F1A\u5207\u6362 A \u4E0E B \u7684\u6E32\u67D3\u3002\u90A3\u4E48\u4ECE A \u5207\u6362\u5230 B \u65F6\uFF0C\u987A\u5E8F\u4F1A\u662F\u4EC0\u4E48\u6837\u7684\u5462\uFF1F\u7B54\u6848\u662F:",paraId:28,tocIndex:4},{value:"B render\nB render\nA unmounted\nB mounted\nB unmounted\nB mounted\n",paraId:29,tocIndex:4},{value:"\u53EF\u4EE5\u770B\u5230\u65B0\u7EC4\u4EF6\u7684\u6E32\u67D3\u662F\u5728\u65E7\u7EC4\u4EF6\u7684\u5378\u8F7D\u56DE\u8C03\u4E4B\u524D\u7684\u3002\u8FD8\u8BB0\u5F97 cssinjs \u5728 React 17 \u4E00\u4E0B\u7684\u5904\u7406\u903B\u8F91\u5417\uFF1F\u6211\u4EEC\u6765\u6807\u8BB0\u4E00\u4E0B\uFF1A",paraId:30,tocIndex:4},{value:"B render // \u5199\u5165 cache\uFF0C\u63D2\u5165\u6837\u5F0F\nB render // \u5199\u5165 cache\uFF0C\u63D2\u5165\u6837\u5F0F\uFF08\u867D\u7136\u662F\u91CD\u590D\u7684\uFF0C\u4F46\u662F\u6709\u7F13\u5B58\uFF0C\u4E0D\u4F1A\u6709\u5197\u4F59\uFF09\nA unmounted // **\u5F15\u7528\u8BA1\u6570\u51CF\u4E00** \uFF08\u6B64\u65F6\u539F\u672C\u7684\u8BA1\u6570\u662F 1\uFF0C\u6267\u884C\u540E\u53D8\u4E3A 0\uFF0C\u89E6\u53D1\u4E86\u6837\u5F0F\u5378\u8F7D\uFF09\nB mounted // \u5F15\u7528\u8BA1\u6570\u52A0\u4E00 \uFF08\u6B64\u65F6\u8BA1\u6570\u662F 1\uFF0C\u4F46\u662F\u6837\u5F0F\u5DF2\u7ECF\u88AB A \u8FDE\u5E26\u5378\u8F7D\uFF09\nB unmounted // \u5F15\u7528\u8BA1\u6570\u51CF\u4E00\nB mounted // \u5F15\u7528\u8BA1\u6570\u52A0\u4E00\n",paraId:31,tocIndex:4},{value:"\u8FD9\u6837\u5C31\u53EF\u4EE5\u53D1\u73B0\uFF0C\u5F53 A \u4E0E B \u5171\u7528\u4E00\u6BB5\u6837\u5F0F\u65F6\uFF0C\u7531\u4E8E\u8BA1\u6570\u6CA1\u6709\u53CA\u65F6\u66F4\u65B0\uFF0C\u5BFC\u81F4\u6837\u5F0F\u5148\u88AB\u5378\u8F7D\u4E86\uFF0C\u540E\u7EED\u4E5F\u5E76\u6CA1\u6709\u89E6\u53D1\u63D2\u5165\u903B\u8F91\uFF0C\u6240\u4EE5\u4F9D\u7136\u4F1A\u5BFC\u81F4\u4E22\u5931\u3002",paraId:32,tocIndex:4},{value:"\u89E3\u51B3\u65B9\u6848\u4E5F\u5F88\u7B80\u5355\uFF0C\u5F53\u8BA1\u6570\u4ECE 0 \u53D8\u4E3A 1 \u65F6\uFF0C\u91CD\u65B0\u63D2\u5165\u6837\u5F0F\u5373\u53EF\u3002",paraId:33,tocIndex:4},{value:"Suspense \u5728\u5E26\u6765\u6E32\u67D3\u80FD\u529B\u63D0\u5347\u7684\u540C\u65F6\u4E5F\u8BA9\u65F6\u5E8F\u53D8\u5F97\u5341\u5206\u91CD\u8981\uFF0C\u4EC5\u4EC5\u5BF9 StrictMode \u8FDB\u884C\u5904\u7406\u5E76\u4E0D\u662F\u4E00\u4E2A\u6700\u4F18\u7684\u65B9\u5F0F\u3002\u9488\u5BF9\u4E0D\u540C\u7684 React \u7248\u672C\u4F7F\u7528\u4E0D\u540C\u7684\u903B\u8F91\u5176\u5B9E\u4F1A\u5B58\u5728\u4E0D\u540C\u7248\u672C\u4E4B\u95F4\u7684\u65F6\u5E8F\u95EE\u9898\uFF0C",paraId:34,tocIndex:5},{value:"render",paraId:34,tocIndex:5},{value:" \u4F1A\u4ECE\u7236\u8282\u70B9\u5230\u5B50\u8282\u70B9\u4F9D\u6B21\u89E6\u53D1\uFF0C\u800C ",paraId:34,tocIndex:5},{value:"useInsertionEffect",paraId:34,tocIndex:5},{value:" \u5219\u76F8\u53CD\u3002\u4E0D\u8FC7\u4ECE antd \u89D2\u5EA6\u6765\u8BF4\uFF0C\u7EC4\u4EF6\u6837\u5F0F\u4E4B\u95F4\u76F8\u4E92\u72EC\u7ACB\uFF0C\u6240\u4EE5\u8FD9\u79CD\u65F6\u5E8F\u95EE\u9898\u5E76\u4E0D\u4F1A\u5BF9\u6211\u4EEC\u4EA7\u751F\u5F71\u54CD\u3002",paraId:34,tocIndex:5}];},"67221e83":function(e,n,t){"use strict";t.d(n,"__esModule",{value:!0}),t.d(n,"default",{enumerable:!0,get:function(){return x;}});var a=t("777fffbe"),s=t("f19d2b93"),d=a._(t("b622e337")),l=a._(t("97c488ea")),u=a._(t("c96b0d01")),c=t("5b220c3d"),r=t("9c86e52a"),o=t("10b7492e"),x=function(){return(0,s.jsx)(r.DumiPage,{children:(0,s.jsx)(c.Suspense,{fallback:(0,s.jsx)(u.default,{}),children:(0,s.jsx)(s.Fragment,{children:(0,s.jsxs)("div",{className:"markdown",children:[(0,s.jsxs)("p",{children:[o.texts[0].value,(0,s.jsx)("code",{children:o.texts[1].value}),o.texts[2].value,(0,s.jsx)("code",{children:o.texts[3].value}),o.texts[4].value]}),(0,s.jsx)(d.default,{lang:"tsx",children:o.texts[5].value}),(0,s.jsxs)("p",{children:[o.texts[6].value,(0,s.jsx)("code",{children:o.texts[7].value}),o.texts[8].value,(0,s.jsx)("code",{children:o.texts[9].value}),o.texts[10].value]}),(0,s.jsx)(d.default,{lang:"tsx",children:o.texts[11].value}),(0,s.jsxs)("p",{children:[o.texts[12].value,(0,s.jsx)("code",{children:o.texts[13].value}),o.texts[14].value]}),(0,s.jsxs)("p",{children:[o.texts[15].value,(0,s.jsx)("code",{children:o.texts[16].value}),o.texts[17].value]}),(0,s.jsxs)("h2",{id:"strictmode",children:[(0,s.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#strictmode",sourceType:"a",children:(0,s.jsx)("span",{className:"icon icon-link"})}),"StrictMode"]}),(0,s.jsxs)("p",{children:[o.texts[18].value,(0,s.jsx)(l.default,{href:"https://17.reactjs.org/docs/strict-mode.html",sourceType:"a",children:o.texts[19].value}),o.texts[20].value]}),(0,s.jsx)(d.default,{lang:"tsx",children:o.texts[21].value}),(0,s.jsxs)("p",{children:[o.texts[22].value,(0,s.jsx)("code",{children:o.texts[23].value}),o.texts[24].value]}),(0,s.jsxs)("ul",{children:[(0,s.jsx)("li",{children:o.texts[25].value}),(0,s.jsx)("li",{children:o.texts[26].value}),(0,s.jsx)("li",{children:o.texts[27].value})]}),(0,s.jsx)("p",{children:o.texts[28].value}),(0,s.jsxs)("h2",{id:"suspense",children:[(0,s.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#suspense",sourceType:"a",children:(0,s.jsx)("span",{className:"icon icon-link"})}),"Suspense"]}),(0,s.jsxs)("p",{children:[o.texts[29].value,(0,s.jsx)(l.default,{href:"https://github.com/umijs/umi",sourceType:"a",children:o.texts[30].value}),o.texts[31].value]}),(0,s.jsx)(d.default,{lang:"tsx",children:o.texts[32].value}),(0,s.jsx)("p",{children:o.texts[33].value}),(0,s.jsx)("img",{width:"300",alt:"Fetch Failed",src:"https://github.com/ant-design/ant-design/assets/5378891/f2bc49ed-9db6-4d7e-a5d3-8db0cda7b640"}),(0,s.jsx)("p",{children:o.texts[34].value}),(0,s.jsxs)("p",{children:[o.texts[35].value,(0,s.jsx)("code",{children:o.texts[36].value}),o.texts[37].value]}),(0,s.jsxs)("h3",{id:"\u8BA1\u6570\u5668\u9519\u8BEF",children:[(0,s.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#\u8BA1\u6570\u5668\u9519\u8BEF",sourceType:"a",children:(0,s.jsx)("span",{className:"icon icon-link"})}),"\u8BA1\u6570\u5668\u9519\u8BEF"]}),(0,s.jsx)("p",{children:o.texts[38].value}),(0,s.jsxs)("ul",{children:[(0,s.jsx)("li",{children:o.texts[39].value}),(0,s.jsx)("li",{children:o.texts[40].value}),(0,s.jsx)("li",{children:o.texts[41].value}),(0,s.jsx)("li",{children:o.texts[42].value}),(0,s.jsx)("li",{children:o.texts[43].value}),(0,s.jsx)("li",{children:o.texts[44].value})]}),(0,s.jsx)("p",{children:o.texts[45].value}),(0,s.jsxs)("h2",{id:"useinsertioneffect",children:[(0,s.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#useinsertioneffect",sourceType:"a",children:(0,s.jsx)("span",{className:"icon icon-link"})}),"useInsertionEffect"]}),(0,s.jsxs)("p",{children:[o.texts[46].value,(0,s.jsx)("code",{children:o.texts[47].value}),o.texts[48].value,(0,s.jsx)("code",{children:o.texts[49].value}),o.texts[50].value,(0,s.jsx)("code",{children:o.texts[51].value}),o.texts[52].value]}),(0,s.jsx)(d.default,{lang:"tsx",children:o.texts[53].value}),(0,s.jsxs)("p",{children:[o.texts[54].value,(0,s.jsx)("code",{children:o.texts[55].value}),o.texts[56].value]}),(0,s.jsx)(d.default,{lang:"tsx",children:o.texts[57].value}),(0,s.jsxs)("p",{children:[o.texts[58].value,(0,s.jsx)("code",{children:o.texts[59].value}),o.texts[60].value]}),(0,s.jsx)(d.default,{lang:"tsx",children:o.texts[61].value}),(0,s.jsxs)("p",{children:[o.texts[62].value,(0,s.jsx)("code",{children:o.texts[63].value}),o.texts[64].value,(0,s.jsx)("code",{children:o.texts[65].value}),o.texts[66].value]}),(0,s.jsxs)("h2",{id:"\u65B0\u7684\u517C\u5BB9\u95EE\u9898",children:[(0,s.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#\u65B0\u7684\u517C\u5BB9\u95EE\u9898",sourceType:"a",children:(0,s.jsx)("span",{className:"icon icon-link"})}),"\u65B0\u7684\u517C\u5BB9\u95EE\u9898"]}),(0,s.jsxs)("p",{children:[o.texts[67].value,(0,s.jsx)("code",{children:o.texts[68].value}),o.texts[69].value,(0,s.jsx)(l.default,{href:"https://codesandbox.io/s/aged-cdn-qjxmpz?file=/src/App.tsx:23-886",sourceType:"a",children:o.texts[70].value}),o.texts[71].value]}),(0,s.jsx)(d.default,{lang:"tsx",children:o.texts[72].value}),(0,s.jsx)("p",{children:o.texts[73].value}),(0,s.jsx)(d.default,{children:o.texts[74].value}),(0,s.jsx)("p",{children:o.texts[75].value}),(0,s.jsx)(d.default,{children:o.texts[76].value}),(0,s.jsx)("p",{children:o.texts[77].value}),(0,s.jsx)("p",{children:o.texts[78].value}),(0,s.jsxs)("h2",{id:"\u603B\u7ED3",children:[(0,s.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#\u603B\u7ED3",sourceType:"a",children:(0,s.jsx)("span",{className:"icon icon-link"})}),"\u603B\u7ED3"]}),(0,s.jsxs)("p",{children:[o.texts[79].value,(0,s.jsx)("code",{children:o.texts[80].value}),o.texts[81].value,(0,s.jsx)("code",{children:o.texts[82].value}),o.texts[83].value]})]})})})});};}}]); |