1 line
16 KiB
JavaScript
1 line
16 KiB
JavaScript
"use strict";(self.webpackChunkjjbook=self.webpackChunkjjbook||[]).push([[1050],{3905:function(e,t,n){n.d(t,{Zo:function(){return u},kt:function(){return m}});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=r.createContext({}),p=function(e){var t=r.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=p(e.components);return r.createElement(c.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},k=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,c=e.parentName,u=o(e,["components","mdxType","originalType","parentName"]),k=p(n),m=a,d=k["".concat(c,".").concat(m)]||k[m]||f[m]||i;return n?r.createElement(d,l(l({ref:t},u),{},{components:n})):r.createElement(d,l({ref:t},u))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,l=new Array(i);l[0]=k;var o={};for(var c in t)hasOwnProperty.call(t,c)&&(o[c]=t[c]);o.originalType=e,o.mdxType="string"==typeof e?e:a,l[1]=o;for(var p=2;p<i;p++)l[p]=n[p];return r.createElement.apply(null,l)}return r.createElement.apply(null,n)}k.displayName="MDXCreateElement"},9645:function(e,t,n){n.r(t),n.d(t,{frontMatter:function(){return o},contentTitle:function(){return c},metadata:function(){return p},toc:function(){return u},default:function(){return k}});var r=n(7462),a=n(3366),i=(n(7294),n(3905)),l=["components"],o={sidebar_label:"\u6846\u67b6\uff1a\u5e38\u89c1\u6846\u67b6\u7684 Diff \u7b97\u6cd5",sidebar_position:5},c="\u5e38\u89c1\u6846\u67b6\u7684 Diff \u7b97\u6cd5",p={unversionedId:"book3/frame-diff",id:"book3/frame-diff",isDocsHomePage:!1,title:"\u5e38\u89c1\u6846\u67b6\u7684 Diff \u7b97\u6cd5",description:"\u76f8\u5173\u95ee\u9898",source:"@site/docs/book3/frame-diff.md",sourceDirName:"book3",slug:"/book3/frame-diff",permalink:"/awesome-interview/book3/frame-diff",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_label:"\u6846\u67b6\uff1a\u5e38\u89c1\u6846\u67b6\u7684 Diff \u7b97\u6cd5",sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"\u6846\u67b6\uff1aReact Hooks \u5b9e\u73b0\u539f\u7406",permalink:"/awesome-interview/book3/frame-react-hooks"},next:{title:"\u57fa\u7840\uff1aJavaScript \u5f02\u6b65\u7f16\u7a0b",permalink:"/awesome-interview/book3/js-async"}},u=[{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. Diff \u7b97\u6cd5",id:"1-diff-\u7b97\u6cd5",children:[]},{value:"2. React Reconciliation",id:"2-react-reconciliation",children:[]},{value:"2. Vue2.x Diff",id:"2-vue2x-diff",children:[]}]},{value:"\u53c2\u8003\u8d44\u6599",id:"\u53c2\u8003\u8d44\u6599",children:[]}],f={toc:u};function k(e){var t=e.components,n=(0,a.Z)(e,l);return(0,i.kt)("wrapper",(0,r.Z)({},f,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"\u5e38\u89c1\u6846\u67b6\u7684-diff-\u7b97\u6cd5"},"\u5e38\u89c1\u6846\u67b6\u7684 Diff \u7b97\u6cd5"),(0,i.kt)("h2",{id:"\u76f8\u5173\u95ee\u9898"},"\u76f8\u5173\u95ee\u9898"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"\u865a\u62df DOM \u662f\u4ec0\u4e48"),(0,i.kt)("li",{parentName:"ul"},"\u865a\u62df DOM \u7684\u4f5c\u7528"),(0,i.kt)("li",{parentName:"ul"},"\u8bb2\u4e00\u4e0b Vue \u7684 Diff \u7b97\u6cd5")),(0,i.kt)("h2",{id:"\u56de\u7b54\u5173\u952e\u70b9"},"\u56de\u7b54\u5173\u952e\u70b9"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"\u865a\u62df DOM")," ",(0,i.kt)("inlineCode",{parentName:"p"},"\u65f6\u95f4\u590d\u6742\u5ea6O(n)")),(0,i.kt)("p",null,"\u73b0\u4ee3\u7f51\u7ad9\u5927\u591a\u5177\u6709\u590d\u6742\u5e03\u5c40\uff0c\u5927\u91cf\u7684\u8282\u70b9\u548c\u4ea4\u4e92\u64cd\u4f5c\u7b49\u7279\u5f81\uff0c\u76f4\u63a5\u64cd\u4f5c DOM \u65b9\u6cd5\u4e0d\u5f53\u5e26\u6765\u7684\u6027\u80fd\u95ee\u9898\u4e0d\u53ef\u5ffd\u89c6\u3002\u865a\u62df DOM \u7684\u672c\u8d28\u662f JavaScript \u5bf9\u8c61\uff0c\u5b83\u53ef\u4ee5\u4ee3\u8868 DOM \u7684\u4e00\u90e8\u5206\u7279\u5f81\uff0c\u662f DOM \u7684\u62bd\u8c61\u7b80\u5316\u7248\u672c\u3002\u901a\u8fc7\u9884\u5148\u64cd\u4f5c\u865a\u62df DOM\uff0c\u5728\u67d0\u4e2a\u65f6\u673a\u627e\u51fa\u548c\u771f\u5b9e DOM \u4e4b\u95f4\u7684\u5dee\u5f02\u90e8\u5206\u5e76\u91cd\u65b0\u6e32\u67d3\uff0c\u6765\u63d0\u5347\u64cd\u4f5c\u771f\u5b9e DOM \u7684\u6027\u80fd\u548c\u6548\u7387\u3002"),(0,i.kt)("p",null,"\u4e3a\u8fbe\u5230\u8fd9\u4e2a\u76ee\u7684\uff0c\u8fd8\u9700\u8981\u5173\u6ce8\u4e24\u4e2a\u95ee\u9898\uff1a\u4ec0\u4e48\u65f6\u5019\u91cd\u65b0\u6e32\u67d3\uff0c\u600e\u4e48\u9ad8\u6548\u9009\u62e9\u91cd\u65b0\u6e32\u67d3\u7684\u8303\u56f4\u3002\u627e\u51fa\u9700\u8981\u91cd\u65b0\u6e32\u67d3\u7684\u8303\u56f4\uff0c\u5c31\u662f Diff \u7684\u8fc7\u7a0b\u3002React \u548c Vue \u7684 Diff \u7b97\u6cd5\u601d\u8def\u57fa\u672c\u4e00\u81f4\uff0c\u53ea\u5bf9\u540c\u5c42\u8282\u70b9\u8fdb\u884c\u6bd4\u8f83\uff0c\u5229\u7528\u552f\u4e00\u6807\u8bc6\u7b26\u5bf9\u8282\u70b9\u8fdb\u884c\u533a\u5206\u3002"),(0,i.kt)("h2",{id:"\u77e5\u8bc6\u70b9\u6df1\u5165"},"\u77e5\u8bc6\u70b9\u6df1\u5165"),(0,i.kt)("h3",{id:"1-diff-\u7b97\u6cd5"},"1. Diff \u7b97\u6cd5"),(0,i.kt)("p",null,"\u4e24\u68f5\u6811\u7684\u6bd4\u5bf9\u548c\u66f4\u65b0\uff0c\u6d89\u53ca\u5230\u6811\u7f16\u8f91\u8ddd\u79bb\uff08Tree Editing Distance\uff09\u7b97\u6cd5\uff1a\u5c06\u4e00\u68f5\u6811\u8f6c\u5316\u4e3a\u53e6\u4e00\u68f5\u6811\u7684\u6700\u5c0f\u64cd\u4f5c\u6210\u672c\u3002\u64cd\u4f5c\u7c7b\u578b\u5305\u62ec\uff1a\u5220\u9664\u3001\u63d2\u5165\u3001\u4fee\u6539\u3002\u65f6\u95f4\u590d\u6742\u5ea6\u4e3a O(n^3)\u3002"),(0,i.kt)("p",null,"\u4e3a\u4e86\u964d\u4f4e\u65f6\u95f4\u590d\u6742\u5ea6\uff0cReact \u548c Vue \u7684\u601d\u8def\u662f\u57fa\u4e8e\u4ee5\u4e0b\u4e24\u4e2a\u5047\u8bbe\u6761\u4ef6\uff0c\u7f29\u51cf\u9012\u5f52\u8fed\u4ee3\u89c4\u6a21\uff0c\u5c06 Diff \u7b97\u6cd5\u7684\u65f6\u95f4\u590d\u6742\u5ea6\u964d\u4f4e\u4e3a O(n)\uff1a"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},"\u76f8\u540c\u7c7b\u578b\u7684\u7ec4\u4ef6\u4ea7\u751f\u76f8\u540c\u7684 DOM \u7ed3\u6784\uff0c\u53cd\u4e4b\u4ea6\u7136\u3002\u6240\u4ee5\u4e0d\u540c\u7c7b\u578b\u7ec4\u4ef6\u7684\u7ed3\u6784\u4e0d\u9700\u8981\u8fdb\u4e00\u6b65\u9012\u5f52 Diff\u3002"),(0,i.kt)("li",{parentName:"ol"},"\u540c\u4e00\u5c42\u7ea7\u7684\u4e00\u7ec4\u8282\u70b9\uff0c\u53ef\u4ee5\u901a\u8fc7\u552f\u4e00\u6807\u8bc6\u7b26\u8fdb\u884c\u533a\u5206\u3002")),(0,i.kt)("h3",{id:"2-react-reconciliation"},"2. React Reconciliation"),(0,i.kt)("p",null,"\u5728 React \u4e2d\uff0c\u5c06\u865a\u62df DOM \u548c\u771f\u5b9e DOM \u8fdb\u884c\u6bd4\u5bf9\u7136\u540e\u540c\u6b65\u7684\u8fc7\u7a0b\u88ab\u79f0\u4e3a Reconciliation\uff08\u8c03\u548c\uff09\uff0cFiber \u662f React 16 \u4e2d\u65b0\u7684\u8c03\u548c\u5f15\u64ce\u3002\u5b83\u7684\u4e3b\u8981\u76ee\u6807\u662f\u5b9e\u73b0\u865a\u62df DOM \u7684\u589e\u91cf\u6e32\u67d3\u3002"),(0,i.kt)("p",null,"Diff \u7684\u5927\u81f4\u8fc7\u7a0b\u662f\uff0c\u5f53\u5bf9\u6bd4\u4e24\u68f5\u865a\u62df DOM \u6811\u65f6\uff0cReact \u5148\u5bf9\u6bd4\u6839\u5143\u7d20\u3002\u4f9d\u636e\u6839\u5143\u7d20\u7684\u7c7b\u578b\u4e0d\u540c\uff0c\u4f1a\u6709\u4e0d\u540c\u7684\u64cd\u4f5c\uff1a"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"\u4e0d\u540c\u7c7b\u578b\u7684\u5143\u7d20")),(0,i.kt)("p",{parentName:"li"},"\u5982\u679c\u5143\u7d20\u7684\u7c7b\u578b\u4e0d\u540c\uff0cReact \u4f1a\u629b\u5f03\u65e7\u6811\u5e76\u5efa\u7acb\u65b0\u6811\u3002\u5982\u4ee5\u4e0b\u60c5\u51b5\uff0c\u4f1a\u5bfc\u81f4\u5b8c\u5168\u91cd\u5efa\uff1a"),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- old --\x3e\n<button class="bg-blue-100">HZFE</button>\n\n\x3c!-- new --\x3e\n<div class="bg-blue-100">HZFE</div>\n'))),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"\u76f8\u540c\u7c7b\u578b\u7684\u5143\u7d20")),(0,i.kt)("p",{parentName:"li"},"\u5982\u679c\u5143\u7d20\u662f\u4e24\u4e2a\u76f8\u540c\u7c7b\u578b\u7684 React DOM \u5143\u7d20\u65f6\uff0cReact \u4f1a\u67e5\u770b\u4e24\u8005\u7684\u5c5e\u6027\uff0c\u4fdd\u7559 DOM \u8282\u70b9\uff0c\u53ea\u66f4\u65b0\u6539\u53d8\u7684\u5c5e\u6027\u3002\u5982\u4ee5\u4e0b\u60c5\u51b5\uff0cReact \u53ea\u66f4\u65b0\u989c\u8272\u6837\u5f0f\u3002"),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- old --\x3e\n<button class="bg-blue-100 text-center">HZFE</button>\n\n\x3c!-- new --\x3e\n<button class="bg-red-100 text-center">HZFE</button>\n')))),(0,i.kt)("p",null,"\u5728\u5143\u7d20\u7c7b\u578b\u76f8\u540c\u7684\u60c5\u51b5\u4e0b\uff0c\u6bd4\u5bf9\u5b8c\u5143\u7d20\u540e\uff0c\u4f1a\u9012\u5f52\u5143\u7d20\u7684\u5b50\u5143\u7d20\u3002\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0cReact \u4f1a\u540c\u65f6\u8fed\u4ee3\u65b0\u8001\u4e24\u4e2a\u5b50\u5143\u7d20\u5217\u8868\u3002\u5bf9\u4e8e\u5217\u8868\u7684\u66f4\u65b0\uff0cReact \u5efa\u8bae\u5728\u5217\u8868\u9879\u4e2d\u6807\u8bc6 key \u5c5e\u6027\u3002\u907f\u514d\u4ee5\u4e0b\u4f4e\u6548\u573a\u666f\uff1a"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- bad --\x3e\n\x3c!-- React \u4e0d\u4f1a\u610f\u8bc6\u5230\u53ef\u4ee5\u4fdd\u7559<li>HZFE</li>\u548c<li>Front-End</li>\u5b50\u6811\u7684\u5b8c\u6574\uff0c\u800c\u662f\u91cd\u5199\u6bcf\u4e2a\u5143\u7d20 --\x3e\n\n\x3c!-- old --\x3e\n<ul>\n <li>HZFE</li>\n <li>Front-End</li>\n</ul>\n\x3c!-- new --\x3e\n<ul>\n <li>Back-End</li>\n <li>HZFE</li>\n <li>Front-End</li>\n</ul>\n\n\x3c!-- good --\x3e\n\x3c!-- \u5b50\u5217\u8868\u9879\u6709\u7a33\u5b9a\u4e14\u5728\u5144\u5f1f\u8282\u70b9\u4e2d\u552f\u4e00\u7684 key \u5c5e\u6027\uff0c --\x3e\n\x3c!-- React \u4f7f\u7528 key \u4ece\u65b0\u8001\u6811\u4e2d\u5339\u914d\u5bf9\u5e94\u8282\u70b9\u6bd4\u8f83\uff0c\u63d0\u9ad8 Diff \u6548\u7387\u3002 --\x3e\n\n\x3c!-- old --\x3e\n<ul>\n <li key="2016">HZFE</li>\n <li key="2017">Front-End</li>\n</ul>\n\x3c!-- new --\x3e\n<ul>\n <li key="2015">Back-End</li>\n <li key="2016">HZFE</li>\n <li key="2017">Front-End</li>\n</ul>\n')),(0,i.kt)("h3",{id:"2-vue2x-diff"},"2. Vue2.x Diff"),(0,i.kt)("p",null,"Vue \u7684 Diff \u7b97\u6cd5\u548c React \u7684\u7c7b\u4f3c\uff0c\u53ea\u5728\u540c\u4e00\u5c42\u6b21\u8fdb\u884c\u6bd4\u8f83\uff0c\u4e0d\u8fdb\u884c\u8de8\u5c42\u6bd4\u8f83\u3002\u5982\u679c\u4e24\u4e2a\u5143\u7d20\u88ab\u5224\u5b9a\u4e3a\u4e0d\u76f8\u540c\uff0c\u5219\u4e0d\u7ee7\u7eed\u9012\u5f52\u6bd4\u8f83\u3002\u5728 Diff \u5b50\u5143\u7d20\u7684\u8fc7\u7a0b\u4e2d\uff0c\u91c7\u7528\u53cc\u7aef\u6bd4\u8f83\u7684\u65b9\u6cd5\uff0c\u8bbe\u7acb 4 \u4e2a\u6307\u9488\uff1a"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"oldStartIdx \u6307\u5411\u65e7\u5b50\u5143\u7d20\u5217\u8868\u4e2d\uff0c\u4ece\u5de6\u8fb9\u5f00\u59cb Diff \u7684\u5143\u7d20\u7d22\u5f15\u3002\u521d\u59cb\u503c\uff1a\u7b2c\u4e00\u4e2a\u5143\u7d20\u7684\u7d22\u5f15\u3002"),(0,i.kt)("li",{parentName:"ul"},"newStartIdx \u6307\u5411\u65b0\u5b50\u5143\u7d20\u5217\u8868\u4e2d\uff0c\u4ece\u5de6\u8fb9\u5f00\u59cb Diff \u7684\u5143\u7d20\u7d22\u5f15\u3002\u521d\u59cb\u503c\uff1a\u7b2c\u4e00\u4e2a\u5143\u7d20\u7684\u7d22\u5f15\u3002"),(0,i.kt)("li",{parentName:"ul"},"oldEndIdx \u6307\u5411\u65e7\u5b50\u5143\u7d20\u5217\u8868\u4e2d\uff0c\u4ece\u53f3\u8fb9\u5f00\u59cb Diff \u7684\u5143\u7d20\u7d22\u5f15\u3002\u521d\u59cb\u503c\uff1a\u6700\u540e\u4e00\u4e2a\u5143\u7d20\u7684\u7d22\u5f15\u3002"),(0,i.kt)("li",{parentName:"ul"},"newEndIdx \u6307\u5411\u65b0\u5b50\u5143\u7d20\u5217\u8868\u4e2d\uff0c\u4ece\u53f3\u8fb9\u5f00\u59cb Diff \u7684\u5143\u7d20\u7d22\u5f15\u3002\u521d\u59cb\u503c\uff1a\u6700\u540e\u4e00\u4e2a\u5143\u7d20\u7684\u7d22\u5f15\u3002")),(0,i.kt)("p",null,(0,i.kt)("img",{parentName:"p",src:"https://user-images.githubusercontent.com/17002181/130326547-7cdcbc06-b400-43d3-89ce-e73934e38bdf.png",alt:"image"})),(0,i.kt)("p",null,"Vue \u540c\u65f6\u904d\u5386\u65b0\u8001\u5b50\u5143\u7d20\u865a\u62df DOM \u5217\u8868\uff0c\u5e76\u91c7\u7528\u5934\u5c3e\u6bd4\u8f83\u3002\u4e00\u822c\u6709 4 \u79cd\u60c5\u51b5\uff1a"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"\u5f53\u65b0\u8001 start \u6307\u9488\u6307\u5411\u7684\u662f\u76f8\u540c\u8282\u70b9")),(0,i.kt)("p",{parentName:"li"},"\u590d\u7528\u8282\u70b9\u5e76\u6309\u9700\u66f4\u65b0\u3002"),(0,i.kt)("p",{parentName:"li"},"\u65b0\u8001 start \u6307\u9488\u5411\u53f3\u79fb\u52a8\u4e00\u4f4d\u3002")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"\u5f53\u65b0\u8001 end \u6307\u9488\u6307\u5411\u7684\u662f\u76f8\u540c\u8282\u70b9")),(0,i.kt)("p",{parentName:"li"},"\u590d\u7528\u8282\u70b9\u5e76\u6309\u9700\u66f4\u65b0\u3002"),(0,i.kt)("p",{parentName:"li"},"\u65b0\u8001 end \u6307\u9488\u5411\u5de6\u79fb\u52a8\u4e00\u4f4d\u3002")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"\u5f53\u8001 start \u6307\u9488\u548c\u65b0 end \u6307\u9488\u6307\u5411\u7684\u662f\u76f8\u540c\u8282\u70b9")),(0,i.kt)("p",{parentName:"li"},"\u590d\u7528\u8282\u70b9\u5e76\u6309\u9700\u66f4\u65b0\uff0c\u5c06\u8282\u70b9\u5bf9\u5e94\u7684\u771f\u5b9e DOM \u79fb\u52a8\u5230\u5b50\u5143\u7d20\u5217\u8868\u961f\u5c3e\u3002"),(0,i.kt)("p",{parentName:"li"},"\u8001 start \u6307\u9488\u5411\u53f3\u79fb\u52a8\u4e00\u4f4d\u3002"),(0,i.kt)("p",{parentName:"li"},"\u65b0 end \u6307\u9488\u5411\u5de6\u79fb\u52a8\u4e00\u4f4d\u3002")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"\u5f53\u8001 end \u6307\u9488\u548c\u65b0 start \u6307\u9488\u6307\u5411\u7684\u662f\u76f8\u540c\u8282\u70b9")),(0,i.kt)("p",{parentName:"li"},"\u590d\u7528\u8282\u70b9\u5e76\u6309\u9700\u66f4\u65b0\uff0c\u5c06\u8282\u70b9\u5bf9\u5e94\u7684\u771f\u5b9e DOM \u79fb\u52a8\u5230\u5b50\u5143\u7d20\u5217\u8868\u961f\u5934\u3002"),(0,i.kt)("p",{parentName:"li"},"\u8001 end \u6307\u9488\u5411\u5de6\u79fb\u52a8\u4e00\u4f4d\u3002"),(0,i.kt)("p",{parentName:"li"},"\u65b0 start \u6307\u9488\u5411\u53f3\u79fb\u52a8\u4e00\u4f4d\u3002"))),(0,i.kt)("p",null,"\u5728\u4e0d\u6ee1\u8db3\u4ee5\u4e0a\u60c5\u51b5\u7684\u524d\u63d0\u4e0b\uff0c\u4f1a\u5c1d\u8bd5\u68c0\u67e5\u65b0 start \u6307\u9488\u6307\u5411\u7684\u8282\u70b9\u662f\u5426\u6709\u552f\u4e00\u6807\u8bc6\u7b26 key\uff0c\u5982\u679c\u6709\u4e14\u80fd\u5728\u65e7\u5217\u8868\u4e2d\u627e\u5230\u62e5\u6709\u76f8\u540c key \u7684\u76f8\u540c\u7c7b\u578b\u8282\u70b9\uff0c\u5219\u53ef\u590d\u7528\u5e76\u6309\u9700\u66f4\u65b0\uff0c\u4e14\u79fb\u52a8\u8282\u70b9\u5230\u65b0\u7684\u4f4d\u7f6e\u3002\u65b0 start \u6307\u9488\u5411\u53f3\u79fb\u52a8\u4e00\u4f4d\u3002\u5982\u679c\u4f9d\u65e7\u4e0d\u6ee1\u8db3\u6761\u4ef6\uff0c\u5219\u65b0\u589e\u76f8\u5173\u8282\u70b9\u3002"),(0,i.kt)("p",null,"\u5f53\u65b0\u8001\u5217\u8868\u7684\u4e2d\u4efb\u610f\u4e00\u4e2a\u5217\u8868\u7684\u5934\u6307\u9488\u7d22\u5f15\u5927\u4e8e\u5c3e\u6307\u9488\u7d22\u5f15\u65f6\uff0c\u5faa\u73af\u904d\u5386\u7ed3\u675f\uff0c\u6309\u9700\u5220\u9664\u6216\u65b0\u589e\u76f8\u5173\u8282\u70b9\u5373\u53ef\u3002"),(0,i.kt)("h2",{id:"\u53c2\u8003\u8d44\u6599"},"\u53c2\u8003\u8d44\u6599"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://reactjs.org/docs/reconciliation.html"},"Reconciliation")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://github.com/vuejs/vue/blob/2.6/src/core/vdom/patch.js"},"patch"))))}k.isMDXComponent=!0}}]); |