1"use strict";(self.webpackChunkcode_fictionist=self.webpackChunkcode_fictionist||[]).push([[654],{28453:(e,n,t)=>{t.d(n,{R:()=>a,x:()=>c});var s=t(96540);const r={},i=s.createContext(r);function a(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),s.createElement(i.Provider,{value:n},e.children)}},37190:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>o,contentTitle:()=>c,default:()=>h,frontMatter:()=>a,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"notes/Web_Dev/React/useState","title":"[React] useState","description":"Anatomy of useState","source":"@site/docs/notes/Web_Dev/React/02-useState.mdx","sourceDirName":"notes/Web_Dev/React","slug":"/notes/Web_Dev/React/useState","permalink":"/docs/notes/Web_Dev/React/useState","draft":false,"unlisted":false,"tags":[{"inline":true,"label":"React","permalink":"/docs/tags/react"},{"inline":true,"label":"useState","permalink":"/docs/tags/use-state"},{"inline":true,"label":"hook","permalink":"/docs/tags/hook"}],"version":"current","lastUpdatedAt":1766374113000,"sidebarPosition":2,"frontMatter":{"title":"[React] useState","sidebar_title":"[React] useState","tags":["React","useState","hook"],"keywords":["React","useState","hook"]},"sidebar":"notes","previous":{"title":"[React] Simple guide","permalink":"/docs/notes/Web_Dev/React/guide"},"next":{"title":"[React] useRef","permalink":"/docs/notes/Web_Dev/React/useRef"}}');var r=t(74848),i=t(28453);const a={title:"[React] useState",sidebar_title:"[React] useState",tags:["React","useState","hook"],keywords:["React","useState","hook"]},c=void 0,o={},d=[{value:"Anatomy of useState",id:"anatomy-of-usestate",level:2},{value:"Render and Commit",id:"render-and-commit",level:2},{value:"State as a Snapshot",id:"state-as-a-snapshot",level:3},{value:"Queueing a Series of State Updates",id:"queueing-a-series-of-state-updates",level:3},{value:"Updating Objects in State",id:"updating-objects-in-state",level:2},{value:"Updating Arrays in State",id:"updating-arrays-in-state",level:2},{value:"Adding to an array",id:"adding-to-an-array",level:3},{value:"Removing from an array",id:"removing-from-an-array",level:3},{value:"Replacing items in an array (map \u7684\u61c9\u7528)",id:"replacing-items-in-an-array-map-\u7684\u61c9\u7528",level:3},{value:"Inserting into an array",id:"inserting-into-an-array",level:3},{value:"Sharing State Between Components",id:"sharing-state-between-components",level:2}];function l(e){const n={admonition:"admonition",blockquote:"blockquote",br:"br",code:"code",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h2,{id:"anatomy-of-usestate",children:"Anatomy of useState"}),"\n",(0,r.jsxs)(n.p,{children:["state (\u72c0\u614b) \u662f React \u4e2d\u4e00\u500b\u91cd\u8981\u7684\u6982\u5ff5\uff0c\u5b83\u5141\u8a31\u7d44\u4ef6\u5728\u5176\u751f\u547d\u9031\u671f\u5167\u5132\u5b58\u548c\u7ba1\u7406\u6578\u64da\u3002",(0,r.jsx)(n.br,{}),"\n","\u800c ",(0,r.jsx)(n.code,{children:"useState"})," \u5c31\u662f React \u7528\u4f86\u505a\u72c0\u614b\u7ba1\u7406\u7684 hook\uff0c\u5b83\u7684\u57fa\u672c\u8a9e\u6cd5\u5982\u4e0b\uff1a"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",children:"const [index, setIndex] = useState(0);\n"})}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"index"})," \u662f\u72c0\u614b\u7684\u7576\u524d\u503c\uff0c",(0,r.jsx)(n.code,{children:"setIndex"})," \u662f\u7528\u4f86\u66f4\u65b0\u9019\u500b\u72c0\u614b\u7684\u51fd\u5f0f\u3002",(0,r.jsx)(n.code,{children:"useState()"})," \u88e1\u7684\u503c\u8868\u793a\u72c0\u614b\u300c\u521d\u59cb\u300d\u7684\u503c\u3002",(0,r.jsx)(n.br,{}),"\n","\u770b\u4e00\u4e0b\u5b98\u65b9\u4f8b\u5b50\u6703\u66f4\u80fd\u611f\u53d7 ",(0,r.jsx)(n.code,{children:"useState"})," \u7684\u61c9\u7528\u60c5\u666f\uff1a"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",children:"export default function Gallery() {\n const [index, setIndex] = useState(0);\n const [showMore, setShowMore] = useState(false);
1\n\n function handleNextClick() {\n setIndex(index + 1);\n }\n\n function handleMoreClick() {\n setShowMore(!showMore);\n }\n\n let sculpture = sculptureList[index];\n return (\n <>\n <button onClick={handleNextClick}>\n Next\n </button>\n <h2>\n <i>{sculpture.name} </i> \n by {sculpture.artist}\n </h2>\n <h3> \n ({index + 1} of {sculptureList.length})\n </h3>\n <button onClick={handleMoreClick}>\n {showMore ? 'Hide' : 'Show'} details\n </button>\n {showMore && <p>{sculpture.description}</p>}\n <img \n src={sculpture.url} \n alt={sculpture.alt}\n />\n </>\n );\n}\n"})}),"\n",(0,r.jsxs)(n.p,{children:["\u5728\u5b98\u65b9\u7684\u4f8b\u5b50\u4e2d\uff0c\u4ed6\u7528\u4e86\u5169\u500b ",(0,r.jsx)(n.code,{children:"useState"}),"\uff0c\u5206\u5225\u7ba1\u7406\u5169\u500b\u72c0\u614b\uff1a"]}),"\n",(0,r.jsxs)(n.ol,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"index"}),"\uff1a\u7528\u4f86\u8ffd\u8e64\u7576\u524d\u986f\u793a\u7684\u8cc7\u6599\u5728 ",(0,r.jsx)(n.code,{children:"sculptureList"})," \u4e2d\u7684\u4f4d\u5b50\u3002"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"showMore"}),"\uff1a\u7528\u4f86\u63a7\u5236\u662f\u5426\u986f\u793a\u66f4\u591a\u7d30\u7bc0\u3002",(0,r.jsx)(n.br,{}),"\n","\u6240\u4ee5\u7c21\u7c21\u55ae\u55ae\u7684\u4e00\u500b ",(0,r.jsx)(n.code,{children:"useState"})," \u5176\u5be6\u5c31\u53ef\u4ee5\u505a\u4e00\u500b\u6709\u57fa\u672c\u4e92\u52d5\u6027\u7684 component \u4e86\u3002"]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"render-and-commit",children:"Render and Commit"}),"\n",(0,r.jsx)(n.p,{children:"\u9019\u88e1\u8981\u63d0\u63d0\u6e32\u67d3\u8207\u63d0\u4ea4\uff0c\u6703\u5728\u9019\u88e1\u63d0\u7684\u539f\u56e0\u662f\u56e0\u70ba React \u6703\u6e32\u67d3\u7684\u60c5\u5f62\u53ea\u6709\u5169\u7a2e\uff1a"}),"\n",(0,r.jsxs)(n.ol,{children:["\n",(0,r.jsx)(n.li,{children:"component \u7684\u521d\u6b21\u6e32\u67d3\u3002\u9019\u6c92\u4ec0\u9ebc\u597d\u8aaa\u7684\uff0c\u6c92\u6709\u521d\u6b21\u6e32\u67d3\u662f\u8981\u770b\u4ec0\u9ebc\u756b\u9762\u3002"}),"\n",(0,r.jsxs)(n.li,{children:["component \u7684 state \u66f4\u65b0\u6703\u5f15\u767c re-render\u3002\u9019\u5c31\u8ddf ",(0,r.jsx)(n.code,{children:"useState"})," \u6709\u95dc\u4e86\uff0c\u8981\u8a18\u5f97\uff0c",(0,r.jsx)(n.code,{children:"useState"})," \u5728 React \u4e2d\u6700\u5927\u7684\u4f5c\u7528\u5c31\u662f\u7ba1\u7406\u7d44\u4ef6\u5167\u90e8\u7684\u72c0\u614b\u3002"]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"React \u9047\u5230\u9019\u7a2e\u6709\u72c0\u614b\u66f4\u65b0\u6216\u662f\u521d\u59cb\u6e32\u67d3\u6642\u90fd\u6703 follow \u9019\u6a23\u4e00\u500b Render \u6b65\u9a5f\uff1a"}),"\n",(0,r.jsxs)(n.ol,{children:["\n",(0,r.jsx)(n.li,{children:"\u89f8\u767c\uff1a\u82f1\u6587\u53eb Trigger a render\uff0c\u5f9e\u82f1\u6587\u770b\u6bd4\u8f03\u597d\u7406\u89e3\uff0c\u5c31\u662f\u8b93 React \u77e5\u9053\u4f60\u6b63\u6253\u7b97\u8981 render \u4e00\u500b component\u3002"}),"\n",(0,r.jsx)(n.li,{children:"\u6e32\u67d3\uff1a\u5982\u679c\u662f\u521d\u6b21\u6e32\u67d3\uff0cReact \u6703\u5efa\u7acb\u6574\u68f5 Virtual DOM\u3002\u4f46\u5982\u679c\u662f re-render\uff0cReact \u6703\u5148\u6bd4\u8f03\u65b0\u820a Virtual DOM\uff0c\u53ea\u627e\u51fa\u6539\u8b8a\u7684\u90e8\u5206\u53bb\u8a08\u7b97\u3002"}),"\n",(0,r.jsx)(n.li,{children:"\u63d0\u4ea4 (commit)\uff1a\u9019\u500b\u6b65\u9a5f\u6703\u628a\u8a08\u7b97\u51fa\u4f86\u7684 DOM \u7bc0\u9ede\u66f4\u65b0\u5230\u700f\u89bd\u5668\u4e0a\uff0c\u9019\u6a23\u4f7f\u7528\u8005\u5c31\u80fd\u770b\u5230\u6700\u65b0\u7684\u756b\u9762\u3002"}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"state-as-a-snapshot",children:"State as a Snapshot"}),"\n",(0,r.jsxs)(n.p,{children:["React \u5b98\u65b9\u6587\u4ef6\u628a\u9019\u6bb5\u505a\u6210\u8ddf Render and Commit \u4e00\u6a23\u5c64\u7d1a\u7684\u4e00\u7bc7\u6587\u7ae0\uff0c\u4f46\u6211\u81ea\u5df1\u89ba\u5f97\u5148\u4e86\u89e3\u5b8c Render \u548c Commit \u66f4\u80fd\u61c2 State as a Snapshot \u9019\u53e5\u8a71\u7684\u542b\u91d1\u91cf\u3002",(0,r.jsx)(n.br,{}
1),"\n","\u524d\u9762\u63d0\u5230\u4e00\u6b21 Render \u6703\u6709\u4e09\u500b\u6b65\u9a5f\uff0c\u57fa\u672c\u4e0a\u9019\u5c31\u662f\u4e00\u6b21\u72c0\u614b\u66f4\u65b0\u6703\u5f15\u767c\u7684\u6d41\u7a0b\u3002\u6ce8\u610f\uff0c\u6240\u8b02\u300c\u4e00\u6b21\u72c0\u614b\u66f4\u65b0\u300d\uff0c\u6307\u7684\u662f\u5728\u9019\u6b21 Render \u4e2d\uff0c\u76f4\u5230\u9032\u5165\u4e0b\u4e00\u6b21 Render \u4e4b\u524d\uff0c\u7d44\u4ef6\u5167\u90e8\u6703\u8a18\u4f4f\u7576\u4e0b\u7684 state\uff0c\u4e5f\u5c31\u662f\u9019\u500b Render \u7684 state \u662f\u56fa\u5b9a\u4e0d\u8b8a\u7684\u3002\u7c21\u55ae\u4f86\u8b1b\uff0c\u4e00\u6b21 Render \u5c31\u662f\u4e00\u5f35 state \u7684 snapshot\u3002"]}),"\n",(0,r.jsx)(n.p,{children:"\u5b98\u65b9\u8209\u4e86\u4e00\u500b\u4f8b\u5b50\uff1a"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",children:"export default function Counter() {\n const [number, setNumber] = useState(0);\n\n return (\n <>\n <h1>{number}</h1>\n <button onClick={() => {\n setNumber(number + 1);\n setNumber(number + 1);\n setNumber(number + 1);\n }}>+3</button>\n </>\n )\n}\n"})}),"\n",(0,r.jsxs)(n.p,{children:["\u4e5f\u8a31\u6703\u9810\u671f\u9ede\u64ca\u6309\u9215\u5f8c\uff0c\u6578\u5b57\u6703\u52a0 3\uff0c\u4f46\u5be6\u969b\u4e0a\u53ea\u6703\u52a0 1\u3002\u9019\u662f\u56e0\u70ba\u5728\u4e00\u6b21 Render \u4e2d\uff0c",(0,r.jsx)(n.code,{children:"number"})," \u7684\u503c\u662f\u56fa\u5b9a\u7684\uff0c\u7576\u4f60\u9ede\u64ca\u6309\u9215\u6642\uff0c",(0,r.jsx)(n.code,{children:"setNumber(number + 1)"})," \u6703\u88ab\u547c\u53eb\u4e09\u6b21\uff0c\u4f46\u6bcf\u6b21\u90fd\u4f7f\u7528\u7684\u662f\u540c\u4e00\u500b ",(0,r.jsx)(n.code,{children:"number"})," \u503c\uff08\u521d\u59cb\u503c\u70ba 0\uff09\uff0c\u6240\u4ee5\u6700\u7d42\u53ea\u6703\u66f4\u65b0\u4e00\u6b21\u72c0\u614b\u3002"]}),"\n",(0,r.jsx)(n.p,{children:"\u540c\u7406\uff0c\u9019\u88e1\u5b98\u65b9\u6709\u4e00\u500b\u4f8b\u5b50\uff0c\u6211\u89ba\u5f97\u5bb9\u6613\u5728\u5c0d React \u4e0d\u719f\u6642 debug \u7522\u751f\u8aa4\u89e3\uff1a"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",children:"export default function Counter() {\n const [number, setNumber] = useState(0);\n\n return (\n <>\n <h1>{number}</h1>\n <button onClick={() => {\n setNumber(number + 5);\n alert(number);\n }}>+5</button>\n </>\n )\n}\n"})}),"\n",(0,r.jsxs)(n.p,{children:["\u9019\u88e1\u6709\u5169\u500b\u5730\u65b9\u6703\u5370\u51fa ",(0,r.jsx)(n.code,{children:"number"})," \u7684\u503c\uff0c\u4e00\u500b\u662f ",(0,r.jsx)(n.code,{children:"h1"}),"\uff0c\u4e00\u500b\u662f ",(0,r.jsx)(n.code,{children:"alert"}),"\u3002",(0,r.jsx)(n.br,{}),"\n","\u6709\u8da3\u7684\u662f\uff0c\u7576\u9ede\u64ca\u6309\u9215\u5f8c\uff0c",(0,r.jsx)(n.code,{children:"h1"})," \u6703\u986f\u793a ",(0,r.jsx)(n.code,{children:"5"}),"\uff0c\u800c ",(0,r.jsx)(n.code,{children:"alert"})," \u6703\u986f\u793a ",(0,r.jsx)(n.code,{children:"0"}),"\u3002",(0,r.jsx)(n.br,{}),"\n","\u9019\u662f\u56e0\u70ba ",(0,r.jsx)(n.code,{children:"h1"})," \u986f\u793a\u7684\u662f\u300c\u4e0b\u4e00\u500b render \u7684\u7d50\u679c\u300d\uff0c\u56e0\u70ba\u5b83\u6703\u5728 React \u57f7\u884c\u5b8c render + commit \u6d41\u7a0b\u5f8c\u66f4\u65b0\u756b\u9762\u3002\n",(0,r.jsx)(n.code,{children:"alert(number)"})," \u62ff\u5230\u7684\u5247\u662f\u300c\u9019\u4e00\u8f2a render \u7684\u5feb\u7167\uff08snapshot\uff09\u300d\uff0c\u4e5f\u5c31\u662f\u5c1a\u672a\u9032\u5165\u4e0b\u4e00\u500b render \u524d\u7684\u72c0\u614b\u3002"]}),"\n",(0,r.jsxs)(n.p,{children:["\u6240\u4ee5\u9019\u4e5f\u8aaa\u660e\u4e86\u4eca\u5929\u5982\u679c\u70ba\u4e86 debug \u800c\u60f3\u8981\u5728 event handler \u88e1\u52a0 ",(0,r.jsx)(n.code,{children:"console.log"})," \u4f86\u89c0\u5bdf state \u7684\u8b8a\u5316\uff0c\u5c31\u6703\u9047\u5230\u4e0a\u8ff0\u9019\u6a23 state \u660e\u660e\u5df2\u7d93\u88ab setState \u6539\u8b8a\u4f46 console \u4ecd\u672a\u8b8a\u7684\u60c5\u6cc1\uff0c\u9019\u6642\u53ef\u80fd\u5c31\u6703\u958b\u59cb\u61f7\u7591\u4eba\u751f\uff0c\u4f46\u5176\u5be6\u554f\u984c\u53ea\u662f\u56e0\u70ba\u9019\u500b console \u8ddf setState \u662f\u6d3b\u5728\u540c\u4e00\u500b Render cycle \u4e5f\u5c31\u662f\u540c\u4e00\u500b state snapshot \u4e2d\u3002"]}),"\n",(0,r.jsxs)(n.admonition,{type:"tip",children:[(0,r.jsx)(n.p,{children:"\u59cb\u7d42\u7262\u8a18 React \u5b98\u65b9\u8aaa\u7684\uff1a"}),(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsx)(n.p,{children:"React waits until all code in the event handlers has run before processing your state updates."}),"\n"]})]}),"\n",(0,r.jsx)(n.h3,{id:"queueing-a-series-of-state-updates",children:"Queueing a Series of State Updates"}),"\n",(0,r.jsxs)(n.p,{children:["\u5148\u4f86\u770b\u770b\u5b98\u65b9\u7bc4\u4f8b\uff0c\u628a\u525b\u525b\u4e0a\u9762\u7684 code \u6539\u6210\u4e0b\u9762\u9
1019\u6a23\uff0c\u4e3b\u8981\u662f\u628a ",(0,r.jsx)(n.code,{children:"setNumber(number + 1)"})," \u6539\u6210 ",(0,r.jsx)(n.code,{children:"setNumber(n => n + 1)"}),"\uff1a"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",children:"export default function Counter() {\n const [number, setNumber] = useState(0);\n\n return (\n <>\n <h1>{number}</h1>\n <button onClick={() => {\n setNumber(n => n + 1);\n setNumber(n => n + 1);\n setNumber(n => n + 1);\n }}>+3</button>\n </>\n )\n}\n"})}),"\n",(0,r.jsxs)(n.p,{children:["\u5c31\u6703\u767c\u73fe\u9ede\u64ca\u6309\u9215\u5f8c\uff0c\u6578\u5b57\u771f\u7684\u52a0 3 \u4e86\u3002",(0,r.jsx)(n.br,{}),"\n","\u9019\u7a2e\u5beb\u6cd5\uff0cReact \u5b98\u65b9\u53eb\u5b83 updater function\u3002\u672c\u8cea\u4e0a\uff0cReact \u6bcf\u4e00\u6b21 setState \u90fd\u662f\u6392\u5165\u4e00\u500b\u4f47\u5217\u5728\u672c\u6b21 Render cycle \u4e2d\uff0c\u5728\u9019\u88e1\u900f\u904e\u628a \u628a ",(0,r.jsx)(n.code,{children:"setNumber(number + 1)"})," \u6539\u6210 ",(0,r.jsx)(n.code,{children:"setNumber(n => n + 1)"}),"\uff0c\u5c31\u6703\u8b93\u5f8c\u9762\u7684 setState \u5be6\u969b\u62ff\u5230\u7684\u90fd\u662f\u524d\u4e00\u500b setState \u66f4\u65b0\u7684\u503c\uff0c\u800c\u4e0d\u662f\u8ddf ",(0,r.jsx)(n.code,{children:"setNumber(number + 1)"})," \u4e00\u6a23\u62ff\u5230\u540c\u4e00\u500b\u5feb\u7167\uff08snapshot\uff09\u3002"]}),"\n",(0,r.jsx)(n.h2,{id:"updating-objects-in-state",children:"Updating Objects in State"}),"\n",(0,r.jsxs)(n.p,{children:["\u57fa\u672c\u4e0a\u5c31\u9084\u662f\u900f\u904e ",(0,r.jsx)(n.code,{children:"setState"})," \u4f86\u66f4\u65b0\u72c0\u614b\u3002"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",metastring:'title="object"',children:"export default function MovingDot() {\n const [position, setPosition] = useState({\n x: 0,\n y: 0\n });\n return (\n <div\n onPointerMove={e => {\n setPosition({\n x: e.clientX,\n y: e.clientY\n });\n }}\n style={{\n position: 'relative',\n width: '100vw',\n height: '100vh',\n }}>\n <div style={{\n position: 'absolute',\n backgroundColor: 'red',\n borderRadius: '50%',\n transform: `translate(${position.x}px, ${position.y}px)`,\n left: -10,\n top: -10,\n width: 20,\n height: 20,\n }} />\n </div>\n );\n}\n"})}),"\n",(0,r.jsx)(n.h2,{id:"updating-arrays-in-state",children:"Updating Arrays in State"}),"\n",(0,r.jsxs)(n.p,{children:["\u8ddf\u66f4\u65b0\u7269\u4ef6\u4e00\u6a23\uff0c\u9084\u662f\u900f\u904e ",(0,r.jsx)(n.code,{children:"setState"})," \u4f86\u66f4\u65b0\u72c0\u614b\u3002",(0,r.jsx)(n.br,{}),"\n","\u4f46 React \u7279\u5225\u5217\u4e86\u4e00\u5f35\u8868\u8aaa\u660e\u5728\u64cd\u4f5c array \u7d50\u69cb\u7684 state \u6642\u6709\u4e00\u4e9b\u5e38\u7528\u7684 array method \u61c9\u76e1\u91cf\u907f\u514d\u4f7f\u7528\u3002"]}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"\u64cd\u4f5c\u985e\u578b"}),(0,r.jsx)(n.th,{children:"\u907f\u514d\u4f7f\u7528\uff08\u6703\u6539\u8b8a\u539f\u59cb\u9663\u5217\uff09"}),(0,r.jsx)(n.th,{children:"\u63a8\u85a6\u4f7f\u7528\uff08\u6703\u56de\u50b3\u4e00\u500b\u65b0\u9663\u5217\uff09"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"\u65b0\u589e\u5143\u7d20"}),(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:"push"}),"\u3001",(0,r.jsx)(n.code,{children:"unshift"})]}),(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:"concat"}),"\u3001",(0,r.jsx)(n.code,{children:"[...arr]"})," \u5c55\u958b\u8a9e\u6cd5"]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"\u522a\u9664\u5143\u7d20"}),(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:"pop"}),"\u3001",(0,r.jsx)(n.code,{children:"shift"}),"\u3001",(0,r.jsx)(n.code,{children:"splice"})]}),(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:"filter"}),"\u3001",(0,r.jsx)(n.code,{children:"slice"})]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"\u66ff\u63db\u5143\u7d20"}),(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:"splice"}),"\u3001",(0,r.jsx)(n.code,{children:"arr[i] = ..."})," \u8ce6\u503c"]}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"map"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"\u6392\u5e8f"}),(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:"reverse"}),"\u3001",(0,r.jsx)(n.code,{children:"sort"})]}),(0,r.jsx)(n.td,{children:"\u5148\u5c07\u9663\u5217\u8907\u88fd\u4e00\u4efd\u5f8c\u518d\u8655\u7406"})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"adding-to-an-array",children:"Adding to an array"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",children:"setArtists( // Replace the state\n [ // with a new array\n ...artists, // that contains all the old items\n { id: nextId++, name: name } // and one new item at the end\n ]\n);\n"})}),"\n",(0,r.jsx)(n.h3,{id:"removing-from-an-array",children:"Removing from an array"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",children:"setArtists(\n artists.filter(a => a.id !== artist.id)\n);\n"})}),"\n",(0,r.jsx)(n.h3,{id:"replacing-items-in-an-array-map-\u7684\u61c9\u7528",children:"Replacing items in an array (map \u7684\u61c9\u7528)"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",children:"let initialCounters = [\n 0, 0, 0\n];\n\nexport default function CounterList() {\n const [counters, setCounters] = useState(\n initialCounters\n );\n\n function handleIncrementClick(index) {\n const nextCounters = counters.map((c, i) => {\n if (i === index) {\n // Increment the clicked counter\n return c + 1;\n } else {\n // The rest haven't changed\n return c;\n }\n });\n setCounters(nextCounters);\n }\n\n return (\n <ul>\n {counters.map((counter, i) => (\n <li key={i}>\n {counter}\n <button onClick={() => {\n handleIncrementClick(i);\n }}>+1</button>\n </li>\n ))}\n </ul>\n );\n}\n}\n"})}),"\n",(0,r.jsx)(n.h3,{id:"inserting-into-an-array",children:"Inserting into an array"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",children:"let nextId = 3;
1\nconst initialArtists = [\n { id: 0, name: 'Marta Colvin Andrade' },\n { id: 1, name: 'Lamidi Olonade Fakeye'},\n { id: 2, name: 'Louise Nevelson'},\n];\n\nexport default function List() {\n const [name, setName] = useState('');\n const [artists, setArtists] = useState(\n initialArtists\n );\n\n function handleClick() {\n const insertAt = 1; // Could be any index\n const nextArtists = [\n // Items before the insertion point:\n ...artists.slice(0, insertAt),\n // New item:\n { id: nextId++, name: name },\n // Items after the insertion point:\n ...artists.slice(insertAt)\n ];\n setArtists(nextArtists);\n setName('');\n }\n\n return (\n <>\n <h1>Inspiring sculptors:</h1>\n <input\n value={name}\n onChange={e => setName(e.target.value)}\n />\n <button onClick={handleClick}>\n Insert\n </button>\n <ul>\n {artists.map(artist => (\n <li key={artist.id}>{artist.name}</li>\n ))}\n </ul>\n </>\n );\n}\n"})}),"\n",(0,r.jsx)(n.admonition,{type:"tip",children:(0,r.jsxs)(n.p,{children:["\u53cd\u6b63\u91cd\u9ede\u5c31\u662f\u300c\u4e0d\u8981\u52d5\u5230\u539f array\u300d\uff0c\u6240\u4ee5\u5118\u91cf\u4f7f\u7528\u90a3\u4e9b\u4e0d\u6703\u6539\u8b8a\u539f\u59cb\u9663\u5217\u7684 array method\u3002",(0,r.jsx)(n.br,{}),"\n","\u90a3\u5982\u679c\u50cf ",(0,r.jsx)(n.code,{children:"sort"})," or ",(0,r.jsx)(n.code,{children:"reverse"})," \u9019\u4e9b\u6703\u6539\u8b8a\u539f\u59cb\u9663\u5217\u7684 method\uff0cReact \u5b98\u65b9\u5efa\u8b70\u5148\u8907\u88fd\u4e00\u4efd\u9663\u5217\u518d\u9032\u884c\u64cd\u4f5c\u3002"]})}),"\n",(0,r.jsx)(n.h2,{id:"sharing-state-between-components",children:"Sharing State Between Components"}),"\n",(0,r.jsx)(n.p,{children:"\u5176\u5be6\u7c21\u55ae\u8b1b\u5c31\u662f\u628a state \u4ea4\u7d66\u5171\u901a\u7236\u5c64\u7ba1\u7406\u3002"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",children:'export default function Accordion() {\n const [activeIndex, setActiveIndex] = useState(0);\n return (\n <>\n <h2>Almaty, Kazakhstan</h2>\n <Panel\n title="About"\n isActive={activeIndex === 0}\n onShow={() => setActiveIndex(0)}\n >\n With a population of about 2 million, Almaty is Kazakhstan\'s largest city. From 1929 to 1997, it was its capital city.\n </Panel>\n <Panel\n title="Etymology"\n isActive={activeIndex === 1}\n onShow={() => setActiveIndex(1)}\n >\n The name comes from <span lang="kk-KZ">\u0430\u043b\u043c\u0430</span>, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild <i lang="la">Malus sieversii</i> is considered a likely candidate for the ancestor of the modern domestic apple.\n </Panel>\n </>\n );\n}\n\nfunction Panel({\n title,\n children,\n isActive,\n onShow\n}) {\n return (\n <section className="panel">\n <h3>{title}</h3>\n {isActive ? (\n <p>{children}</p>\n ) : (\n <button onClick={onShow}>\n Show\n </button>\n )}\n </section>\n );\n}\n'})})]})}function h(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.