1 line
14 KiB
JavaScript
1 line
14 KiB
JavaScript
"use strict";(self.webpackChunkjjbook=self.webpackChunkjjbook||[]).push([[7530],{3905:function(e,r,t){t.d(r,{Zo:function(){return l},kt:function(){return k}});var n=t(7294);function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function s(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?a(Object(t),!0).forEach((function(r){o(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function p(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var i=n.createContext({}),c=function(e){var r=n.useContext(i),t=r;return e&&(t="function"==typeof e?e(r):s(s({},r),e)),t},l=function(e){var r=c(e.components);return n.createElement(i.Provider,{value:r},e.children)},u={inlineCode:"code",wrapper:function(e){var r=e.children;return n.createElement(n.Fragment,{},r)}},d=n.forwardRef((function(e,r){var t=e.components,o=e.mdxType,a=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),d=c(t),k=o,m=d["".concat(i,".").concat(k)]||d[k]||u[k]||a;return t?n.createElement(m,s(s({ref:r},l),{},{components:t})):n.createElement(m,s({ref:r},l))}));function k(e,r){var t=arguments,o=r&&r.mdxType;if("string"==typeof e||o){var a=t.length,s=new Array(a);s[0]=d;var p={};for(var i in r)hasOwnProperty.call(r,i)&&(p[i]=r[i]);p.originalType=e,p.mdxType="string"==typeof e?e:o,s[1]=p;for(var c=2;c<a;c++)s[c]=t[c];return n.createElement.apply(null,s)}return n.createElement.apply(null,t)}d.displayName="MDXCreateElement"},6761:function(e,r,t){t.r(r),t.d(r,{frontMatter:function(){return p},contentTitle:function(){return i},metadata:function(){return c},toc:function(){return l},default:function(){return d}});var n=t(7462),o=t(3366),a=(t(7294),t(3905)),s=["components"],p={sidebar_label:"\u6846\u67b6\uff1aHOC vs Render Props vs Hooks",sidebar_position:5},i="HOC vs Render Props vs Hooks",c={unversionedId:"book2/frame-react-hoc-hooks",id:"book2/frame-react-hoc-hooks",isDocsHomePage:!1,title:"HOC vs Render Props vs Hooks",description:"\u76f8\u5173\u95ee\u9898",source:"@site/docs/book2/frame-react-hoc-hooks.md",sourceDirName:"book2",slug:"/book2/frame-react-hoc-hooks",permalink:"/awesome-interview/book2/frame-react-hoc-hooks",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_label:"\u6846\u67b6\uff1aHOC vs Render Props vs Hooks",sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"\u6846\u67b6\uff1aReact Fiber \u7684\u4f5c\u7528\u548c\u539f\u7406",permalink:"/awesome-interview/book2/frame-react-fiber"},next:{title:"\u57fa\u7840\uff1aES5\u3001ES6 \u5982\u4f55\u5b9e\u73b0\u7ee7\u627f",permalink:"/awesome-interview/book2/js-inherite"}},l=[{value:"\u76f8\u5173\u95ee\u9898",id:"\u76f8\u5173\u95ee\u9898",children:[]},{value:"\u56de\u7b54\u5173\u952e\u70b9",id:"\u56de\u7b54\u5173\u952e\u70b9",children:[]},{value:"\u77e5\u8bc6\u70b9\u6df1\u5165",id:"\u77e5\u8bc6\u70b9\u6df1\u5165",children:[{value:"1. HOC \uff08Higher Order Component\uff0c\u5373\u9ad8\u9636\u7ec4\u4ef6\uff09",id:"1-hoc-higher-order-component\u5373\u9ad8\u9636\u7ec4\u4ef6",children:[]},{value:"2. Render Props",id:"2-render-props",children:[]},{value:"3. React Hooks",id:"3-react-hooks",children:[]},{value:"4. HOC vs Render Props vs Hooks",id:"4-hoc-vs-render-props-vs-hooks",children:[]}]},{value:"\u53c2\u8003\u8d44\u6599",id:"\u53c2\u8003\u8d44\u6599",children:[]}],u={toc:l};function d(e){var r=e.components,t=(0,o.Z)(e,s);return(0,a.kt)("wrapper",(0,n.Z)({},u,t,{components:r,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"hoc-vs-render-props-vs-hooks"},"HOC vs Render Props vs Hooks"),(0,a.kt)("h2",{id:"\u76f8\u5173\u95ee\u9898"},"\u76f8\u5173\u95ee\u9898"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"\u4ec0\u4e48\u662f HOC / Render Props / Hooks"),(0,a.kt)("li",{parentName:"ul"},"\u4e3a\u4ec0\u4e48\u9700\u8981 HOC / Render Props / Hooks"),(0,a.kt)("li",{parentName:"ul"},"\u5982\u4f55\u63d0\u9ad8\u4ee3\u7801\u590d\u7528\u6027"),(0,a.kt)("li",{parentName:"ul"},"Hooks \u7684\u5b9e\u73b0\u539f\u7406"),(0,a.kt)("li",{parentName:"ul"},"Hooks \u76f8\u6bd4\u5176\u4ed6\u65b9\u6848\u6709\u4ec0\u4e48\u4f18\u52bf")),(0,a.kt)("h2",{id:"\u56de\u7b54\u5173\u952e\u70b9"},"\u56de\u7b54\u5173\u952e\u70b9"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"\u590d\u7528\u6027")),(0,a.kt)("p",null,"HOC / Render Props / Hooks \u4e09\u79cd\u5199\u6cd5\u90fd\u53ef\u4ee5",(0,a.kt)("strong",{parentName:"p"},"\u63d0\u9ad8\u4ee3\u7801\u7684\u590d\u7528\u6027"),"\uff0c\u4f46\u5b9e\u73b0\u65b9\u6cd5\u4e0d\u540c\uff1aHOC \u662f\u5bf9\u4f20\u5165\u7684\u7ec4\u4ef6\u8fdb\u884c\u589e\u5f3a\u540e\uff0c\u8fd4\u56de\u65b0\u7684\u7ec4\u4ef6\u7ed9\u5f00\u53d1\u8005\uff1bRender Props \u662f\u6307\u5c06\u4e00\u4e2a\u8fd4\u56de React \u7ec4\u4ef6\u7684\u51fd\u6570\uff0c\u4f5c\u4e3a prop \u4f20\u7ed9\u53e6\u4e00\u4e2a React \u7ec4\u4ef6\u7684\u5171\u4eab\u4ee3\u7801\u7684\u6280\u672f\uff1bHooks \u662f React \u63d0\u4f9b\u7684\u4e00\u7ec4 API\uff0c\u4f7f\u5f00\u53d1\u8005\u53ef\u4ee5\u5728\u4e0d\u7f16\u5199 class \u7684\u60c5\u51b5\u4e0b\u4f7f\u7528 state \u548c\u5176\u4ed6 React \u7279\u6027\u3002"),(0,a.kt)("h2",{id:"\u77e5\u8bc6\u70b9\u6df1\u5165"},"\u77e5\u8bc6\u70b9\u6df1\u5165"),(0,a.kt)("h3",{id:"1-hoc-higher-order-component\u5373\u9ad8\u9636\u7ec4\u4ef6"},"1. HOC \uff08Higher Order Component\uff0c\u5373\u9ad8\u9636\u7ec4\u4ef6\uff09"),(0,a.kt)("p",null,"HOC \u662f React \u4e2d\u590d\u7528\u4ee3\u7801\u7684\u7f16\u7a0b\u6a21\u5f0f\u3002\u5177\u4f53\u6765\u8bf4\uff0c\u9ad8\u9636\u7ec4\u4ef6\u662f\u4e00\u4e2a\u7eaf\u51fd\u6570\uff0c\u5b83\u63a5\u6536\u4e00\u4e2a\u7ec4\u4ef6\u5e76\u8fd4\u56de\u4e00\u4e2a\u65b0\u7684\u7ec4\u4ef6\u3002\u5e38\u89c1\u4f8b\u5b50\uff1aReact Redux \u7684 connect\uff0c\u5c06 Redux Store \u548c React \u7ec4\u4ef6\u8054\u7cfb\u8d77\u6765\u3002"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"// react-redux connect \u4f8b\u5b50\nconst ConnectedMyComponent = connect(mapState)(MyComponent);\n")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx"},'// \u5b9e\u73b0\u4e00\u4e2a\u7b80\u5355\u7684 HOC \u4f8b\u5b50\nfunction logProps(WrappedComponent) {\n return class extends React.Component {\n componentDidUpdate(prevProps) {\n console.log("Current props: ", this.props);\n console.log("Previous props: ", prevProps);\n }\n\n render() {\n return <WrappedComponent {...this.props} />;\n }\n };\n}\n')),(0,a.kt)("h3",{id:"2-render-props"},"2. Render Props"),(0,a.kt)("p",null,"Render Props \u662f React \u4e2d\u590d\u7528\u4ee3\u7801\u7684\u7f16\u7a0b\u6a21\u5f0f\u3002\u4e3b\u8981\u89e3\u51b3\u7ec4\u4ef6\u903b\u8f91\u76f8\u540c\u800c\u6e32\u67d3\u89c4\u5219\u4e0d\u540c\u7684\u590d\u7528\u95ee\u9898\u3002\u5e38\u89c1\u4f8b\u5b50\uff1aReact Router \u4e2d\uff0c\u81ea\u5b9a\u4e49 render \u51fd\u6570\uff0c\u6309\u9700\u4f7f\u7528 routeProps \u6765\u6e32\u67d3\u4e1a\u52a1\u7ec4\u4ef6\u3002"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'ReactDOM.render(\n <Router>\n <Route\n path="/home"\n render={(routeProps) => (\n <div>Customize HZFE\'s {routeProps.location.pathname}</div>\n )}\n />\n </Router>,\n node\n);\n')),(0,a.kt)("h3",{id:"3-react-hooks"},"3. React Hooks"),(0,a.kt)("p",null,"React Hooks \u662f React 16.8 \u5f15\u5165\u7684\u4e00\u7ec4 API\u3002\u5f00\u53d1\u8005\u53ef\u4ee5\u5728\u4e0d\u4f7f\u7528 class \u5199\u6cd5\u7684\u60c5\u51b5\u4e0b\uff0c\u501f\u52a9 Hooks \u5728\u7eaf\u51fd\u6570\u7ec4\u4ef6\u4e2d\u4f7f\u7528\u72b6\u6001\u548c\u5176\u4ed6 React \u529f\u80fd\u3002"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"function Example() {\n const [count, setCount] = useState(0);\n\n return (\n <div>\n <p>You clicked {count} times</p>\n <button onClick={() => setCount(count + 1)}>Click me</button>\n </div>\n );\n}\n")),(0,a.kt)("h3",{id:"4-hoc-vs-render-props-vs-hooks"},"4. HOC vs Render Props vs Hooks"),(0,a.kt)("h4",{id:"\u75db\u70b9"},"\u75db\u70b9"),(0,a.kt)("p",null,"\u5728\u5b9e\u9645\u4e1a\u52a1\u5feb\u901f\u8fed\u4ee3\u8fc7\u7a0b\u4e2d\uff0c\u7ec4\u4ef6\u5e38\u51fa\u73b0\u5927\u91cf\u91cd\u590d\u6027\u5de5\u4f5c\uff0c\u5c11\u91cf\u4e2a\u6027\u5316\u5b9a\u5236\u7684\u9700\u6c42\uff0c\u5982\u679c\u4e0d\u9075\u5faa DRY\uff08Don't Repeat Yourself\uff09\u7684\u89c4\u5219\uff0c\u4f1a\u9020\u6210\u9879\u76ee\u81c3\u80bf\u548c\u96be\u4ee5\u7ef4\u62a4\u7684\u95ee\u9898\u3002\u4f46\u5728\u8bb8\u591a\u60c5\u51b5\u4e0b\uff0c\u65e0\u6cd5\u5bf9\u542b\u6709\u72b6\u6001\u903b\u8f91\u7684\u7ec4\u4ef6\u8fdb\u4e00\u6b65\u62c6\u5206\u3002\u56e0\u6b64\u5728\u6ca1\u6709 React Hooks \u524d\uff0c\u5b58\u5728\u4f7f\u7528 HOC / Render Props \u8fdb\u884c\u91cd\u6784\u7684\u65b9\u6848\u3002"),(0,a.kt)("h4",{id:"\u65b9\u6848\u4f18\u52a3"},"\u65b9\u6848\u4f18\u52a3"),(0,a.kt)("p",null,"\u4e3a\u8f85\u52a9\u7406\u89e3\uff0c\u53ef\u53c2\u8003\u4ee5\u4e0b\u56fe\u7247\u3002\u56fe\u4e2d\u6240\u793a\u4e3a\u4e0b\u62c9\u5217\u8868\u529f\u80fd\u7684\u4e09\u79cd\u4e0d\u540c\u5b9e\u73b0\uff0c\u76f8\u6bd4\u4e8e\u4f7f\u7528\u4e00\u4e2a Class \u6765\u4e66\u5199\u4e0b\u62c9\u5217\u8868\u7684\u6240\u6709\u529f\u80fd\uff0c\u8fd9\u4e09\u79cd\u65b9\u6848\u90fd\u5bf9\u7ec4\u4ef6\u8fdb\u884c\u4e86\u529f\u80fd\u62c6\u89e3\uff0c\u63d0\u9ad8\u4e86\u4ee3\u7801\u7684\u590d\u7528\u6027\u3002\n\uff08",(0,a.kt)("a",{parentName:"p",href:"https://medium.com/simply/comparison-hocs-vs-render-props-vs-hooks-55f9ffcd5dc6"},"\u4ee3\u7801\u6765\u6e90"),"\uff09"),(0,a.kt)("p",null,(0,a.kt)("img",{parentName:"p",src:"https://user-images.githubusercontent.com/17002181/125330248-194da900-e379-11eb-8bab-4fdcec795fb1.png",alt:"image"})),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},(0,a.kt)("strong",{parentName:"p"},"\u590d\u7528\u6027")),(0,a.kt)("p",{parentName:"li"},"HOC\u3001Render Props\u3001Hooks \u90fd\u6709\u63d0\u9ad8\u4ee3\u7801\u590d\u7528\u6027\u7684\u80fd\u529b\uff0c\u4f46\u6839\u636e\u5176\u8bbe\u8ba1\u6a21\u5f0f\u4e0a\u7684\u5dee\u522b\uff0c\u9002\u7528\u8303\u56f4\u4e5f\u4f1a\u6709\u6240\u5dee\u5f02\uff1aHOC \u57fa\u4e8e\u5355\u4e00\u529f\u80fd\u539f\u5219\uff0c\u5bf9\u4f20\u5165\u7ec4\u4ef6\u8fdb\u884c\u589e\u5f3a\uff1bRender Props \u590d\u7528\u6570\u636e\u6e90\uff0c\u6309\u9700\u6e32\u67d3 UI\uff1bHooks \u5bf9\u4e8e\u4e0d\u540c\u573a\u666f\u7684\u590d\u7528\u90fd\u6709\u8f83\u597d\u7684\u666e\u9002\u6027\u3002")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},(0,a.kt)("strong",{parentName:"p"},"\u53ef\u8bfb\u6027 / \u6613\u7528\u6027")),(0,a.kt)("p",{parentName:"li"},(0,a.kt)("strong",{parentName:"p"},"HOC \u53ef\u8bfb\u6027\u5dee\uff0c\u6613\u7528\u6027\u5dee\u3002")),(0,a.kt)("p",{parentName:"li"},"HOC \u5199\u6cd5\u770b\u4f3c\u7b80\u6d01\uff0c\u4f46\u5f00\u53d1\u8005\u65e0\u6cd5\u901a\u8fc7\u9605\u8bfb HOC \u7684\u8c03\u7528\u8fa8\u522b\u51fa\u65b9\u6cd5\u7684\u4f5c\u7528\uff1a\u770b\u4e0d\u5230\u63a5\u6536\u548c\u8fd4\u56de\u7684\u7ed3\u6784\uff0c\u589e\u52a0\u8c03\u8bd5\u548c\u4fee\u590d\u95ee\u9898\u7684\u6210\u672c\uff1b\u8fdb\u884c\u591a\u4e2a HOC \u7ec4\u5408\u4f7f\u7528\u65f6\uff0c\u4e0d\u80fd\u786e\u5b9a\u4f7f\u7528\u987a\u5e8f\u4e14\u6709\u547d\u540d\u7a7a\u95f4\u51b2\u7a81\u98ce\u9669\uff0c\u9700\u8981\u4e86\u89e3\u6bcf\u4e2a HOC \u7684\u5177\u4f53\u5b9e\u73b0\uff0c\u96be\u4ee5\u7ef4\u62a4\u3002\u4e0d\u5efa\u8bae\u8fc7\u5ea6\u4f7f\u7528 HOC\uff0c\u4f46\u6bd4\u8f83\u9002\u5408\u4e0d\u9700\u8981\u4e2a\u6027\u5316\u5f00\u53d1\u5b9a\u5236\u65f6\u4f7f\u7528\uff1a\u5e38\u89c1\u4e8e\u7b2c\u4e09\u65b9\u5e93\u63d0\u4f9b HOC \u7c7b\u578b\u7684 API \u7ed9\u5f00\u53d1\u8005\u8fdb\u884c\u529f\u80fd\u589e\u5f3a\u3002"),(0,a.kt)("p",{parentName:"li"},(0,a.kt)("strong",{parentName:"p"},"Render Props \u53ef\u8bfb\u6027\u8f83\u597d\uff0c\u6613\u7528\u6027\u5f3a\u3002")),(0,a.kt)("p",{parentName:"li"},"\u4ee3\u7801\u76f8\u5bf9\u5197\u957f\uff0c\u4f46\u80fd\u6e05\u6670\u770b\u5230\u7ec4\u4ef6\u63a5\u6536\u7684 props \u4ee5\u53ca\u4f20\u9012\u7684\u529f\u80fd\u7b49\uff0c\u53ef\u4ee5\u5bf9 props \u5c5e\u6027\u91cd\u547d\u540d\uff0c\u4e0d\u4f1a\u6709\u547d\u540d\u51b2\u7a81\u3002\u4f46\u96be\u4ee5\u5728 render \u51fd\u6570\u5916\u4f7f\u7528\u6570\u636e\u6e90\uff0c\u4e14\u5bb9\u6613\u5f62\u6210\u5d4c\u5957\u5730\u72f1\u3002"),(0,a.kt)("p",{parentName:"li"},(0,a.kt)("strong",{parentName:"p"},"Hooks \u53ef\u8bfb\u6027\u5f3a\uff0c\u6613\u7528\u6027\u8f83\u597d\u3002")),(0,a.kt)("p",{parentName:"li"},"\u4f7f\u7528 Hooks \u65f6\uff0c\u80fd\u6e05\u6670\u770b\u5230\u7ec4\u4ef6\u63a5\u6536\u7684 props \u4ee5\u53ca\u4f20\u9012\u7684\u529f\u80fd\u7b49\uff0c\u53ef\u4ee5\u5bf9 props \u5c5e\u6027\u91cd\u547d\u540d\uff0c\u4e0d\u4f1a\u6709\u547d\u540d\u51b2\u7a81\uff0c\u4e0d\u5b58\u5728\u5d4c\u5957\u5730\u72f1\uff0c\u4e14\u6ca1\u6709\u6570\u636e\u6e90\u83b7\u53d6\u53ca\u4f7f\u7528\u8303\u56f4\u7684\u9650\u5236\u3002\u4f46 Hooks \u7f16\u7a0b\u5e94\u9075\u5faa\u51fd\u6570\u5f0f\u7f16\u7a0b\u7684\u5b9e\u8df5\uff0c\u5426\u5219 Hooks \u6240\u9700\u7684\u4f9d\u8d56\u6570\u7ec4\u7684\u5904\u7406\u4f1a\u9020\u6210\u8f83\u5927\u7684\u5fc3\u667a\u8d1f\u62c5\u3002"))),(0,a.kt)("h2",{id:"\u53c2\u8003\u8d44\u6599"},"\u53c2\u8003\u8d44\u6599"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("a",{parentName:"li",href:"https://reactjs.org/docs/hooks-intro.html"},"Introducing Hooks")),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("a",{parentName:"li",href:"https://medium.com/simply/comparison-hocs-vs-render-props-vs-hooks-55f9ffcd5dc6"},"Comparison: HOCs vs Render Props vs Hooks"))))}d.isMDXComponent=!0}}]); |