1"use strict";(self.webpackChunkfantastic_note=self.webpackChunkfantastic_note||[]).push([["4300"],{15712(e,n,s){s.r(n),s.d(n,{metadata:()=>t,default:()=>p,frontMatter:()=>c,contentTitle:()=>a,toc:()=>i,assets:()=>l});var t=JSON.parse('{"id":"React/React/\u9AD8\u9636\u7EC4\u4EF6","title":"\u9AD8\u9636\u7EC4\u4EF6","description":"\u9AD8\u9636\u7EC4\u4EF6\uFF08Higher-Order Component, HOC\uFF09 \u662F React \u4E2D\u4E00\u79CD\u590D\u7528\u7EC4\u4EF6\u903B\u8F91\u7684\u8BBE\u8BA1\u6A21\u5F0F\uFF0C\u5176\u672C\u8D28\u662F\uFF1A","source":"@site/docs/React/01-React/010-\u9AD8\u9636\u7EC4\u4EF6.md","sourceDirName":"React/01-React","slug":"/React/React/\u9AD8\u9636\u7EC4\u4EF6","permalink":"/docs/React/React/\u9AD8\u9636\u7EC4\u4EF6","draft":false,"unlisted":false,"editUrl":"https://github.com/heinfy/fantastic-note/tree/main/docs/React/01-React/010-\u9AD8\u9636\u7EC4\u4EF6.md","tags":[],"version":"current","sidebarPosition":10,"frontMatter":{},"sidebar":"reactSidebar","previous":{"title":"React \u539F\u7406","permalink":"/docs/React/React/React \u539F\u7406"},"next":{"title":"\u534F\u8C03\u7B97\u6CD5","permalink":"/docs/React/React/\u534F\u8C03\u7B97\u6CD5"}}'),r=s(74848),o=s(28453);let c={},a,l={},i=[{value:"\u4E00\u3001\u57FA\u672C\u7ED3\u6784",id:"\u4E00\u57FA\u672C\u7ED3\u6784",level:3},{value:"\u4E8C\u3001\u5E38\u89C1\u5E94\u7528\u573A\u666F",id:"\u4E8C\u5E38\u89C1\u5E94\u7528\u573A\u666F",level:3},{value:"\u2705 1. <strong>\u6CE8\u5165 props\uFF08\u6570\u636E/\u65B9\u6CD5\uFF09</strong>",id:"-1-\u6CE8\u5165-props\u6570\u636E\u65B9\u6CD5",level:4},{value:"\u2705 2. <strong>\u6743\u9650\u63A7\u5236 / \u6761\u4EF6\u6E32\u67D3</strong>",id:"-2-\u6743\u9650\u63A7\u5236--\u6761\u4EF6\u6E32\u67D3",level:4},{value:"\u2705 3. <strong>\u65E5\u5FD7\u3001\u57CB\u70B9\u3001\u6027\u80FD\u76D1\u63A7</strong>",id:"-3-\u65E5\u5FD7\u57CB\u70B9\u6027\u80FD\u76D1\u63A7",level:4},{value:"\u2705 4. <strong>\u5904\u7406\u52A0\u8F7D/\u9519\u8BEF\u72B6\u6001\uFF08\u914D\u5408\u6570\u636E\u8BF7\u6C42\uFF09</strong>",id:"-4-\u5904\u7406\u52A0\u8F7D\u9519\u8BEF\u72B6\u6001\u914D\u5408\u6570\u636E\u8BF7\u6C42",level:4},{value:"\u2705 5. <strong>\u4F7F\u7528 <code>displayName</code> \u4FBF\u4E8E\u8C03\u8BD5</strong>",id:"-5-\u4F7F\u7528-displayname-\u4FBF\u4E8E\u8C03\u8BD5",level:4},{value:"\u603B\u7ED3",id:"\u603B\u7ED3",level:3}];function d(e){let n={blockquote:"blockquote",br:"br",code:"code",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"\u9AD8\u9636\u7EC4\u4EF6\uFF08Higher-Order Component, HOC\uFF09"})," \u662F React \u4E2D\u4E00\u79CD",(0,r.jsx)(n.strong,{children:"\u590D\u7528\u7EC4\u4EF6\u903B\u8F91\u7684\u8BBE\u8BA1\u6A21\u5F0F"}),"\uFF0C\u5176\u672C\u8D28\u662F\uFF1A"]}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"\u4E00\u4E2A\u51FD\u6570\uFF0C\u63A5\u6536\u4E00\u4E2A\u7EC4\u4EF6\u4F5C\u4E3A\u53C2\u6570\uFF0C\u5E76\u8FD4\u56DE\u4E00\u4E2A\u65B0\u7684\u589E\u5F3A\u7EC4\u4EF6\u3002"})}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"\u5F62\u5F0F\u4E0A\u7C7B\u4F3C\u4E8E\u51FD\u6570\u5F0F\u7F16\u7A0B\u4E2D\u7684\u9AD8\u9636\u51FD\u6570\u3002"}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"\u4E00\u57FA\u672C\u7ED3\u6784",children:"\u4E00\u3001\u57FA\u672C\u7ED3\u6784"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:'// \u9AD8\u9636\u7EC4\u4EF6\uFF08\u51FD\u6570\uFF09\nconst withEnhancement = (WrappedComponent) => {\n // \u8FD4\u56DE\u4E00\u4E2A\u65B0\u7684\u7EC4\u4EF6\n return class EnhancedComponent extends React.Component {\n render() {\n // \u53EF\u4EE5\u6CE8\u5165 props\u3001\u5904\u7406\u903B\u8F91\u3001\u62E6\u622A\u6E32\u67D3\u7B49\n return <WrappedComponent {...this.props} extraProp="enhanced" />;\n }\n };\n};\n\n// \u4F7F\u7528\nconst EnhancedButton = withEnhancement(Button);\n'})}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:["\u2705 \u6838\u5FC3\uFF1A",(0,r.jsx)(n.strong,{children:"\u4E0D\u4FEE\u6539\u539F\u7EC4\u4EF6\uFF0C\u800C\u662F\u7EC4\u5408\u51FA\u65B0\u7EC4\u4EF6"}),"\uFF08\u7B26\u5408 React \u7684\u7EC4\u5408\u54F2\u5B66\uFF09\u3002"]}),"\n"]}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"\u4E8C\u5E38\u89C1\u5E94\u7528\u573A\u666F",children:"\u4E8C\u3001\u5E38\u89C1\u5E94\u7528\u573A\u666F"}),"\n",(0,r.jsxs)(n.h4,{id:"-1-\u6CE8\u5165-props\u6570\u636E\u65B9\u6CD5",children:["\u2705 1. ",(0,r.jsx)(n.strong,{children:"\u6CE8\u5165 props\uFF08\u6570\u636E/\u65B9\u6CD5\uFF09"})]}),"\n",(0,r.jsx)(n.p,{children:"\u4F8B\u5982\uFF1A\u4ECE Context \u6216\u5168\u5C40\u72B6\u6001\u4E2D\u63D0\u53D6\u6570\u636E\u5E76\u4F20\u7ED9\u5B50\u7EC4\u4EF6\u3002"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"const withUser = (WrappedComponent) => (props) =>
1 {\n const user = useAuth(); // \u5047\u8BBE useAuth \u662F\u81EA\u5B9A\u4E49 Hook\n return <WrappedComponent {...props} user={user} />;\n};\n"})}),"\n",(0,r.jsxs)(n.h4,{id:"-2-\u6743\u9650\u63A7\u5236--\u6761\u4EF6\u6E32\u67D3",children:["\u2705 2. ",(0,r.jsx)(n.strong,{children:"\u6743\u9650\u63A7\u5236 / \u6761\u4EF6\u6E32\u67D3"})]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:'const withAuth = (WrappedComponent) => (props) => {\n const { isAuthenticated } = useAuth();\n if (!isAuthenticated) return <Redirect to="/login" />;\n return <WrappedComponent {...props} />;\n};\n'})}),"\n",(0,r.jsxs)(n.h4,{id:"-3-\u65E5\u5FD7\u57CB\u70B9\u6027\u80FD\u76D1\u63A7",children:["\u2705 3. ",(0,r.jsx)(n.strong,{children:"\u65E5\u5FD7\u3001\u57CB\u70B9\u3001\u6027\u80FD\u76D1\u63A7"})]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"const withTracking = (WrappedComponent, eventName) => (props) => {\n useEffect(() => {\n trackPageView(eventName); // \u4E0A\u62A5\u57CB\u70B9\n }, []);\n return <WrappedComponent {...props} />;\n};\n"})}),"\n",(0,r.jsxs)(n.h4,{id:"-4-\u5904\u7406\u52A0\u8F7D\u9519\u8BEF\u72B6\u6001\u914D\u5408\u6570\u636E\u8BF7\u6C42",children:["\u2705 4. ",(0,r.jsx)(n.strong,{children:"\u5904\u7406\u52A0\u8F7D/\u9519\u8BEF\u72B6\u6001\uFF08\u914D\u5408\u6570\u636E\u8BF7\u6C42\uFF09"})]}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsx)(n.p,{children:"\u26A0\uFE0F \u6CE8\u610F\uFF1A\u5728 Hooks \u65F6\u4EE3\uFF0C\u8FD9\u7C7B\u903B\u8F91\u66F4\u63A8\u8350\u7528\u81EA\u5B9A\u4E49 Hook \u5B9E\u73B0\u3002"}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"const withData = (url) => (WrappedComponent) => (props) => {\n const [data, setData] = useState(null);\n useEffect(() => {\n fetch(url).then(res => setData(res.json()));\n }, []);\n return data ? <WrappedComponent {...props} data={data} /> : <Loading />;\n};\n"})}),"\n",(0,r.jsxs)(n.h4,{id:"-5-\u4F7F\u7528-displayname-\u4FBF\u4E8E\u8C03\u8BD5",children:["\u2705 5. ",(0,r.jsxs)(n.strong,{children:["\u4F7F\u7528 ",(0,r.jsx)(n.code,{children:"displayName"})," \u4FBF\u4E8E\u8C03\u8BD5"]})]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"EnhancedComponent.displayName = `withHOC(${getDisplayName(WrappedComponent)})`;\n"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"\u603B\u7ED3",children:"\u603B\u7ED3"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.strong,{children:"HOC \u662F\u51FD\u6570 \u2192 \u63A5\u6536\u7EC4\u4EF6 \u2192 \u8FD4\u56DE\u589E\u5F3A\u7EC4\u4EF6"})}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"\u7528\u9014"}),"\uFF1A\u903B\u8F91\u590D\u7528\u3001\u6A2A\u5207\u5173\u6CE8\u70B9\uFF08auth\u3001log\u3001data \u7B49\uFF09"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"\u4F18\u52BF"}),"\uFF1A\u89E3\u8026\u3001\u53EF\u7EC4\u5408"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"\u52A3\u52BF"}),"\uFF1A\u5D4C\u5957\u590D\u6742\u3001props \u4F20\u9012\u4E0D\u900F\u660E"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"\u73B0\u72B6"}),"\uFF1A",(0,r.jsx)(n.strong,{children:"\u5728 Hooks \u65F6\u4EE3\u5DF2\u9010\u6E10\u88AB\u81EA\u5B9A\u4E49 Hook \u53D6\u4EE3"}),"\uFF0C\u4F46\u5728\u67D0\u4E9B\u573A\u666F\uFF08\u5982\u9700\u8981\u4FEE\u6539\u6E32\u67D3\u7ED3\u6784\uFF09\u4ECD\u6709\u4EF7\u503C\u3002"]}),"\n"]}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:["\u{1F4A1} ",(0,r.jsx)(n.strong,{children:"\u8BB0\u4F4F"}),"\uFF1A",(0,r.jsx)(n.br,{}),"\n",(0,r.jsx)(n.strong,{children:"HOC \u4E0D\u662F API\uFF0C\u800C\u662F\u4E00\u79CD\u8BBE\u8BA1\u6A21\u5F0F\u3002"})]}),"\n"]})]})}function p(e={}){let{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},28453(e,n,s){s.d(n,{R:()=>c,x:()=>a});var t=s(96540);let r={},o=t.createContext(r);function c(e){let n=t.useContext(o);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:c(e.components),t.createElement(o.Provider,{value:n},e.children)}}}]);
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.