Count: {count}

); } `})}),` `,(0,n.jsx)(e.p,{children:"\u6D4F\u89C8\u5668\u5B9E\u65F6\u54CD\u5E94\u6548\u679C\u5C55\u793A\uFF1A"}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:"http://eddiehuang.oss-cn-guangzhou.aliyuncs.com/images/useState.gif",alt:"useState"})}),` `,(0,n.jsxs)(e.p,{children:["\u5728\u4E0A\u9762\u7684\u793A\u4F8B\u4E2D\uFF0C",(0,n.jsx)(e.code,{children:"useState(0)"})," \u8868\u793A\u521D\u59CB\u72B6\u6001\u4E3A 0\uFF0C\u8FD4\u56DE\u7684\u6570\u7EC4\u7684\u7B2C\u4E00\u4E2A\u5143\u7D20 ",(0,n.jsx)(e.code,{children:"count"})," \u662F\u5F53\u524D\u72B6\u6001\u7684\u503C\uFF0C\u7B2C\u4E8C\u4E2A\u5143\u7D20 ",(0,n.jsx)(e.code,{children:"setCount"})," \u662F\u4E00\u4E2A\u7528\u4E8E\u66F4\u65B0\u72B6\u6001\u7684\u51FD\u6570\u3002\u901A\u8FC7\u8C03\u7528 ",(0,n.jsx)(e.code,{children:"setCount"})," \u51FD\u6570\uFF0C\u4F60\u53EF\u4EE5\u66F4\u65B0 ",(0,n.jsx)(e.code,{children:"count"})," \u7684\u503C\u3002\u5728\u51FD\u6570\u5F0F\u66F4\u65B0\u7684\u60C5\u51B5\u4E0B\uFF0C\u4F60\u8FD8\u53EF\u4EE5\u4F20\u9012\u4E00\u4E2A\u51FD\u6570\uFF0C\u4EE5\u4FBF\u57FA\u4E8E\u5148\u524D\u7684\u72B6\u6001\u8FDB\u884C\u66F4\u65B0\uFF0C\u907F\u514D\u51FA\u73B0\u56E0\u5F02\u6B65\u66F4\u65B0\u800C\u5BFC\u81F4\u7684\u95EE\u9898\u3002"]}),` `,(0,n.jsxs)(e.p,{children:["\u8BF7\u6CE8\u610F\uFF0C\u6BCF\u4E2A ",(0,n.jsx)(e.code,{children:"useState"})," \u8C03\u7528\u90FD\u4F1A\u521B\u5EFA\u4E00\u4E2A\u72EC\u7ACB\u7684\u72B6\u6001\u53D8\u91CF\uFF0C\u5B83\u4E0E\u7279\u5B9A\u7684\u7EC4\u4EF6\u5B9E\u4F8B\u5173\u8054\u3002\u6240\u4EE5\u4F60\u53EF\u4EE5\u5728\u7EC4\u4EF6\u4E2D\u591A\u6B21\u4F7F\u7528\u5B83\u6765\u7BA1\u7406\u4E0D\u540C\u7684\u72B6\u6001\u3002"]}),` `,(0,n.jsx)(e.h3,{children:"\u4E0E\u666E\u901A\u53D8\u91CF\u58F0\u660E\u7684\u533A\u522B"}),` `,(0,n.jsxs)(e.p,{children:["\u4E00\u4E9B\u521D\u5B66\u8005\uFF08\u6BD4\u5982\u82EF\u4EBA\uFF09\u6700\u5F00\u59CB\u4E00\u76F4\u4E0D\u80FD\u7406\u89E3",(0,n.jsx)(e.code,{children:"useState"})," \u548C\u666E\u901A\u53D8\u91CF\u58F0\u660E\u7684\u533A\u522B\uFF0C\u611F\u89C9\u4F7F\u7528\u8FD9\u4E2A",(0,n.jsx)(e.code,{children:"Hook"}),"\u597D\u50CF\u6CA1\u6709\u4EC0\u4E48\u5FC5\u8981\u3002\u5B9E\u9645\u4E0A\u5B83\u4EEC\u5728",(0,n.jsx)(e.code,{children:"React"}),"\u51FD\u6570\u7EC4\u4EF6\u4E2D\u7684\u4F7F\u7528\u8FD8\u662F\u5F88\u4E0D\u540C\u7684\uFF0C\u4E3B\u8981\u662F\u56E0\u4E3A ",(0,n.jsx)(e.code,{children:"useState"})," \u662F\u7528\u6765\u7BA1\u7406\u7EC4\u4EF6\u72B6\u6001\u7684\u7279\u6B8A",(0,n.jsx)(e.code,{children:"Hook"}),"\u3002\u4E0B\u9762\u662F\u5B83\u4EEC\u4E4B\u95F4\u7684\u4E00\u4E9B\u4E3B\u8981\u533A\u522B\uFF1A"]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"\u89E6\u53D1\u91CD\u65B0\u6E32\u67D3\uFF1A"})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["\u5F53\u4F7F\u7528",(0,n.jsx)(e.code,{children:"useState"}),"\u6765\u58F0\u660E\u72B6\u6001\u5E76\u901A\u8FC7\u5BF9\u5E94\u7684\u66F4\u65B0\u51FD\u6570\u4FEE\u6539\u72B6\u6001\u65F6\uFF0C",(0,n.jsx)(e.code,{children:"React"}),"\u4F1A\u81EA\u52A8\u8BC6\u522B\u72B6\u6001\u53D8\u5316\uFF0C\u5E76\u91CD\u65B0\u6E32\u67D3\u7EC4\u4EF6\uFF0C\u4EE5\u53CD\u6620\u72B6\u6001\u7684\u53D8\u5316\u3002\u8FD9\u662F",(0,n.jsx)(e.code,{children:"useState"}),"\u5185\u90E8\u7684\u7279\u6027\uFF0C\u4F7F\u5F97\u7EC4\u4EF6\u72B6\u6001\u7684\u66F4\u65B0\u4E0E\u91CD\u65B0\u6E32\u67D3\u53D8\u5F97\u65E0\u7F1D\u8FDE\u63A5\u3002"]}),` `,(0,n.jsxs)(e.li,{children:["\u5728\u666E\u901A\u53D8\u91CF\u58F0\u660E\u4E2D\uFF0C\u5373\u4F7F\u53D8\u91CF\u7684\u503C\u53D1\u751F\u4E86\u53D8\u5316\uFF0C",(0,n.jsx)(e.code,{children:"React"}),"\u5E76\u4E0D\u4F1A\u81EA\u52A8\u89E6\u53D1\u7EC4\u4EF6\u7684\u91CD\u65B0\u6E32\u67D3\u3002\u4F60\u9700\u8981\u624B\u52A8\u8C03\u7528",(0,n.jsx)(e.code,{children:"setState"}),"\u6216\u5176\u4ED6\u89E6\u53D1\u91CD\u65B0\u6E32\u67D3\u7684\u65B9\u6CD5\u6765\u901A\u77E5 React\uFF0C\u8BA9\u5B83\u77E5\u9053\u7EC4\u4EF6\u9700\u8981\u91CD\u65B0\u6E32\u67D3\u4EE5\u53CD\u6620\u53D8\u91CF\u7684\u53D8\u5316\u3002"]}),` `]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"React \u7684\u72B6\u6001\u66F4\u65B0\u673A\u5236\uFF1A"})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["\u5F53\u4F7F\u7528",(0,n.jsx)(e.code,{children:"useState"}),"\u58F0\u660E\u72B6\u6001\u5E76\u66F4\u65B0\u72B6\u6001\u65F6\uFF0CReact \u4F1A\u6839\u636E\u72B6\u6001\u7684\u53D8\u5316\uFF0C\u4EE5\u6700\u4F18\u7684\u65B9\u5F0F\u6279\u91CF\u66F4\u65B0\u7EC4\u4EF6\uFF0C\u4EE5\u63D0\u9AD8\u6027\u80FD\u3002"]}),` `,(0,n.jsxs)(e.li,{children:["\u5728\u666E\u901A\u53D8\u91CF\u58F0\u660E\u4E2D\uFF0C\u5373\u4F7F\u66F4\u65B0\u4E86\u591A\u4E2A\u53D8\u91CF\uFF0CReact \u5E76\u4E0D\u4F1A\u50CF ",(0,n.jsx)(e.code,{children:"useState"})," \u90A3\u6837\u8FDB\u884C\u6279\u91CF\u66F4\u65B0\uFF0C\u53EF\u80FD\u4F1A\u5BFC\u81F4\u4E0D\u5FC5\u8981\u7684\u6027\u80FD\u5F00\u9500\u3002"]}),` `]}),` `]}),` `]}),` `,(0,n.jsxs)(e.p,{children:["\u603B\u7684\u6765\u8BF4\uFF0C",(0,n.jsx)(e.code,{children:"useState"}),"\u662F\u4E13\u95E8\u4E3A",(0,n.jsx)(e.code,{children:"React"}),"\u51FD\u6570\u7EC4\u4EF6\u63D0\u4F9B\u7684\u72B6\u6001\u7BA1\u7406\u673A\u5236\uFF0C\u5177\u6709\u81EA\u52A8\u89E6\u53D1\u91CD\u65B0\u6E32\u67D3\u3001\u72B6\u6001\u6301\u4E45\u6027\u548C\u4F18\u5316\u7684\u80FD\u529B\u3002\u666E\u901A\u53D8\u91CF\u58F0\u660E\u5219\u66F4\u9002\u5408\u4E8E\u4E00\u822C\u7684",(0,n.jsx)(e.code,{children:"JavaScript"}),"\u903B\u8F91\uFF0C\u4F46\u5728",(0,n.jsx)(e.code,{children:"React"}),"\u7EC4\u4EF6\u4E2D\u53EF\u80FD\u9700\u8981\u66F4\u591A\u7684\u624B\u52A8\u64CD\u4F5C\u6765\u7BA1\u7406\u72B6\u6001\u548C\u66F4\u65B0\u3002"]}),` `,(0,n.jsx)(e.h2,{children:"2. useEffect - \u526F\u4F5C\u7528\u7BA1\u7406"}),` `,(0,n.jsx)(e.h3,{children:"\u51FD\u6570\u5B9A\u4E49"}),` `,(0,n.jsxs)(e.p,{children:["\u5F53\u5728 React \u7EC4\u4EF6\u4E2D\u4F7F\u7528 ",(0,n.jsx)(e.code,{children:"useEffect"}),' \u65F6\uFF0C\u4F60\u53EF\u4EE5\u4F20\u9012\u4E00\u4E2A\u56DE\u8C03\u51FD\u6570\u4F5C\u4E3A\u5176\u7B2C\u4E00\u4E2A\u53C2\u6570\uFF0C\u8FD9\u4E2A\u56DE\u8C03\u51FD\u6570\u5C31\u88AB\u79F0\u4E3A "\u526F\u4F5C\u7528\u51FD\u6570" \u6216 "effect \u51FD\u6570"\u3002\u8FD9\u4E2A effect \u51FD\u6570\u5728\u7EC4\u4EF6\u6E32\u67D3\u540E\uFF08\u521D\u59CB\u6E32\u67D3\u53CA\u6BCF\u6B21\u66F4\u65B0\u6E32\u67D3\uFF09\u90FD\u4F1A\u88AB\u8C03\u7528\u3002\u5B83\u5141\u8BB8\u4F60\u5728\u7EC4\u4EF6\u6E32\u67D3\u540E\u6267\u884C\u5404\u79CD\u526F\u4F5C\u7528\u64CD\u4F5C\uFF0C\u6BD4\u5982\u6570\u636E\u83B7\u53D6\u3001\u8BA2\u9605\u3001DOM \u64CD\u4F5C\u7B49\u3002']}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:"useEffect"})," \u51FD\u6570\u63A5\u6536\u4E24\u4E2A\u53C2\u6570\uFF1A"]}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Effect \u51FD\u6570\uFF08\u5FC5\u9700\uFF09\uFF1A"})," \u8FD9\u662F\u4E00\u4E2A\u5305\u542B\u4F60\u8981\u5728\u7EC4\u4EF6\u6E32\u67D3\u540E\u6267\u884C\u7684\u526F\u4F5C\u7528\u64CD\u4F5C\u7684\u56DE\u8C03\u51FD\u6570\u3002\u5B83\u53EF\u4EE5\u5305\u542B\u5F02\u6B65\u64CD\u4F5C\u3001\u8BA2\u9605\u3001\u72B6\u6001\u66F4\u65B0\u7B49\u3002"]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"\u4F9D\u8D56\u6570\u7EC4\uFF08\u53EF\u9009\uFF09\uFF1A"})," \u8FD9\u662F\u4E00\u4E2A\u6570\u7EC4\uFF0C\u5305\u542B\u4E86\u5728 effect \u51FD\u6570\u4E2D\u4F7F\u7528\u7684\u72B6\u6001\u53D8\u91CF\u3002\u53EA\u6709\u5F53\u4F9D\u8D56\u6570\u7EC4\u4E2D\u7684\u67D0\u4E2A\u72B6\u6001\u53D8\u91CF\u53D1\u751F\u53D8\u5316\u65F6\uFF0Ceffect \u51FD\u6570\u624D\u4F1A\u91CD\u65B0\u6267\u884C\u3002\u5982\u679C\u4E0D\u4F20\u9012\u8FD9\u4E2A\u6570\u7EC4\uFF0Ceffect \u4F1A\u5728\u6BCF\u6B21\u7EC4\u4EF6\u66F4\u65B0\u65F6\u90FD\u6267\u884C\u3002"]}),` `]}),` `,(0,n.jsx)(e.h3,{children:"\u4F7F\u7528\u793A\u4F8B"}),` `,(0,n.jsxs)(e.p,{children:["\u4EE5\u4E0B\u662F\u4E00\u4E2A\u793A\u4F8B\uFF0C\u5C55\u793A\u4E86 ",(0,n.jsx)(e.code,{children:"useEffect"})," \u7684\u57FA\u672C\u8BED\u6CD5\u548C\u7528\u6CD5\uFF1A"]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`import React, { useState, useEffect } from 'react'; function DataFetcher() { const [data, setData] = useState(null); useEffect(() => { // \u6A21\u62DF\u6570\u636E\u83B7\u53D6\u7684\u5F02\u6B65\u64CD\u4F5C setTimeout(() => { const fakeData = ['Apple', 'Banana', 'Orange']; setData(fakeData); }, 2000); // 2\u79D2\u540E\u66F4\u65B0\u6570\u636E }, []); // \u4F20\u9012\u7A7A\u6570\u7EC4\u4F5C\u4E3A\u7B2C\u4E8C\u4E2A\u53C2\u6570\u4EE5\u89E6\u53D1\u4EC5\u5728\u7EC4\u4EF6\u6302\u8F7D\u65F6\u8FD0\u884C return (

\u6570\u636E\u83B7\u53D6\u793A\u4F8B

{data ? (

{item}

) : (

\u6B63\u5728\u83B7\u53D6\u6570\u636E...

)}

); } export default DataFetcher; `})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:"http://eddiehuang.oss-cn-guangzhou.aliyuncs.com/images/useEffect.gif",alt:"useEffect"})}),` `,(0,n.jsx)(e.h3,{children:"\u5E38\u89C1\u7528\u6CD5"}),` `,(0,n.jsxs)(e.p,{children:["\u9664\u4E86\u4E0A\u8FF0\u793A\u4F8B\u4E2D\u7684\u7528\u6CD5\uFF08\u4F20\u9012\u7A7A\u6570\u7EC4\u4F5C\u4E3A\u7B2C\u4E8C\u4E2A\u53C2\u6570\u4EE5\u89E6\u53D1\u4EC5\u5728\u7EC4\u4EF6\u6302\u8F7D\u65F6\u8FD0\u884C\uFF09\uFF0C",(0,n.jsx)(e.code,{children:"useEffect"}),"\u8FD8\u6709\u4E00\u4E9B\u5176\u4ED6\u7684\u7528\u6CD5\uFF0C\u4EE5\u4E0B\u662F\u4E00\u4E9B",(0,n.jsx)(e.code,{children:"useEffect"}),"\u7684\u5E38\u89C1\u7528\u6CD5\u793A\u4F8B\uFF1A"]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.strong,{children:"\u6839\u636E\u72B6\u6001\u53D8\u5316\u89E6\u53D1\u526F\u4F5C\u7528\uFF1A"})}),` `]}),` `,(0,n.jsxs)(e.p,{children:["\u4F60\u53EF\u4EE5\u901A\u8FC7\u5728",(0,n.jsx)(e.code,{children:"useEffect"}),"\u7684\u4F9D\u8D56\u6570\u7EC4\u4E2D\u4F20\u9012\u72B6\u6001\u53D8\u91CF\uFF0C\u4EE5\u4FBF\u5728\u8FD9\u4E9B\u72B6\u6001\u53D8\u91CF\u53D1\u751F\u53D8\u5316\u65F6\u89E6\u53D1\u526F\u4F5C\u7528\u3002",(0,n.jsxs)(e.strong,{children:["\u8FD9\u91CC\u7684",(0,n.jsx)(e.code,{children:"count"})," \u662F\u72B6\u6001\u53D8\u91CF\uFF0C\u800C\u4E0D\u662F\u666E\u901A\u7684 JavaScript \u53D8\u91CF\u3002"]})]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`useEffect(() => { console.log(\`Count has changed to: \${count}\`); // \u5728\u8FD9\u91CC\u53EF\u4EE5\u6267\u884C\u57FA\u4E8E\u72B6\u6001\u53D8\u5316\u7684\u526F\u4F5C\u7528\u64CD\u4F5C }, [count]); // \u5F53 count \u53D1\u751F\u53D8\u5316\u65F6\u89E6\u53D1\u526F\u4F5C\u7528 `})}),` `,(0,n.jsxs)(e.p,{children:["\u4F60\u53EF\u4EE5\u5728\u526F\u4F5C\u7528\u51FD\u6570\u5185\u90E8\u6267\u884C\u57FA\u4E8E\u72B6\u6001\u53D8\u5316\u7684\u64CD\u4F5C\uFF0C\u6BD4\u5982\u6570\u636E\u83B7\u53D6\u3001",(0,n.jsx)(e.code,{children:"DOM"}),"\u64CD\u4F5C\u3001\u66F4\u65B0\u5176\u4ED6\u72B6\u6001\u7B49\u3002\u5F53 ",(0,n.jsx)(e.code,{children:"count"})," \u53D1\u751F\u53D8\u5316\u65F6\uFF0C\u526F\u4F5C\u7528\u51FD\u6570\u5C31\u4F1A\u6839\u636E\u53D8\u5316\u7684\u503C\u6765\u6267\u884C\u76F8\u5E94\u7684\u64CD\u4F5C\u3002"]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.strong,{children:"\u6E05\u7406\u526F\u4F5C\u7528\uFF1A"})}),` `]}),` `,(0,n.jsxs)(e.p,{children:["\u4F60\u53EF\u4EE5\u5728",(0,n.jsx)(e.code,{children:"useEffect"}),"\u5185\u90E8\u8FD4\u56DE\u4E00\u4E2A\u6E05\u7406\u51FD\u6570\uFF0C\u7528\u4E8E\u5728\u7EC4\u4EF6\u5378\u8F7D\u6216\u91CD\u65B0\u6E32\u67D3\u4E4B\u524D\u6267\u884C\u4E00\u4E9B\u6E05\u7406\u64CD\u4F5C\uFF0C\u6BD4\u5982\u53D6\u6D88\u8BA2\u9605\u3001\u6E05\u9664\u5B9A\u65F6\u5668\u7B49\u3002"]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`useEffect(() => { const subscription = subscribe(); return () => { // \u5728\u7EC4\u4EF6\u5378\u8F7D\u6216\u91CD\u65B0\u6E32\u67D3\u4E4B\u524D\u6267\u884C\u6E05\u7406\u64CD\u4F5C unsubscribe(subscription); }; }, []); `})}),` `,(0,n.jsxs)(e.p,{children:["\u8FD9\u79CD\u6A21\u5F0F\u7528\u4E8E\u786E\u4FDD\u5728\u7EC4\u4EF6\u751F\u547D\u5468\u671F\u4E2D\u7BA1\u7406\u8D44\u6E90\u7684\u521B\u5EFA\u548C\u6E05\u7406\uFF0C\u4EE5\u4FBF\u5728\u4E0D\u9700\u8981\u8FD9\u4E9B\u8D44\u6E90\u65F6\u91CA\u653E\u5B83\u4EEC\u3002\u8FD9\u6709\u52A9\u4E8E",(0,n.jsx)(e.strong,{children:"\u9632\u6B62\u5185\u5B58\u6CC4\u6F0F"}),"\uFF0C",(0,n.jsx)(e.strong,{children:"\u63D0\u9AD8\u5E94\u7528\u7684\u6027\u80FD\u548C\u53EF\u7EF4\u62A4\u6027"}),"\u3002"]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.strong,{children:"\u9632\u6B62\u8FC7\u591A\u7684\u526F\u4F5C\u7528\uFF1A"})}),` `]}),` `,(0,n.jsxs)(e.p,{children:["\u5982\u679C\u4F60\u7684\u526F\u4F5C\u7528\u51FD\u6570\u5185\u90E8\u4F1A\u8BA2\u9605\u4E8B\u4EF6\u3001\u6CE8\u518C\u4E8B\u4EF6\u76D1\u542C\u5668\u7B49\uFF0C\u53EF\u80FD\u4F1A\u5BFC\u81F4\u6BCF\u6B21\u6E32\u67D3\u90FD\u521B\u5EFA\u65B0\u7684\u8BA2\u9605\u3002\u4E3A\u4E86\u907F\u514D\u8FD9\u79CD\u60C5\u51B5\uFF0C\u4F60\u53EF\u4EE5\u7ED3\u5408\u4E0A\u8FF0\u4E24\u79CD\u7528\u6CD5\uFF0C\u914D\u7F6E",(0,n.jsx)(e.code,{children:"useEffect"}),"\u7684\u7B2C\u4E8C\u4E2A\u53C2\u6570\uFF0C\u4F7F\u5F97\u53EA\u5728\u7279\u5B9A\u72B6\u6001\u53D8\u5316\u65F6\u624D\u6267\u884C\u526F\u4F5C\u7528\u3002"]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`useEffect(() => { const subscription = subscribe(); return () => { unsubscribe(subscription); }; }, [specificDependency]); `})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.strong,{children:"\u5F02\u6B65\u526F\u4F5C\u7528\uFF1A"})}),` `]}),` `,(0,n.jsxs)(e.p,{children:["\u5982\u679C\u5728\u526F\u4F5C\u7528\u51FD\u6570\u5185\u90E8\u6709\u5F02\u6B65\u64CD\u4F5C\uFF0C\u4F60\u53EF\u4EE5\u5C06\u5F02\u6B65\u64CD\u4F5C\u5C01\u88C5\u5728\u51FD\u6570\u4E2D\uFF0C\u7136\u540E\u5728 ",(0,n.jsx)(e.code,{children:"useEffect"})," \u5185\u90E8\u8C03\u7528\u8FD9\u4E2A\u51FD\u6570\u3002\u8FD9\u6837\u53EF\u4EE5\u66F4\u597D\u5730\u5904\u7406\u5F02\u6B65\u64CD\u4F5C\u7684\u9519\u8BEF\u548C\u53D6\u6D88\u3002"]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`useEffect(() => { const fetchData = async () => { try { const response = await fetch('api/data'); const data = await response.json(); setData(data); } catch (error) { setError(error); } }; fetchData(); }, []); `})}),` `,(0,n.jsxs)(e.p,{children:["\u5B66\u4E60\u5B8C\u4E0A\u8FF0\u7684\u5E38\u89C1\u7528\u6CD5\uFF0C\u8FD9\u4E2A\u65F6\u5019\u6709\u4E9B\u540C\u5B66\u53EF\u80FD\u4F1A\u4EA7\u751F\u7591\u95EE\uFF0C",(0,n.jsx)(e.strong,{children:"\u7EC4\u4EF6\u521A\u6302\u8F7D\u65F6\u4F1A\u4E0D\u4F1A\u89E6\u53D1\u6839\u636E\u72B6\u6001\u53D8\u5316\u6267\u884C\u7684\u526F\u4F5C\u7528\u5462\uFF1F"})," \u7B54\u6848\u662F\u201C\u4F1A\u7684\u201D\uFF0C\u90A3\u5982\u679C\u6211\u4EEC\u6709\u4E9B\u4E1A\u52A1\u573A\u666F\u4E0D\u5E0C\u671B\u5728\u7EC4\u4EF6\u521A\u6302\u8F7D\u65F6\u5C31\u89E6\u53D1\u8FD9\u4E2A\u526F\u4F5C\u7528\uFF0C\u53C8\u60F3\u6839\u636E\u72B6\u6001\u53D8\u5316\u89E6\u53D1\uFF0C\u8BE5\u600E\u4E48\u529E\u5462\uFF1F\u4E0B\u9762\u8FD9\u4E2A\u793A\u4F8B\u53EF\u4EE5\u5F88\u597D\u5730\u89E3\u51B3\u6211\u4EEC\u7684\u7591\u95EE\uFF1A"]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`import React, { useState, useEffect } from 'react'; function ExampleComponent() { const [count, setCount] = useState(0); const [isMounted, setIsMounted] = useState(false); useEffect(() => { if (isMounted) { console.log(\`Count has changed to: \${count}\`); // \u5728\u8FD9\u91CC\u6267\u884C\u6839\u636E\u72B6\u6001\u53D8\u5316\u7684\u526F\u4F5C\u7528\u64CD\u4F5C } else { setIsMounted(true); // \u7EC4\u4EF6\u6302\u8F7D\u540E\u8BBE\u7F6E isMounted \u4E3A true } }, [count, isMounted]); return (

Count: {count}

); } export default ExampleComponent; `})}),` `,(0,n.jsxs)(e.p,{children:["\u5728\u8FD9\u4E2A\u793A\u4F8B\u4E2D\uFF0C\u6211\u4EEC\u6DFB\u52A0\u4E86\u4E00\u4E2A\u540D\u4E3A ",(0,n.jsx)(e.code,{children:"isMounted"})," \u7684\u72B6\u6001\u53D8\u91CF\uFF0C\u7528\u6765\u6807\u8BC6\u7EC4\u4EF6\u662F\u5426\u5DF2\u7ECF\u6302\u8F7D\u3002\u5728 ",(0,n.jsx)(e.code,{children:"useEffect"})," \u4E2D\uFF0C\u6211\u4EEC\u4F7F\u7528\u4E86\u4E00\u4E2A\u6761\u4EF6\u8BED\u53E5\u6765\u63A7\u5236\u526F\u4F5C\u7528\u7684\u6267\u884C\u3002\u5982\u679C ",(0,n.jsx)(e.code,{children:"isMounted"})," \u4E3A ",(0,n.jsx)(e.code,{children:"true"}),"\uFF0C\u5219\u6267\u884C\u6839\u636E\u72B6\u6001\u53D8\u5316\u7684\u526F\u4F5C\u7528\u64CD\u4F5C\uFF1B\u5982\u679C ",(0,n.jsx)(e.code,{children:"isMounted"})," \u4E3A ",(0,n.jsx)(e.code,{children:"false"}),"\uFF0C\u5219\u5C06 ",(0,n.jsx)(e.code,{children:"isMounted"})," \u8BBE\u7F6E\u4E3A ",(0,n.jsx)(e.code,{children:"true"}),"\uFF0C\u8868\u793A\u7EC4\u4EF6\u5DF2\u6302\u8F7D\u3002"]}),` `,(0,n.jsx)(e.p,{children:"\u8FD9\u79CD\u6A21\u5F0F\u786E\u4FDD\u4E86\u5728\u7EC4\u4EF6\u6302\u8F7D\u65F6\u4E0D\u6267\u884C\u526F\u4F5C\u7528\uFF0C\u800C\u53EA\u5728\u7EC4\u4EF6\u6302\u8F7D\u540E\u4E14\u72B6\u6001\u53D1\u751F\u53D8\u5316\u65F6\u624D\u6267\u884C\u526F\u4F5C\u7528\u3002\u8FD9\u53EF\u4EE5\u9632\u6B62\u5728\u521D\u59CB\u6E32\u67D3\u65F6\u6267\u884C\u53EF\u80FD\u4E0D\u5FC5\u8981\u7684\u64CD\u4F5C\u3002"}),` `,(0,n.jsx)(e.h2,{children:"\u603B\u7ED3"}),` `,(0,n.jsxs)(e.p,{children:["\u5728\u5B9E\u9645\u7684",(0,n.jsx)(e.code,{children:"React"}),"\u5F00\u53D1\u4E2D\uFF0C",(0,n.jsx)(e.code,{children:"useState"}),"\u548C",(0,n.jsx)(e.code,{children:"useEffect"}),"\u662F\u6700\u5E38\u7528\u4E5F\u662F\u6700\u91CD\u8981\u7684",(0,n.jsx)(e.code,{children:"Hook"}),"\u3002",(0,n.jsx)(e.code,{children:"React"}),"\u5B98\u65B9\u63D0\u4F9B\u7684\u94A9\u5B50\u51FD\u6570\u8FD8\u6709\u5F88\u591A\uFF0C\u4F46\u4E2A\u4EBA\u8BA4\u4E3A\u5B66\u4F1A\u4E86\u8FD9\u4E24\u4E2A\u94A9\u5B50\u51FD\u6570\uFF0C\u5DF2\u7ECF\u53EF\u4EE5\u5E94\u5BF990%\u7684\u7B80\u5355\u4E1A\u52A1\u573A\u666F\u4E86\uFF08\u968F\u53E3\u8BF4\u7684\uFF09\u3002\u5176\u4ED6\u8F83\u5E38\u7528\u7684",(0,n.jsx)(e.code,{children:"Hook"}),"\u5C06\u5728\u63A5\u4E0B\u6765\u7684\u6587\u7AE0\u4E2D\u5C55\u5F00\u4ECB\u7ECD\u3002"]}),` `,(0,n.jsxs)(e.p,{children:["[\u7B2C\u4E8C\u7BC7](",(0,n.jsx)(e.a,{href:"https://juejin.cn/post/7271283075170451492",children:"\u76D8\u70B9React\u5E38\u7528Hooks\uFF082\uFF09\u2014\u2014 useRef | \u9752\u8BAD\u8425 - \u6398\u91D1 (juejin.cn)"}),")"]})]})}function a(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(h,{...c})}):h(c)}return x(b);})(); ;return Component;

盘点React常用Hooks（1）—— useState、useEffect