https://fantastic-note.vercel.app/assets/js/07ab6777.8e3fbd1b.js

1"use strict";(self.webpackChunkfantastic_note=self.webpackChunkfantastic_note||[]).push([["3903"],{36144(e,n,t){t.r(n),t.d(n,{metadata:()=>s,default:()=>o,frontMatter:()=>d,contentTitle:()=>l,toc:()=>h,assets:()=>i});var s=JSON.parse('{"id":"React/React/\u6279\u5904\u7406","title":"\u6279\u5904\u7406","description":"\u5728 React \u51FD\u6570\u7EC4\u4EF6\u4E2D\uFF0C\u5F53\u591A\u4E2A useState \u7684\u72B6\u6001\u540C\u65F6\u66F4\u65B0\u65F6\uFF0CReact \u5E76\u4E0D\u4F1A\u4E3A\u6BCF\u4E2A\u72B6\u6001\u53D8\u5316\u5206\u522B\u89E6\u53D1\u4E00\u6B21\u91CD\u65B0\u6E32\u67D3\uFF0C\u800C\u662F\u5C06\u5B83\u4EEC\u201C\u6279\u5904\u7406\u201D\uFF08batching\uFF09\u6210\u4E00\u6B21\u91CD\u65B0\u6E32\u67D3\u3002","source":"@site/docs/React/01-React/008-\u6279\u5904\u7406.md","sourceDirName":"React/01-React","slug":"/React/React/\u6279\u5904\u7406","permalink":"/docs/React/React/\u6279\u5904\u7406","draft":false,"unlisted":false,"editUrl":"https://github.com/heinfy/fantastic-note/tree/main/docs/React/01-React/008-\u6279\u5904\u7406.md","tags":[],"version":"current","sidebarPosition":8,"frontMatter":{},"sidebar":"reactSidebar","previous":{"title":"\u865A\u62DF\u5217\u8868","permalink":"/docs/React/React/\u865A\u62DF\u5217\u8868"},"next":{"title":"React \u539F\u7406","permalink":"/docs/React/React/React \u539F\u7406"}}'),c=t(74848),r=t(28453);let d={},l,i={},h=[{value:"\u2705 \u4E00\u3001\u6838\u5FC3\u673A\u5236\uFF1A<strong>\u81EA\u52A8\u6279\u5904\u7406\uFF08Automatic Batching\uFF09</strong>",id:"-\u4E00\u6838\u5FC3\u673A\u5236\u81EA\u52A8\u6279\u5904\u7406automatic-batching",level:2},{value:"\u{1F4CC} React 18+ \u7684\u5173\u952E\u6539\u8FDB",id:"-react-18-\u7684\u5173\u952E\u6539\u8FDB",level:3},{value:"\u{1F9EA} \u793A\u4F8B\uFF1A\u591A\u4E2A setState \u540C\u65F6\u8C03\u7528",id:"-\u793A\u4F8B\u591A\u4E2A-setstate-\u540C\u65F6\u8C03\u7528",level:3},{value:"\u{1F50D} \u8F93\u51FA\u7ED3\u679C\uFF08React 18+\uFF09\uFF1A",id:"-\u8F93\u51FA\u7ED3\u679Creact-18",level:3},{value:"\u2705 \u4E8C\u3001\u5E95\u5C42\u539F\u7406\uFF1AFiber \u4E0E Update Queue",id:"-\u4E8C\u5E95\u5C42\u539F\u7406fiber-\u4E0E-update-queue",level:2},{value:"\u2705 \u4E09\u3001\u4E0D\u540C\u4E0A\u4E0B\u6587\u4E0B\u7684\u6279\u5904\u7406\u884C\u4E3A\uFF08React 18+\uFF09",id:"-\u4E09\u4E0D\u540C\u4E0A\u4E0B\u6587\u4E0B\u7684\u6279\u5904\u7406\u884C\u4E3Areact-18",level:2},{value:"\u{1F9EA} \u793A\u4F8B\uFF1A\u5728 setTimeout \u4E2D\u66F4\u65B0\u591A\u4E2A\u72B6\u6001",id:"-\u793A\u4F8B\u5728-settimeout-\u4E2D\u66F4\u65B0\u591A\u4E2A\u72B6\u6001",level:3},{value:"\u2705 \u56DB\u3001\u7279\u6B8A\u60C5\u51B5\uFF1A\u5982\u4F55\u201C\u9000\u51FA\u201D\u6279\u5904\u7406\uFF1F",id:"-\u56DB\u7279\u6B8A\u60C5\u51B5\u5982\u4F55\u9000\u51FA\u6279\u5904\u7406",level:2},{value:"\u2705 \u4E94\u3001\u5E38\u89C1\u8BEF\u533A\u6F84\u6E05",id:"-\u4E94\u5E38\u89C1\u8BEF\u533A\u6F84\u6E05",level:2},{value:"\u274C \u8BEF\u533A 1\uFF1A\u201C\u6BCF\u4E2A setState \u90FD\u4F1A\u89E6\u53D1\u4E00\u6B21 render\u201D",id:"-\u8BEF\u533A-1\u6BCF\u4E2A-setstate-\u90FD\u4F1A\u89E6\u53D1\u4E00\u6B21-render",level:3},{value:"\u274C \u8BEF\u533A 2\uFF1A\u201CuseState \u662F\u72EC\u7ACB\u7684\uFF0C\u6240\u4EE5\u4F1A\u5206\u522B\u66F4\u65B0\u201D",id:"-\u8BEF\u533A-2usestate-\u662F\u72EC\u7ACB\u7684\u6240\u4EE5\u4F1A\u5206\u522B\u66F4\u65B0",level:3},{value:"\u274C \u8BEF\u533A 3\uFF1A\u201CuseReducer \u4E0D\u4F1A\u6279\u5904\u7406\u201D",id:"-\u8BEF\u533A-3usereducer-\u4E0D\u4F1A\u6279\u5904\u7406",level:3},{value:"\u2705 \u603B\u7ED3",id:"-\u603B\u7ED3",level:2}];function a(e){let n={blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",hr:"hr",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.R)(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(n.p,{children:["\u5728 React \u51FD\u6570\u7EC4\u4EF6\u4E2D\uFF0C",(0,c.jsxs)(n.strong,{children:["\u5F53\u591A\u4E2A ",(0,c.jsx)(n.code,{children:"useState"})," \u7684\u72B6\u6001\u540C\u65F6\u66F4\u65B0\u65F6\uFF0CReact \u5E76\u4E0D\u4F1A\u4E3A\u6BCF\u4E2A\u72B6\u6001\u53D8\u5316\u5206\u522B\u89E6\u53D1\u4E00\u6B21\u91CD\u65B0\u6E32\u67D3\uFF0C\u800C\u662F\u5C06\u5B83\u4EEC\u201C\u6279\u5904\u7406\u201D\uFF08batching\uFF09\u6210\u4E00\u6B21\u91CD\u65B0\u6E32\u67D3"]}),"\u3002"]}),"\n",(0,c.jsx)(n.hr,{}),"\n",(0,c.jsxs)(n.h2,{id:"-\u4E00\u6838\u5FC3\u673A\u5236\u81EA\u52A8\u6279\u5904\u7406automatic-batching",children:["\u2705 \u4E00\u3001\u6838\u5FC3\u673A\u5236\uFF1A",(0,c.jsx)(n.strong,{children:"\u81EA\u52A8\u6279\u5904\u7406\uFF08Automatic Batching\uFF09"})]}),"\n",(0,c.jsx)(n.h3,{id:"-react-18-\u7684\u5173\u952E\u6539\u8FDB",children:"\u{1F4CC} React 18+ \u7684\u5173\u952E\u6539\u8FDB"}),"\n",(0,c.jsxs)(n.p,{children:["\u4ECE ",(0,c.jsx)(n.strong,{children:"React 18 \u5F00\u59CB"}),"\uFF0C\u65E0\u8BBA\u72B6\u6001\u66F4\u65B0\u53D1\u751F\u5728\u4EC0\u4E48\u4E0A\u4E0B\u6587\uFF08\u4E8B\u4EF6\u5904\u7406\u5668\u3001Promise\u3001setTimeout \u7B49\uFF09\uFF0C",(0,c.jsx)(n.strong,{children:"\u6240\u6709\u72B6\u6001\u66F4\u65B0\u90FD\u4F1A\u88AB\u81EA\u52A8\u6279\u5904\u7406"}),"\uFF08\u9664\u975E\u663E\u5F0F opt-out\uFF09\u3002"]}),"\n",(0,c.jsxs)(n.blockquote,{children:["\n",(0,c.jsxs)(n.p,{children:["\u{1F514} \u5728 React 17 \u53CA\u4E4B\u524D\uFF0C\u53EA\u6709 ",(0,c.jsx)(n.strong,{children:"React \u4E8B\u4EF6\u5904\u7406\u5668\u5185\u90E8"})," \u7684\u66F4\u65B0\u4F1A\u88AB\u6279\u5904\u7406\uFF1B\u5728 ",(0,c.jsx)(n.code,{children:"setTimeout"}),"\u3001",(0,c.jsx)(n.code,{children:"Promise"}),"\u3001\u539F\u751F\u4E8B\u4EF6\u4E2D\u5219\u4E0D\u4F1A\u3002"]}),"\n"]}),"\n",(0,c.jsx)(n.hr,{}),"\n",(0,c.jsx)(n.h3,{id:"-\u793A\u4F8B\u591A\u4E2A-setstate-\u540C\u65F6\u8C03\u7528",children:"\u{1F9EA} \u793A\u4F8B\uFF1A\u591A\u4E2A setState \u540C\u65F6\u8C03\u7528"}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-jsx",children:"import { use

1State } from 'react';\n\nexport default function App() {\n  const [count, setCount] = useState(0);\n  const [flag, setFlag] = useState(false);\n\n  const handleClick = () => {\n    console.log('--- \u5F00\u59CB\u66F4\u65B0 ---');\n    setCount(c => c + 1);     // \u66F4\u65B0 1\n    setFlag(f => !f);         // \u66F4\u65B0 2\n    console.log('--- \u66F4\u65B0\u7ED3\u675F ---');\n  };\n\n  console.log('App rendered'); // \u89C2\u5BDF\u6E32\u67D3\u6B21\u6570\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <p>Flag: {flag ? 'ON' : 'OFF'}</p>\n      <button onClick={handleClick}>Update Both</button>\n    </div>\n  );\n}\n"})}),"\n",(0,c.jsx)(n.h3,{id:"-\u8F93\u51FA\u7ED3\u679Creact-18",children:"\u{1F50D} \u8F93\u51FA\u7ED3\u679C\uFF08React 18+\uFF09\uFF1A"}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{children:"--- \u5F00\u59CB\u66F4\u65B0 ---\n--- \u66F4\u65B0\u7ED3\u675F ---\nApp rendered   // \u2190 \u53EA\u6253\u5370\u4E00\u6B21\uFF01\n"})}),"\n",(0,c.jsxs)(n.p,{children:["\u2705 ",(0,c.jsx)(n.strong,{children:"\u7ED3\u8BBA"}),"\uFF1A\u5C3D\u7BA1\u8C03\u7528\u4E86\u4E24\u6B21 ",(0,c.jsx)(n.code,{children:"setState"}),"\uFF0C\u4F46\u7EC4\u4EF6",(0,c.jsx)(n.strong,{children:"\u53EA\u91CD\u65B0\u6E32\u67D3\u4E86\u4E00\u6B21"}),"\u3002"]}),"\n",(0,c.jsx)(n.hr,{}),"\n",(0,c.jsx)(n.h2,{id:"-\u4E8C\u5E95\u5C42\u539F\u7406fiber-\u4E0E-update-queue",children:"\u2705 \u4E8C\u3001\u5E95\u5C42\u539F\u7406\uFF1AFiber \u4E0E Update Queue"}),"\n",(0,c.jsxs)(n.p,{children:["React \u5185\u90E8\u4F7F\u7528 ",(0,c.jsx)(n.strong,{children:"Fiber \u67B6\u6784"}),"\u7BA1\u7406\u66F4\u65B0\uFF1A"]}),"\n",(0,c.jsxs)(n.ol,{children:["\n",(0,c.jsxs)(n.li,{children:["\u6BCF\u6B21\u8C03\u7528 ",(0,c.jsx)(n.code,{children:"setXXX"}),"\uFF0C\u4F1A\u521B\u5EFA\u4E00\u4E2A ",(0,c.jsx)(n.strong,{children:"update \u5BF9\u8C61"}),"\uFF0C\u5E76\u63A8\u5165\u8BE5 hook \u7684 ",(0,c.jsx)(n.strong,{children:"update queue"}),"\u3002"]}),"\n",(0,c.jsxs)(n.li,{children:["React \u4F1A\u542F\u52A8\u4E00\u4E2A ",(0,c.jsx)(n.strong,{children:"reconciliation\uFF08\u534F\u8C03\uFF09\u8FC7\u7A0B"}),"\u3002"]}),"\n",(0,c.jsxs)(n.li,{children:["\u5728\u8FD9\u4E2A\u8FC7\u7A0B\u4E2D\uFF0CReact ",(0,c.jsx)(n.strong,{children:"\u5408\u5E76\uFF08merge\uFF09\u540C\u4E00\u8F6E\u4E8B\u4EF6\u4E2D\u7684\u6240\u6709\u72B6\u6001\u66F4\u65B0"}),"\u3002"]}),"\n",(0,c.jsxs)(n.li,{children:["\u6700\u7EC8\uFF0C\u7528",(0,c.jsx)(n.strong,{children:"\u6700\u65B0\u7684\u72B6\u6001\u503C"}),"\u6267\u884C\u4E00\u6B21\u5B8C\u6574\u7684\u51FD\u6570\u7EC4\u4EF6\u91CD\u8FD0\u884C\uFF08render\uFF09\u3002"]}),"\n"]}),"\n",(0,c.jsxs)(n.blockquote,{children:["\n",(0,c.jsxs)(n.p,{children:["\u{1F4A1} \u6240\u4EE5\uFF0C\u51FD\u6570\u7EC4\u4EF6\u7684\u201C\u5237\u65B0\u201D = ",(0,c.jsx)(n.strong,{children:"\u6574\u4E2A\u51FD\u6570\u91CD\u65B0\u6267\u884C\u4E00\u6B21"}),"\uFF0C\u4F7F\u7528\u6240\u6709 state \u7684\u6700\u65B0\u503C\u3002"]}),"\n"]}),"\n",(0,c.jsx)(n.hr,{}),"\n",(0,c.jsx)(n.h2,{id:"-\u4E09\u4E0D\u540C\u4E0A\u4E0B\u6587\u4E0B\u7684\u6279\u5904\u7406\u884C\u4E3Areact-18",children:"\u2705 \u4E09\u3001\u4E0D\u540C\u4E0A\u4E0B\u6587\u4E0B\u7684\u6279\u5904\u7406\u884C\u4E3A\uFF08React 18+\uFF09"}),"\n",(0,c.jsxs)(n.table,{children:[(0,c.jsx)(n.thead,{children:(0,c.jsxs)(n.tr,{children:[(0,c.jsx)(n.th,{children:"\u4E0A\u4E0B\u6587"}),(0,c.jsx)(n.th,{children:"\u662F\u5426\u6279\u5904\u7406\uFF1F"}),(0,c.jsx)(n.th,{children:"\u8BF4\u660E"})]})}),(0,c.jsxs)(n.tbody,{children:[(0,c.jsxs)(n.tr,{children:[(0,c.jsxs)(n.td,{children:["React \u4E8B\u4EF6\u5904\u7406\u5668\uFF08\u5982 ",(0,c.jsx)(n.code,{children:"onClick"}),"\uFF09"]}),(0,c.jsx)(n.td,{children:"\u2705 \u662F"}),(0,c.jsx)(n.td,{children:"\u539F\u751F\u652F\u6301"})]}),(0,c.jsxs)(n.tr,{children:[(0,c.jsxs)(n.td,{children:[(0,c.jsx)(n.code,{children:"setTimeout"})," / ",(0,c.jsx)(n.code,{children:"setInterval"})]}),(0,c.jsx)(n.td,{children:"\u2705 \u662F\uFF08React 18+\uFF09"}),(0,c.jsx)(n.td,{children:"\u81EA\u52A8\u6279\u5904\u7406"})]}),(0,c.jsxs)(n.tr,{children:[(0,c.jsxs)(n.td,{children:[(0,c.jsx)(n.code,{children:"Promise.then"})," / ",(0,c.jsx)(n.code,{children:"async/await"})]}),(0,c.jsx)(n.td,{children:"\u2705 \u662F\uFF08React 18+\uFF09"}),(0,c.jsx)(n.td,{children:"\u81EA\u52A8\u6279\u5904\u7406"})]}),(0,c.jsxs)(n.tr,{children:[(0,c.jsxs)(n.td,{children:["\u539F\u751F DOM \u4E8B\u4EF6\uFF08\u5982 ",(0,c.jsx)(n.code,{children:"addEventListener"}),"\uFF09"]}),(0,c.jsx)(n.td,{children:"\u2705 \u662F\uFF08React 18+\uFF09"}),(0,c.jsx)(n.td,{children:"\u81EA\u52A8\u6279\u5904\u7406"})]}),(0,c.jsxs)(n.tr,{children:[(0,c.jsx)(n.td,{children:(0,c.jsx)(n.code,{children:"ReactDOM.flushSync(() => { ... })"})}),(0,c.jsx)(n.td,{children:"\u274C \u5426"}),(0,c.jsx)(n.td,{children:"\u5F3A\u5236\u540C\u6B65\u66F4\u65B0\uFF0C\u4E0D\u6279\u5904\u7406"})]})]})]}),"\n",(0,c.jsx)(n.h3,{id:"-\u793A\u4F8B\u5728-settimeout-\u4E2D\u66F4\u65B0\u591A\u4E2A\u72B6\u6001",children:"\u{1F9EA} \u793A\u4F8B\uFF1A\u5728 setTimeout \u4E2D\u66F4\u65B0\u591A\u4E2A\u72B6\u6001"}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"const handleClick = () => {\n  setTimeout(() =>

1 {\n    setCount(c => c + 1);\n    setFlag(f => !f);\n  }, 0);\n};\n// \u2192 \u4ECD\u7136\u53EA\u89E6\u53D1\u4E00\u6B21 re-render\uFF08React 18+\uFF09\n"})}),"\n",(0,c.jsx)(n.hr,{}),"\n",(0,c.jsx)(n.h2,{id:"-\u56DB\u7279\u6B8A\u60C5\u51B5\u5982\u4F55\u9000\u51FA\u6279\u5904\u7406",children:"\u2705 \u56DB\u3001\u7279\u6B8A\u60C5\u51B5\uFF1A\u5982\u4F55\u201C\u9000\u51FA\u201D\u6279\u5904\u7406\uFF1F"}),"\n",(0,c.jsxs)(n.p,{children:["\u5982\u679C\u4F60",(0,c.jsx)(n.strong,{children:"\u771F\u7684\u9700\u8981"}),"\u8BA9\u6BCF\u6B21 ",(0,c.jsx)(n.code,{children:"setState"})," \u90FD\u89E6\u53D1\u72EC\u7ACB\u6E32\u67D3\uFF08\u6781\u5C11\u89C1\uFF09\uFF0C\u53EF\u4EE5\u7528 ",(0,c.jsx)(n.code,{children:"flushSync"}),"\uFF1A"]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-jsx",children:"import { flushSync } from 'react-dom';\n\nconst handleClick = () => {\n  flushSync(() => {\n    setCount(c => c + 1); // \u7ACB\u5373\u89E6\u53D1\u4E00\u6B21 render\n  });\n  flushSync(() => {\n    setFlag(f => !f);     // \u518D\u89E6\u53D1\u4E00\u6B21 render\n  });\n};\n"})}),"\n",(0,c.jsxs)(n.blockquote,{children:["\n",(0,c.jsxs)(n.p,{children:["\u26A0\uFE0F \u8B66\u544A\uFF1A\u8FD9\u4F1A",(0,c.jsx)(n.strong,{children:"\u663E\u8457\u964D\u4F4E\u6027\u80FD"}),"\uFF0C\u901A\u5E38\u7528\u4E8E\u9700\u8981\u7ACB\u5373\u8BFB\u53D6 DOM \u5E03\u5C40\u7684\u573A\u666F\uFF08\u5982\u52A8\u753B\uFF09\u3002"]}),"\n"]}),"\n",(0,c.jsx)(n.hr,{}),"\n",(0,c.jsx)(n.h2,{id:"-\u4E94\u5E38\u89C1\u8BEF\u533A\u6F84\u6E05",children:"\u2705 \u4E94\u3001\u5E38\u89C1\u8BEF\u533A\u6F84\u6E05"}),"\n",(0,c.jsx)(n.h3,{id:"-\u8BEF\u533A-1\u6BCF\u4E2A-setstate-\u90FD\u4F1A\u89E6\u53D1\u4E00\u6B21-render",children:"\u274C \u8BEF\u533A 1\uFF1A\u201C\u6BCF\u4E2A setState \u90FD\u4F1A\u89E6\u53D1\u4E00\u6B21 render\u201D"}),"\n",(0,c.jsxs)(n.blockquote,{children:["\n",(0,c.jsxs)(n.p,{children:["\u2705 \u6B63\u786E\uFF1AReact \u4F1A",(0,c.jsx)(n.strong,{children:"\u5408\u5E76\u540C\u4E00\u8F6E\u66F4\u65B0\u4E2D\u7684\u6240\u6709 setState"}),"\uFF0C\u53EA render \u4E00\u6B21\u3002"]}),"\n"]}),"\n",(0,c.jsx)(n.h3,{id:"-\u8BEF\u533A-2usestate-\u662F\u72EC\u7ACB\u7684\u6240\u4EE5\u4F1A\u5206\u522B\u66F4\u65B0",children:"\u274C \u8BEF\u533A 2\uFF1A\u201CuseState \u662F\u72EC\u7ACB\u7684\uFF0C\u6240\u4EE5\u4F1A\u5206\u522B\u66F4\u65B0\u201D"}),"\n",(0,c.jsxs)(n.blockquote,{children:["\n",(0,c.jsxs)(n.p,{children:["\u2705 \u6B63\u786E\uFF1A\u867D\u7136\u6BCF\u4E2A ",(0,c.jsx)(n.code,{children:"useState"})," \u6709\u72EC\u7ACB\u7684\u72B6\u6001\u548C setter\uFF0C\u4F46 ",(0,c.jsx)(n.strong,{children:"React \u8C03\u5EA6\u5668\u4F1A\u7EDF\u4E00\u5904\u7406\u672C\u8F6E\u6240\u6709\u66F4\u65B0"}),"\u3002"]}),"\n"]}),"\n",(0,c.jsx)(n.h3,{id:"-\u8BEF\u533A-3usereducer-\u4E0D\u4F1A\u6279\u5904\u7406",children:"\u274C \u8BEF\u533A 3\uFF1A\u201CuseReducer \u4E0D\u4F1A\u6279\u5904\u7406\u201D"}),"\n",(0,c.jsxs)(n.blockquote,{children:["\n",(0,c.jsxs)(n.p,{children:["\u2705 \u6B63\u786E\uFF1A",(0,c.jsx)(n.code,{children:"useReducer"})," \u7684 dispatch \u540C\u6837\u53C2\u4E0E\u6279\u5904\u7406\uFF01"]}),"\n"]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"dispatch({ type: 'inc' });\ndispatch({ type: 'toggle' });\n// \u2192 \u53EA render \u4E00\u6B21\n"})}),"\n",(0,c.jsx)(n.hr,{}),"\n",(0,c.jsx)(n.h2,{id:"-\u603B\u7ED3",children:"\u2705 \u603B\u7ED3"}),"\n",(0,c.jsxs)(n.table,{children:[(0,c.jsx)(n.thead,{children:(0,c.jsxs)(n.tr,{children:[(0,c.jsx)(n.th,{children:"\u95EE\u9898"}),(0,c.jsx)(n.th,{children:"\u7B54\u6848"})]})}),(0,c.jsxs)(n.tbody,{children:[(0,c.jsxs)(n.tr,{children:[(0,c.jsxs)(n.td,{children:["\u591A\u4E2A ",(0,c.jsx)(n.code,{children:"useState"})," \u540C\u65F6\u66F4\u65B0\uFF0C\u4F1A render \u51E0\u6B21\uFF1F"]}),(0,c.jsxs)(n.td,{children:[(0,c.jsx)(n.strong,{children:"1 \u6B21"}),"\uFF08React 18+ \u81EA\u52A8\u6279\u5904\u7406\uFF09"]})]}),(0,c.jsxs)(n.tr,{children:[(0,c.jsx)(n.td,{children:"\u6E32\u67D3\u65F6\u7528\u7684\u72B6\u6001\u503C\u662F\u4EC0\u4E48\uFF1F"}),(0,c.jsx)(n.td,{children:(0,c.jsx)(n.strong,{children:"\u6240\u6709\u72B6\u6001\u7684\u6700\u65B0\u503C"})})]}),(0,c.jsxs)(n.tr,{children:[(0,c.jsx)(n.td,{children:"\u8FD9\u4E2A\u673A\u5236\u53EB\u4EC0\u4E48\uFF1F"}),(0,c.jsx)(n.td,{children:(0,c.jsx)(n.strong,{children:"Automatic Batching\uFF08\u81EA\u52A8\u6279\u5904\u7406\uFF09"})})]}),(0,c.jsxs)(n.tr,{children:[(0,c.jsx)(n.td,{children:"\u80FD\u5426\u5173\u95ED\u6279\u5904\u7406\uFF1F"}),(0,c.jsxs)(n.td,{children:["\u53EF\u4EE5\uFF0C\u7528 ",(0,c.jsx)(n.code,{children:"flushSync"}),"\uFF0C\u4F46",(0,c.jsx)(n.strong,{children:"\u4E0D\u63A8\u8350"})]})]}),(0,c.jsxs)(n.tr,{children:[(0,c.jsxs)(n.td,{children:[(0,c.jsx)(n.code,{children:"useReducer"})," \u662F\u5426\u540C\u6837\u6279\u5904\u7406\uFF1F"]}),(0,c.jsx)(n.td,{children:"\u2705 \u662F"})]})]})]}),"\n",(0,c.jsxs)(n.blockquote,{children:["\n",(0,c.jsxs)(n.p,{children:["\u6279\u5904\u7406\u6B63\u662F\u8FD9\u4E00\u7406\u5FF5\u7684\u4F53\u73B0\uFF1A\u65E0\u8BBA\u4F60\u8C03\u7528\u591A\u5C11\u6B2

11 ",(0,c.jsx)(n.code,{children:"setState"}),"\uFF0CReact \u53EA\u5173\u5FC3\u201C\u6700\u540E\u7684\u72B6\u6001\u201D\uFF0C\u5E76\u9AD8\u6548\u5730\u6E32\u67D3\u4E00\u6B21\u3002"]}),"\n"]})]})}function o(e={}){let{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,c.jsx)(n,{...e,children:(0,c.jsx)(a,{...e})}):a(e)}},28453(e,n,t){t.d(n,{R:()=>d,x:()=>l});var s=t(96540);let c={},r=s.createContext(c);function d(e){let n=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(c):e.components||c:d(e.components),s.createElement(r.Provider,{value:n},e.children)}}}]);