docs__interview__js__react.md.js

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[28],{KoDt:function(e,l,n){"use strict";n.r(l);var t=n("q1tI"),a=n.n(t),c=n("dEAq"),r=n("H1Ra"),o=a.a.memo((e=>{e.demos;return a.a.createElement(a.a.Fragment,null,a.a.createElement("div",{className:"markdown"},a.a.createElement("h2",{id:"1react-\u7ec4\u4ef6\u7684\u901a\u4fe1\u65b9\u5f0f"},a.a.createElement(c["AnchorLink"],{to:"#1react-\u7ec4\u4ef6\u7684\u901a\u4fe1\u65b9\u5f0f","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"1\u3001react \u7ec4\u4ef6\u7684\u901a\u4fe1\u65b9\u5f0f"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,"\u7236\u7ec4\u4ef6\u5411\u5b50\u7ec4\u4ef6\u4f20\u503c"),a.a.createElement("p",null,"\u7236\u7ec4\u4ef6\u7ed9\u5b50\u7ec4\u4ef6\u4f20\u503c\u662f\u901a\u8fc7 ",a.a.createElement("code",null,"props")," \u6765\u4f20\u503c\u7684"),a.a.createElement(r["a"],{code:'//\u7236\u7ec4\u4ef6\nconst Parent = () => {\n  return <Child name="\u4f60\u597d" />;\n};\n//\u5b50\u7ec4\u4ef6child\nconst Child = props => {\n  return <p>{props.name}</p>;\n};',lang:"js"})),a.a.createElement("li",null,a.a.createElement("p",null,"\u5b50\u7ec4\u4ef6\u5411\u7236\u7ec4\u4ef6\u4f20\u503c"),a.a.createElement("p",null,"\u5b50\u7ec4\u4ef6\u7ed9\u7236\u7ec4\u4ef6\u4f20\u503c\u662f\u901a\u8fc7 ",a.a.createElement("code",null,"props+callback")," \u56de\u8c03\u6765\u5b9e\u73b0\u7684"),a.a.createElement(r["a"],{code:"class Parent extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      msg: '\u6211\u662f\u7236\u7ec4\u4ef6',\n    };\n  }\n  callback = msg => {\n    console.log(msg);\n    this.setState({ msg });\n  };\n  render() {\n    let { msg } = this.state;\n    return (\n      <div>\n        {msg}\n        <Child callback={this.callback} />\n      </div>\n    );\n  }\n}\n//\u5b50\u7ec4\u4ef6child\nconst Child = props => {\n  const cb = msg => {\n    return () => {\n      //\u4e0d\u5199\u8fd9\u4e00\u53e5 \u4f1a\u9020\u6210\u7acb\u5373\u6267\u884c\u51fd\u6570\u53d8\u6210\u6b7b\u5faa\u73af\n      props.callback(msg);\n    };\n  };\n  return <button onclick={cb('\u8fd9\u662f\u4e00\u4e2a\u70b9\u51fb\u4e8b\u4ef6')}>{props.name}</button>;\n};",lang:"js"})),a.a.createElement("li",null,a.a.createElement("p",null,"\u8de8\u7ea7\u7ec4\u4ef6\u901a\u4fe1 \u7236\u7ec4\u4ef6\u5411\u66f4\u6df1\u5c42\u6b21\u7684\u5b50\u7ec4\u4ef6\u4f20\u503c\uff0c"),a.a.createElement("ul",null,a.a.createElement("li",null,"\u7b2c\u4e00\u79cd\u662f\u4f7f\u7528 ",a.a.createElement("code",null,"props"),",\u5229\u7528\u4e2d\u95f4\u5c42\u5c42\u4f20\u9012\u7684\u65b9\u5f0f\uff0c\u4f46\u662f\u8fd9\u6837\u4e0d\u597d\u7ef4\u62a4\uff0c\u4e00\u65e6\u4e00\u4e2a\u5c42\u7ea7\u65ad\u5f00\u4e86\u5c31\u4f1a\u51fa\u73b0\u95ee\u9898\uff0c\u627e\u95ee\u9898\u4e5f\u4e0d\u597d\u5b9a\u4f4d"),a.a.createElement("li",null,"\u7b2c\u4e8c\u79cd\u662f\u4f7f\u7528 ",a.a.createElement("code",null,"context"),",",a.a.createElement("code",null,"context")," \u76f8\u5f53\u4e8e\u4e00\u4e2a\u5927\u5bb9\u5668\uff0c\u6211\u4eec\u53ef\u4ee5\u628a\u8981\u901a\u4fe1\u7684\u5185\u5bb9\u653e\u8fdb\u53bb\uff0c\u8fd9\u6837\u4e0d\u7ba1\u5d4c\u5957\u591a\u6df1\uff0c\u90fd\u53ef\u4ee5\u968f\u610f\u53d6\u7528\uff0c\u5bf9\u8de8\u8d8a\u591a\u5c42\u7684\u53ef\u4ee5\u7528 context"))),a.a.createElement("li",null,a.a.createElement("p",null,"\u975e\u5d4c\u5957\u5173\u7cfb\u7ec4\u4ef6\u901a\u4fe1 \u975e\u5d4c\u5957\u5173\u7cfb\u7ec4\u4ef6\uff0c\u5c31\u662f\u6ca1\u6709\u5305\u542b\u4efb\u4f55\u5173\u7cfb\u7684\u7ec4\u4ef6\uff0c\u5305\u62ec\u5144\u5f1f\u7ec4\u4ef6\u4ee5\u53ca\u4e0d\u5728\u540c\u4e00\u4e2a\u7236\u7ec4\u4ef6\u7684\u975e\u5144\u5f1f\u7ec4\u4ef6"),a.a.createElement("ul",null,a.a.createElement("li",null,"\u53ef\u4ee5\u4f7f\u7528\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u901a\u4fe1(",a.a.createElement("code",null,"emmit"),")"),a.a.createElement("li",null,"\u53ef\u4ee5\u4f7f\u7528 ",a.a.createElement("code",null,"redux")," \u8fdb\u884c\u5168\u5c40\u72b6\u6001\u7ba1\u7406"),a.a.createElement("li",null,"\u5982\u679c\u662f\u5144\u5f1f\u7ec4\u4ef6\u901a\u4fe1\uff0c\u53ef\u4ee5\u627e\u5230\u8fd9\u4e24\u4e2a\u5144\u5f1f\u7ec4\u4ef6\u7684\u7236\u7ec4\u4ef6\u901a\u8fc7\u7236\u5b50\u7ec4\u4ef6\u4e4b\u95f4\u7684\u901a\u4fe1\u65b9\u5f0f\u8fdb\u884c\u4f20\u9012")))),a.a.createElement("h2",{id:"2\u8bf4\u4e00\u4e0b-react-fiber"},a.a.createElement(c["AnchorLink"],{to:"#2\u8bf4\u4e00\u4e0b-react-fiber","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"2\u3001\u8bf4\u4e00\u4e0b react-fiber"),a.a.createElement("p",null,"\u80cc\u666f\uff1a"),a.a.createElement("blockquote",null,a.a.createElement("p",null,"react \u8fdb\u884c\u7ec4\u4ef6\u6e32\u67d3\u65f6\uff0c\u4ece setState \u5f00\u59cb\u5230\u6e32\u67d3\u6574\u4e2a\u8fc7\u7a0b\u662f\u540c\u6b65\u7684\uff0c\u5982\u679c\u9700\u8981\u6e32\u67d3\u7684\u7ec4\u4ef6\u6bd4\u8f83\u5e9e\u5927\uff0cjs \u5c31\u4f1a\u5360\u636e\u4e3b\u7ebf\u7a0b\u65f6\u95f4\u8f83\u957f\uff0c\u4f1a\u5bfc\u81f4\u9875\u9762\u54cd\u5e94\u7684\u6027\u80fd\u53d8\u5dee\uff0c\u4f7f\u5f97 react \u5728\u52a8\u753b\u3001\u624b\u52bf\u7b49\u5e94\u7528\u4e2d\u6548\u679c\u6bd4\u8f83\u5dee\u3002"),a.a.createElement("p",null,"\u9875\u9762\u5361\u987f\uff1aStack reconciler \u7684\u5de5\u4f5c\u6d41\u7a0b\u5f88\u60f3\u51fd\u6570\u7684\u8c03\u7528\u8fc7\u7a0b\u3002\u7236\u7ec4\u4ef6\u91cc\u9762\u8c03\u7528\u5b50\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u7c7b\u6bd4\u4e3a\u51fd\u6570\u7684\u9012\u5f52\uff0c\u5bf9\u4e8e\u7279\u522b\u5e9e\u5927\u7684 DOM \u6811\u6765\u8bf4\uff0creconciliation \u8fc7\u7a0b\u4f1a\u5f88\u957f\uff0c\u8d85\u8fc7 16ms\uff0c\u5728\u8fd9\u671f\u95f4\uff0c\u4e3b\u7ebf\u7a0b\u90fd\u662f\u88ab js \u5360\u7528\u7684\uff0c\u56e0\u6b64\u4efb\u4f55\u4ea4\u4e92\u3001\u5e03\u5c40\u3001\u6e32\u67d3\u90fd\u4f1a\u505c\u6b62\uff0c\u7ed9\u7528\u6237\u7684\u611f\u89c9\u5c31\u662f\u9875\u9762\u88ab\u5361\u4f4f\u4e86")),a.a.createElement("p",null,"\u5b9e\u73b0\u539f\u7406\uff1a"),a.a.createElement("blockquote",null,a.a.createElement("p",null,"\u65e7\u7248 React \u91c7\u7528\u9012\u5f52\u7684\u65b9\u5f0f\u8fdb\u884c\u6e32\u67d3\uff0c\u4f7f\u7528\u7684\u662f js \u5f15\u64ce\u81ea\u8eab\u7684\u51fd\u6570\u8c03\u7528\u6808\uff0c\u4ed6\u4f1a\u4e00\u76f4\u6267\u884c\u5230\u6808\u7a7a\u4e3a\u6b62\uff0c\u800c Fiber \u5b9e\u73b0\u4e86\u81ea\u5df1\u7684\u7ec4\u4ef6\u8c03\u7528\u6808\uff0c\u4ed6\u4ee5\u94fe\u8868\u7684\u5f62\u5f0f\u904d\u5386\u7ec4\u4ef6\u6811\uff0c\u53ef\u4ee5\u7075\u6d3b\u7684\u6682\u505c\u3001\u7ee7\u7eed\u548c\u4e22\u5f03\u6267\u884c\u7684\u4efb\u52a1\uff0c\u5b9e\u73b0\u65b9\u5f0f\u662f\u4f7f\u7528\u4e86\u6d4f\u89c8\u5668\u7684 requestldleCallback \u8fd9\u4e00 api\u3002Fiber \u5176\u5b9e\u6307\u7684\u662f\u4e00\u79cd\u6570\u636e\u7ed3\u6784\uff0c\u4ed6\u53ef\u4ee5\u7528\u4e00\u4e2a\u7eaf js \u5bf9\u8c61\u6765\u8868\u793a\uff1a")),a.a.createElement(r["a"],{code:"const fiber = {\n  stateNode, //\u8282\u70b9\u5b9e\u4f8b\n  child, //\u5b50\u8282\u70b9\n  sibling, //\u5144\u5f1f\u8282\u70b9\n  return, //\u7236\u8282\u70b9\n};",lang:"js"}),a.a.createElement("ul",null,a.a.createElement("li",null,"react \u5185\u90e8\u8fd0\u8f6c\u5206\u4e09\u5c42",a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,"virtual dom"),"\u5c42\uff0c\u63cf\u8ff0\u9875\u9762\u957f\u4ec0\u4e48\u6837"),a.a.createElement("li",null,a.a.createElement("code",null,"Reconciler"),"\u5c42\uff0c\u8d1f\u8d23\u8c03\u7528\u7ec4\u4ef6\u751f\u547d\u5468\u671f\u65b9\u6cd5\uff0c\u8fd0\u7528 diff \u7b97\u6cd5"),a.a.createElement("li",null,a.a.createElement("code",null,"Renderer"),"\u5c42\uff0c\u6839\u636e\u4e0d\u540c\u7684\u5e73\u53f0\uff0c\u6e32\u67d3\u51fa\u5bf9\u5e94\u7684\u9875\u9762\uff0c\u6bd4\u8f83\u5e38\u89c1\u7684\u662f ",a.a.createElement("code",null,"ReactDOM")," \u548c ",a.a.createElement("code",null,"ReactNative")))),a.a.createElement("li",null,"\u4e3a\u4e86\u5b9e\u73b0\u4e0d\u5361\u987f\uff0c\u5c31\u9700\u8981\u4e00\u4e2a\u8c03\u5ea6\u5668(",a.a.createElement("code",null,"Scheduler"),") \u6765\u8fdb\u884c\u4efb\u52a1\u7684\u5206\u914d\uff0c\u4f18\u5148\u7ea7\u9ad8\u7684\u4efb\u52a1\uff08\u6bd4\u5982\u952e\u76d8\u8f93\u5165\uff09\u53ef\u4ee5\u6253\u65ad\u4f18\u5148\u7ea7\u4f4e\u7684\u4efb\u52a1\uff08\u5982",a.a.createElement("code",null,"diff"),"\uff09\u7684\u6267\u884c\uff0c\u4ece\u800c\u66f4\u5feb\u7684\u751f\u6548\uff0c\u4efb\u52a1\u7684\u4f18\u5148\u7ea7\u6709\u516d\u79cd\uff1a",a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,"synchronous"),"\uff0c\u4e0e\u4e4b\u524d\u7684",a.a.createElement("code",null,"Stack Reconciler"),"\u64cd\u4f5c\u4e00\u6837\uff0c\u540c\u6b65\u6267\u884c"),a.a.createElement("li",null,a.a.createElement("code",null,"task")," ,\u5728",a.a.createElement("code",null,"next tick"),"\u4e4b\u524d\u6267\u884c"),a.a.createElement("li",null,a.a.createElement("code",null,"animation"),"\uff0c\u4e0b\u4e00\u5e27\u4e4b\u524d\u6267\u884c"),a.a.createElement("li",null,a.a.createElement("code",null,"high"),",\u5728\u4e0d\u4e45\u7684\u5c06\u6765\u7acb\u5373\u6267\u884c"),a.a.createElement("li",null,a.a.createElement("code",null,"low"),",\u7a0d\u5fae\u8fdf\u4e9b\u4e5f\u6ca1\u5173\u7cfb"),a.a.createElement("li",null,a.a.createElement("code",null,"offscreen"),"\uff0c\u4e0b\u4e00\u6b21",a.a.createElement("code",null,"render"),"\u65f6\u6216",a.a.createElement("code",null,"scroll"),"\u65f6\u624d\u6267\u884c"))),a.a.createElement("li",null,a.a.createElement("code",null,"Fiber Reconciler(react)"),"\u6267\u884c\u9636\u6bb5",a.a.createElement("ul",null,a.a.createElement("li",null,"\u9636\u6bb5\u4e00\uff0c\u751f\u6210 ",a.a.createElement("code",null,"Fiber")," \u6811\uff0c\u5f97\u51fa\u9700\u8981\u66f4\u65b0\u7684\u8282\u70b9\u4fe1\u606f\uff0c\u8fd9\u4e00\u6b65\u662f\u4e00\u4e2a\u6e10\u8fdb\u7684\u8fc7\u7a0b\uff0c\u53ef\u4ee5\u88ab\u6253\u65ad"),a.a.createElement("li",null,"\u9636\u6bb5\u4e8c\uff0c\u5c06\u9700\u8981\u66f4\u65b0\u7684\u8282\u70b9\u4e00\u6b21\u6279\u91cf\u66f4\u65b0\uff0c\u8fd9\u4e2a\u8fc7\u7a0b\u4e0d\u80fd\u88ab\u6253\u65ad"))),a.a.createElement("li",null,a.a.createElement("code",null,"Fiber"),"\u6811\uff1a",a.a.createElement("code",null,"Fiver Reconciler"),"\u5728\u9636\u6bb5\u4e00\u8fdb\u884c",a.a.createElement("code",null,"diff"),"\u8ba1\u7b97\u7684\u65f6\u5019\uff0c\u4f1a\u57fa\u4e8e",a.a.createElement("code",null,"Virtual DOM"),"\u6811\u751f\u6210\u4e00\u9897",a.a.createElement("code",null,"Fiber"),"\u6811\uff0c\u5b83\u7684\u672c\u8d28\u662f\u94fe\u8868"),a.a.createElement("li",null,"\u4ece ",a.a.createElement("code",null,"Stack Reconciler"),"\u5230",a.a.createElement("code",null,"FiberReconciler"),"\uff0c\u6e90\u7801\u5c42\u9762\u5176\u5b9e\u5c31\u662f\u5e72\u4e86\u4e00\u4ef6\u9012\u5f52\u5faa\u73af\u7684\u4e8b\u60c5")),a.a.createElement("h2",{id:"3react-\u9879\u76ee\u4e2d\u6709\u54ea\u4e9b\u7ec6\u8282\u53ef\u4ee5\u4f18\u5316\u5b9e\u9645\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u90fd\u505a\u8fc7\u54ea\u4e9b\u4f18\u5316"},a.a.createElement(c["AnchorLink"],{to:"#3react-\u9879\u76ee\u4e2d\u6709\u54ea\u4e9b\u7ec6\u8282\u53ef\u4ee5\u4f18\u5316\u5b9e\u9645\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u90fd\u505a\u8fc7\u54ea\u4e9b\u4f18\u5316","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"3\u3001react \u9879\u76ee\u4e2d\u6709\u54ea\u4e9b\u7ec6\u8282\u53ef\u4ee5\u4f18\u5316\uff1f\u5b9e\u9645\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u90fd\u505a\u8fc7\u54ea\u4e9b\u4f18\u5316"),a.a.createElement("p",null,"\u4e3b\u8981\u662f\u6d89\u53ca\u5230\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u3001\u4e0a\u7ebf\u4e4b\u540e\u7684\u9996\u5c4f\u3001\u8fd0\u884c\u8fc7\u7a0b\u4e2d\u7684\u4f18\u5316"),a.a.createElement("ul",null,a.a.createElement("li",null,"\u9996\u5c4f\u4f18\u5316\u4e00\u822c\u6d89\u53ca\u5230\u7684\u6307\u6807\u6709 ",a.a.createElement("code",null,"FP\u3001FCP\u3001FMP"),"\uff0c\u8981\u6709\u4e00\u4e2a\u826f\u597d\u7684\u4f53\u9a8c\u662f\u5c3d\u53ef\u80fd\u7684\u628a ",a.a.createElement("code",null,"FCP")," \u63d0\u524d\uff0c\u9700\u8981\u505a\u4e00\u4e9b\u5de5\u7a0b\u5316\u7684\u5904\u7406\uff0c\u53bb\u4f18\u5316\u8d44\u6e90\u7684\u52a0\u8f7d\u65b9\u5f0f\u4ee5\u53ca\u5206\u5305\u7b56\u7565\uff0c\u8d44\u6e90\u7684\u51cf\u5c11\u662f\u6700\u6709\u6548\u7684\u52a0\u5feb\u9996\u5c4f\u6253\u5f00\u7684\u65b9\u5f0f"),a.a.createElement("li",null,"\u5bf9\u4e8e ",a.a.createElement("code",null,"CSR")," \u7684\u5e94\u7528\uff0c",a.a.createElement("code",null,"FCP")," \u7684\u8fc7\u7a0b\u4e00\u822c\u662f\u9996\u5148\u52a0\u8f7d js \u548c css,js \u5728\u672c\u5730\u6267\u884c\u5b8c\u6210\uff0c\u7136\u540e\u52a0\u8f7d\u6570\u636e\u56de\u6765\u505a\u5185\u5bb9\u6e32\u67d3\uff0c\u6240\u4ee5 ",a.a.createElement("code",null,"CSR")," \u53ef\u4ee5\u8003\u8651\u9aa8\u67b6\u5c4f\u548c\u9884\u6e32\u67d3(\u90e8\u5206\u7ed3\u6784\u6e32\u67d3)\u3001",a.a.createElement("code",null,"suspence")," \u4e0e ",a.a.createElement("code",null,"lazy")," \u505a\u61d2\u52a0\u8f7d\u52a8\u6001\u7ec4\u4ef6\u7684\u65b9\u5f0f"),a.a.createElement("li",null,"\u4e0d\u7ba1\u5bf9\u4e8e ",a.a.createElement("code",null,"CSR")," \u6216\u8005 ",a.a.createElement("code",null,"SSR"),"\u3001\u90fd\u5efa\u8bae\u914d\u5408\u4f7f\u7528 ",a.a.createElement("code",null,"Service worker")," \u6765\u63a7\u5236\u8d44\u6e90\u7684\u8c03\u914d\u53ca\u9aa8\u67b6\u5c4f\u79d2\u5f00\u7684\u4f53\u9a8c"),a.a.createElement("li",null,"react \u9879\u76ee\u4e0a\u7ebf\u4e4b\u540e\uff0c\u9996\u5148\u4fdd\u969c\u7684\u662f\u53ef\u7528\u6027\uff0c\u6240\u4ee5\u901a\u8fc7 ",a.a.createElement("code",null,"React.Profiler")," \u5206\u5b50\u7ec4\u4ef6\u7684\u6e32\u67d3\u6b21\u6570\u53ca\u8017\u65f6\u7684\u4efb\u52a1\uff0c\u4f46\u662f Profile \u8bb0\u5f55\u7684\u662f commit \u9636\u6bb5\u7684\u6570\u636e\uff0c\u6240\u4ee5\u5bf9\u4e8e react \u8c03\u548c\u9636\u6bb5\u5c31\u9700\u8981\u7ed3\u5408 performanceAPI \u4e00\u8d77\u5206\u6790"),a.a.createElement("li",null,"\u7531\u4e8e React \u7236\u7ec4\u4ef6 props \u6539\u53d8\u4e4b\u540e\uff0c\u6240\u6709\u4e0e props \u76f8\u5173\u5b50\u7ec4\u4ef6\u5728\u6ca1\u6709\u6dfb\u52a0\u6761\u4ef6\u63a7\u5236\u7684\u60c5\u51b5\u4e0b\u4e5f\u4f1a\u89e6\u53d1 render \u6e32\u67d3\uff0c\u8fd9\u662f\u6ca1\u6709\u5fc5\u8981\u7684\uff0c\u53ef\u4ee5\u7ed3\u5408 react \u7684 ",a.a.createElement("code",null,"PureComponent")," \u4ee5\u53ca ",a.a.createElement("code",null,"React.memo")," \u7b49\u6d45\u6bd4\u8f83\u5904\u7406\uff0c\u8fd9\u4e2d\u95f4\u6d89\u53ca\u5230\u4e0d\u53ef\u53d8\u6570\u636e\u7684\u5904\u7406\uff0c\u5f53\u7136\u4e5f\u53ef\u4ee5\u7ed3\u5408 ",a.a.createElement("code",null,"shouldComponentUpdate")," \u505a\u6df1\u6bd4\u8f83\u5904\u7406"),a.a.createElement("li",null,"\u6240\u4ee5\u8fd0\u884c\u72b6\u6001\u7684\u4f18\u5316\uff0c\u90fd\u51cf\u5c11\u4e0d\u5fc5\u8981\u7684 render,",a.a.createElement("code",null,"React.useMemo")," \u548c ",a.a.createElement("code",null,"React.useCallback")," \u4e5f\u53ef\u4ee5\u505a\u5f88\u591a\u4f18\u5316\u7684\u5730\u65b9"),a.a.createElement("li",null,"\u4fdd\u969c\u5e94\u7528\u7684\u53ef\u7528\u6027\uff0c\u53ef\u4ee5\u4f7f\u7528 ",a.a.createElement("code",null,"componentDidCatch")," \u5904\u7406")),a.a.createElement("p",null,a.a.createElement("strong",null,"\u5b9e\u9645\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u7684\u4f18\u5316\u70b9")),a.a.createElement("ol",null,a.a.createElement("li",null,"\u4fdd\u8bc1\u6570\u636e\u7684\u4e0d\u53ef\u53d8\u6027"),a.a.createElement("li",null,"\u4f7f\u7528\u552f\u4e00\u7684\u952e\u503c\u8fed\u4ee3"),a.a.createElement("li",null,"\u4f7f\u7528 ",a.a.createElement("code",null,"webworker")," \u505a\u5bc6\u96c6\u578b\u7684\u4efb\u52a1\u5904\u7406"),a.a.createElement("li",null,"\u4e0d\u5728 ",a.a.createElement("code",null,"render")," \u4e2d\u5904\u7406\u6570\u636e"),a.a.createElement("li",null,"\u4e0d\u5fc5\u8981\u7684\u6807\u7b7e,\u4f7f\u7528 ",a.a.createElement("code",null,"React.Fragments"))),a.a.createElement("h2",{id:"4-\u5728\u4e0d\u4f7f\u7528-vuereact-\u7684\u524d\u63d0\u4e0b\u5199\u4ee3\u7801\u89e3\u51b3\u4e00\u4e0b\u95ee\u9898"},a.a.createElement(c["AnchorLink"],{to:"#4-\u5728\u4e0d\u4f7f\u7528-vuereact-\u7684\u524d\u63d0\u4e0b\u5199\u4ee3\u7801\u89e3\u51b3\u4e00\u4e0b\u95ee\u9898","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"4. \u5728\u4e0d\u4f7f\u7528 vue\u3001react \u7684\u524d\u63d0\u4e0b\u5199\u4ee3\u7801\u89e3\u51b3\u4e00\u4e0b\u95ee\u9898"),a.a.createElement("ol",null,a.a.createElement("li",null,'\u4e00\u4e2a list \u9875\u9762\u4e0a\uff0c\u542b\u6709 1000 \u4e2a\u6761\u76ee\u7684\u5f85\u529e\u5217\u8868\uff0c\u73b0\u5728\u5176\u4e2d 100 \u9879\u5728\u540c\u4e00\u65f6\u95f4\u8fbe\u5230\u4e86\u8fc7\u671f\u65f6\u95f4\uff0c\u9700\u8981\u5728\u5bf9\u5e94\u9879\u7684 text-node \u91cc\u9762\u6dfb\u52a0"\u5df2\u8fc7\u671f"\u7684\u6587\u5b57\uff0c\u9700\u8981\u5c3d\u53ef\u80fd\u7684\u51cf\u5c11 dom \u91cd\u7ed8\u6b21\u6570\u4ee5\u63d0\u5347\u6027\u80fd'),a.a.createElement("li",null,"\u5c1d\u8bd5\u4f7f\u7528 vue \u6216 react \u89e3\u51b3\u4e0a\u8ff0\u95ee\u9898")),a.a.createElement("p",null,a.a.createElement("strong",null,"\u539f\u751f\u5b9e\u73b0"),a.a.createElement("code",null,"createdocumentfragment()"),"\u65b9\u6cd5\u521b\u5efa\u4e86\u4e00\u865a\u62df\u7684\u8282\u70b9\u5bf9\u8c61\uff0c\u8282\u70b9\u5bf9\u8c61\u5305\u542b\u6240\u6709\u5c5e\u6027\u548c\u65b9\u6cd5\u3002 \u5f53\u4f60\u60f3\u63d0\u53d6\u6587\u6863\u7684\u4e00\u90e8\u5206\uff0c\u6539\u53d8\uff0c\u589e\u52a0\uff0c\u6216\u5220\u9664\u67d0\u4e9b\u5185\u5bb9\u53ca\u63d2\u5165\u5230\u6587\u6863\u672b\u5c3e\u53ef\u4ee5\u4f7f\u7528 ",a.a.createElement("code",null,"createDocumentFragment()")," \u65b9\u6cd5\u3002 \u4f60\u4e5f\u53ef\u4ee5\u4f7f\u7528\u6587\u6863\u7684\u6587\u6863\u5bf9\u8c61\u6765\u6267\u884c\u8fd9\u4e9b\u53d8\u5316\uff0c\u4f46\u8981\u9632\u6b62\u6587\u4ef6\u7ed3\u6784\u88ab\u7834\u574f\uff0ccreateDocumentFragment() \u65b9\u6cd5\u53ef\u4ee5\u66f4\u5b89\u5168\u6539\u53d8\u6587\u6863\u7684\u7ed3\u6784\u53ca\u8282\u70b9"),a.a.createElement(r["a"],{code:"<body>\n  <button id=\"expire1\">\u8fc7\u671f\u8bbe\u7f6e\uff08\u66b4\u529b\u6cd5\uff09</button>\n  <button id=\"expire2\">\u8fc7\u671f\u8bbe\u7f6e\uff08innerHtml)</button>\n  <ul id=\"wrap\"></ul>\n  <script type=\"text/javascript\">\n    //\u751f\u6210\u5927\u91cfdom\n    let start = new Date().getTime();\n    let $ul = document.getElementById('wrap');\n    let el = document.createDocumentFragment(); //\u5173\u952e\u662f\u8fd9\u4e00\u53e5\n\n    let allKeys = [];\n    for (let i = 0; i < 1000; i++) {\n      let li = document.createElement('li');\n      li.dataset.key = i;\n      li.innerHTML = i;\n      el.appendChild(li);\n      allKeys.push(i);\n    }\n    // $ul.appendChild(el)\n\n    //\u751f\u6210\u8fc7\u671f\u9879\n    function getExpireKeys() {\n      let keys = [];\n      while (keys.length < 100) {\n        let randomKey = Math.floor(Math.random() * 1000);\n        if (keys.indexOf(randomKey) === -1) {\n          keys.push(randomKey);\n        } else {\n          continue;\n        }\n      }\n      return keys;\n    }\n\n    //\u66b4\u529b\u6cd5\n    document.getElementById('expire1').onclick = function() {\n      let expireKeys = getExpireKeys();\n      let children = $ul.children;\n      let start = Date.now();\n      for (let i = 0; i < expireKeys.length; i++) {\n        const element = document.querySelector(\n          `li[data-key=\"${expireKeys[i]}\"]`,\n        );\n        element.innerHTML = element.innerHTML + '\u5df2\u8fc7\u671f';\n      }\n    };\n    //\u6a21\u677f\u5b57\u7b26\u4e32\uff08\u6709\u95ee\u9898 \u663e\u793a\u4e0d\u51fa\u6765\uff09\n    document.getElementById('expire2').onclick = function() {\n      let expireKeys = getExpireKeys();\n      const item = [];\n      for (let i = 0; i < allKeys.length; i++) {\n        $ul.append(\n          `<li>${allKeys[i]} ${\n            expireKeys.indexOf(allKeys[i]) !== -1 ? '\u5df2\u8fc7\u671f' : ''\n          }</li>`,\n        );\n        // item.push(`<li>${allKeys[i]} ${expireKeys.indexOf(allKeys[i])!==-1?'\u5df2\u8fc7\u671f':''}</li>`)\n      }\n      // $ul.append(item[0])\n      console.log($ul);\n    };\n\n    //react\u7684\u65b9\u5f0f\n    class APP1 extends Component {\n      constructor(props) {\n        super(props);\n        this.state = {\n          allKeys: [],\n          expireKeys: [],\n        };\n      }\n      componentDidMount() {\n        let allKeys = [];\n        for (let i = 0; i < 1000; i++) {\n          allKeys.push(i);\n        }\n        this.setState({ allKeys, expireKeys: this.getExpireKeys() });\n      }\n      getExpireKeys() {\n        let keys = [];\n        while (keys.length < 100) {\n          let randomKey = Math.floor(Math.random() * 1000);\n          if (keys.indexOf(randomKey) === -1) {\n            keys.push(randomKey);\n          } else {\n            continue;\n          }\n        }\n        return keys;\n      }\n      render() {\n        let { allKeys, expireKeys } = this.state;\n        return (\n          <div>\n            <ul>\n              {allKeys.map(item => {\n                return (\n                  <li key={item}>\n                    {item}\n                    {expireKeys.indexOf(item) === -1 ? '' : '\u5df2\u8fc7\u671f'}\n                  </li>\n                );\n              })}\n            </ul>\n          </div>\n        );\n      }\n    }\n  <\/script>\n</body>",lang:"html"}),a.a.createElement("h2",{id:"5\u8bf4\u8bf4\u865a\u62df-dom"},a.a.createElement(c["AnchorLink"],{to:"#5\u8bf4\u8bf4\u865a\u62df-dom","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"5\u3001\u8bf4\u8bf4\u865a\u62df DOM?"),a.a.createElement("p",null,a.a.createElement("strong",null,"\u865a\u62df DOM \u662f\u4ec0\u4e48\uff1f")),a.a.createElement("p",null,"\u672c\u8d28\u4e0a\u6765\u8bf4\uff1a\u865a\u62df ",a.a.createElement("code",null,"DOM")," \u662f\u4e00\u4e2a ",a.a.createElement("code",null,"javascript")," \u5bf9\u8c61\uff0c\u901a\u8fc7\u5bf9\u8c61\u7684\u65b9\u5f0f\u6765\u8868\u793a DOM \u7ed3\u6784\uff0c\u5c06\u9875\u9762\u7684\u72b6\u6001\u62bd\u8c61\u4e3a js \u5bf9\u8c61\u7684\u5f62\u5f0f\uff0c\u914d\u5408\u4e0d\u540c\u60f3\u6e32\u67d3\u5de5\u5177\uff0c\u662f\u8de8\u5e73\u53f0\u6e32\u67d3\u6210\u4e3a\u53ef\u80fd\u3002\u901a\u8fc7\u4e8b\u52a1\u5904\u7406\u673a\u5236\uff0c\u5c06\u591a\u6b21 DOM \u4fee\u6539\u7684\u7ed3\u679c\u4e00\u6b21\u6027\u66f4\u65b0\u5230\u9875\u9762\u4e0a\uff0c\u4ece\u800c",a.a.createElement("strong",null,"\u6709\u6548\u7684\u51cf\u5c11\u9875\u9762\u6e32\u67d3\u7684\u6b21\u6570\uff0c\u51cf\u5c11\u4fee\u6539 DOM \u91cd\u7ed8\u548c\u91cd\u6392\u6b21\u6570\uff0c\u63d0\u9ad8\u6e32\u67d3\u6027\u80fd")),a.a.createElement("p",null,a.a.createElement("strong",null,"\u4e3a\u4ec0\u4e48\u8981\u7528\u865a\u62df DOM\uff1f")),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,"\u4fdd\u8bc1\u6027\u80fd\u4e0b\u9650\uff0c\u5728\u4e0d\u8fdb\u884c\u624b\u52a8\u4f18\u5316\u7684\u60c5\u51b5\u4e0b\uff0c\u63d0\u4f9b\u8fc7\u5f97\u53bb\u7684\u6027\u80fd"),a.a.createElement("p",null,"\u4e3a\u4ec0\u4e48\u8981\u4f7f\u7528\u865a\u62df DOM?\u662f\u56e0\u4e3a\u5feb\u5417\uff1f\uff0c\u5b9e\u9645\u4e0a\u4e0d\u4e00\u5b9a\u662f\u5feb\u3002\u9996\u6b21\u6e32\u67d3\u5927\u91cf DOM\uff0c\u7531\u4e8e\u591a\u4e86\u4e00\u5c42\u865a\u62df DOM \u7684\u8ba1\u7b97\uff0c\u6bd4 innerHtml \u63d2\u5165\u7684\u6162\uff0c\u4f46\u662f\u5728\u771f\u5b9e DOM \u64cd\u4f5c\u7684\u65f6\u5019\u8fdb\u884c\u9488\u5bf9\u6027\u7684\u4f18\u5316\u65f6\uff0c\u8fd8\u662f\u66f4\u5feb\u7684")),a.a.createElement("li",null,a.a.createElement("p",null,"\u8de8\u5e73\u53f0"),a.a.createElement("p",null,"\u5bf9\u4e8e\u8de8\u5e73\u53f0\u6280\u672f\u6765\u8bf4\uff0c\u91cd\u8981\u7684\u610f\u4e49\u5728\u4e8e\uff1a"),a.a.createElement("p",null,"\u865a\u62df DOM \u662f DOM \u5728\u5185\u5b58\u4e2d\u7684\u4e00\u4e2a\u8f7b\u91cf\u7ea7\u7684\u8868\u8fbe\u65b9\u5f0f\uff0c\u662f\u4e00\u79cd\u540c\u610f\u7ea6\u5b9a\uff0c\u53ef\u4ee5\u901a\u8fc7\u4e0d\u540c\u7684\u6e32\u67d3\u5f15\u64ce\u751f\u6210\u4e0d\u540c\u5e73\u53f0\u7684\u7684 UI"),a.a.createElement("p",null,"\u865a\u62df DOM \u7684\u53ef\u79fb\u690d\u6027\u975e\u5e38\u597d\uff0c\u8fd9\u610f\u5473\u7740\u53ef\u4ee5\u6e32\u67d3\u5230 DOM \u4ee5\u5916\u7684\u4efb\u4f55\u7aef\uff0c\u53ef\u4ee5\u505a\u5f88\u591a\u4e8b\u60c5"),a.a.createElement("blockquote",null,a.a.createElement("p",null,"\u6ce8\u610f \u865a\u62df DOM \u771f\u6b63\u7684\u4ef7\u503c\u4ece\u6765\u90fd\u4e0d\u662f\u6027\u80fd\uff0c\u800c\u662f\u4e0d\u7ba1\u6570\u636e\u600e\u4e48\u53d8\u5316\u90fd\u53ef\u4ee5\u7528\u6700\u5c0f\u7684\u4ee3\u4ef7\u6765\u66f4\u65b0 DOM\uff0c\u800c\u4e14\u63a9\u76d6\u4e86\u5e95\u5c42\u7684 DOM \u64cd\u4f5c\uff0c\u8ba9\u4f60\u7528\u58f0\u660e\u5f0f\u7684\u65b9\u5f0f\u6765\u63cf\u8ff0\u4f60\u7684\u76ee\u7684\uff0c\u4ece\u6765\u8ba9\u6765\u5f85\u66f4\u5bb9\u6613\u7ef4\u62a4")))),a.a.createElement("h2",{id:"6\u54ea\u4e9b\u65b9\u6cd5\u4f1a\u89e6\u53d1-react-\u91cd\u65b0\u6e32\u67d3"},a.a.createElement(c["AnchorLink"],{to:"#6\u54ea\u4e9b\u65b9\u6cd5\u4f1a\u89e6\u53d1-react-\u91cd\u65b0\u6e32\u67d3","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"6\u3001\u54ea\u4e9b\u65b9\u6cd5\u4f1a\u89e6\u53d1 react \u91cd\u65b0\u6e32\u67d3\uff1f"),a.a.createElement("ol",null,a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"setSate()"),"\u65b9\u6cd5\u7684\u8c03\u7528 \u901a\u5e38\u60c5\u51b5\u4e0b\uff0csetState \u89e6\u53d1\u4f1a\u89e6\u53d1 render,\u4f46\u662f setState \u89e6\u53d1\u4e00\u5b9a\u4f1a\u91cd\u65b0\u6e32\u67d3\u5417\uff1f\u7b54\u6848\u662f\u4e0d\u4e00\u5b9a\uff0c\u5f53",a.a.createElement("code",null,"setState(null)"),"\u7684\u65f6\u5019\u4e0d\u4f1a\u89e6\u53d1 render \u91cd\u65b0\u6e32\u67d3")),a.a.createElement("li",null,a.a.createElement("p",null,"\u7236\u7ec4\u4ef6\u91cd\u65b0\u6e32\u67d3\u4e86,\u5373\u4f7f\u5b50\u7ec4\u4ef6\u7684 props \u6ca1\u6709\u6539\u53d8\uff0c\u5b50\u7ec4\u4ef6\u4e5f\u4f1a\u91cd\u65b0 render"))),a.a.createElement("p",null,a.a.createElement("strong",null,"\u91cd\u65b0\u6e32\u67d3\u505a\u4e86\u4ec0\u4e48")),a.a.createElement("ul",null,a.a.createElement("li",null,"\u4f1a\u5bf9\u6bd4\u65b0\u65e7 ",a.a.createElement("code",null,"Vnode")," \u8fdb\u884c\u5bf9\u6bd4\uff0c\u4e5f\u5c31\u662f\u6211\u4eec\u6240\u8bf4\u7684 ",a.a.createElement("code",null,"DOMdiff")),a.a.createElement("li",null,"\u5bf9\u65b0\u65e7\u4e24\u68f5\u6811\u8fdb\u884c\u4e00\u4e2a\u6df1\u5ea6\u4f18\u5148\u904d\u5386\uff0c\u8fd9\u6837\u6bcf\u4e00\u4e2a\u8282\u70b9\u90fd\u4f1a\u6709\u4e00\u4e2a\u6807\u8bb0\uff0c\u5728\u904d\u5386\u7684\u65f6\u5019\uff0c\u6bcf\u904d\u5386\u4e00\u4e2a\u8282\u70b9\uff0c\u5c31\u4f1a\u5bf9\u6bd4\u8fd9\u4e2a\u8282\u70b9\u6811\uff0c\u5982\u679c\u6709\u5dee\u5f02\u5c31\u653e\u5230\u8fd9\u4e2a\u5bf9\u8c61\u91cc\u9762"),a.a.createElement("li",null,"\u904d\u5386\u5dee\u5f02\u5bf9\u8c61\uff0c\u6839\u636e\u5dee\u5f02\u7684\u7c7b\u578b\uff0c\u6839\u636e\u5bf9\u5e94\u89c4\u5219\u66f4\u65b0 VNode")),a.a.createElement("p",null,"react \u7684\u5904\u7406 render \u7684\u57fa\u672c\u601d\u60f3\u5c31\u662f\u6bcf\u4e00\u6b21\u6709\u53d8\u52a8\u5c31\u4f1a\u91cd\u65b0\u6e32\u67d3\u6574\u4e2a\u5e94\u7528\uff0c\u5728 Virtual DOM \u6ca1\u6709\u51fa\u73b0\u4e4b\u524d\uff0c\u6700\u7b80\u5355\u7684\u65b9\u6cd5\u5c31\u662f\u8c03\u7528 innerHtml \u76f4\u63a5\u66ff\u6362\u91cc\u9762\u7684\u5185\u5bb9\uff0cVirtual DOM \u5389\u5bb3\u7684\u5730\u65b9\u5e76\u4e0d\u662f\u8bf4\u4ed6\u6bd4\u76f4\u63a5\u64cd\u4f5c DOM \u5feb\uff0c\u800c\u662f\u8bf4\u4e0d\u7ba1\u6570\u636e\u600e\u4e48\u53d8\uff0c\u90fd\u4f1a\u5c3d\u91cf\u4ee5\u6700\u5c0f\u7684\u4ee3\u4ef7\u53bb\u66f4\u65b0 DOM\u3002react \u5c06 render \u51fd\u6570\u8fd4\u56de\u7684\u865a\u62df DOM \u6811\u4e0e\u8001\u7684\u6bd4\u8f83\u4ece\u800c\u786e\u5b9a DOM \u8981\u4e0d\u8981\u66f4\u65b0\uff0c\u5e94\u8be5\u600e\u4e48\u66f4\u65b0\uff0c\u5f53 DOM \u6811\u5f88\u5927\u7684\u65f6\u5019\uff0c\u904d\u5386\u4e24\u9897\u6811\u8fdb\u884c\u5bf9\u6bd4\u5dee\u5f02\u8fd8\u662f\u5f88\u8017\u6027\u80fd\u7684\uff0c\u7279\u522b\u662f\u9876\u5c42\u7684 setState \u6709\u4e00\u4e2a\u5fae\u5c0f\u6539\u53d8\u7684\u65f6\u5019\uff0c\u5c31\u4f1a\u9ed8\u8ba4\u53bb\u904d\u5386\u6574\u68f5\u6811\uff0c\u5c3d\u7ba1 react \u4f7f\u7528\u9ad8\u5ea6\u4f18\u5316\u7684 Diff \u7b97\u6cd5\uff0c\u4f46\u5176\u5b9e\u8fd8\u662f\u5f88\u8017\u6027\u80fd\u7684"),a.a.createElement("p",null,a.a.createElement("strong",null,"\u603b\u7ed3")),a.a.createElement("p",null,"\u867d\u7136 react \u57fa\u4e8e\u865a\u62df Dom \u548c diff \u7b97\u6cd5\u5b9e\u73b0\u4e86\u5bf9 DOM \u6700\u5c0f\u7c92\u5ea6\u7684\u66f4\u65b0\uff0c\u4f46\u662f\u9047\u5230\u590d\u6742\u7684\u573a\u666f\uff0c\u6027\u80fd\u95ee\u9898\u8fd8\u662f\u4e00\u5927\u96be\u9898\u3002 \u6240\u4ee5\u4e0b\u9762\u662f\u53ef\u4ee5\u4f18\u5316\u7684\u70b9\uff1a"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"shouldComponentUpdate"),"\u548c",a.a.createElement("code",null,"PureComponent"),"PureComponent \u901a\u8fc7\u51cf\u5c11\u7236\u7ec4\u4ef6\u7684\u66f4\u65b0\u6765\u89e6\u53d1\u5b50\u7ec4\u4ef6\u7684\u66f4\u65b0\uff0c\u5229\u7528\u4e86\u6d45\u5bf9\u6bd4\u7684\u624b\u6cd5"),a.a.createElement("p",null,a.a.createElement("code",null,"shouldComponentUpdate"),"\u662f\u51b3\u7ec4\u4ef6\u662f\u5426\u91cd\u65b0\u6e32\u67d3")),a.a.createElement("li",null,a.a.createElement("p",null,"\u5229\u7528\u9ad8\u9636\u7ec4\u4ef6 \u5728\u51fd\u6570\u7ec4\u4ef6\u4e2d\u6ca1\u6709",a.a.createElement("code",null,"shouldComponentUpdate"),"\u751f\u547d\u5468\u671f\uff0c\u53ef\u4ee5\u4f7f\u7528\u9ad8\u9636\u7ec4\u4ef6\u6765\u8fbe\u5230\u8fd9\u4e2a\u6548\u679c")),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"React.useMemo"),"\u7528\u6765\u7f13\u5b58\u7ec4\u4ef6\u7684\u6e32\u67d3\uff0c\u907f\u514d\u4e0d\u5fc5\u8981\u7684\u66f4\u65b0\uff0c\u5176\u5b9e\u4e5f\u5c31\u662f\u4e00\u4e2a\u9ad8\u9636\u7ec4\u4ef6\uff0c\u4e0e ",a.a.createElement("code",null,"PureComponent")," \u7c7b\u4f3c\uff0c\u4f46\u662f ",a.a.createElement("code",null,"React.useMemo")," \u53ea\u7528\u4e8e\u51fd\u6570\u7ec4\u4ef6")),a.a.createElement("li",null,a.a.createElement("p",null,"\u5408\u7406\u62c6\u5206\u7ec4\u4ef6 \u4ee5\u66f4\u8f7b\uff0c\u66f4\u5c0f\u7684\u7c92\u5ea6\u6765\u7eb5\u5411\u62c6\u5206\u7ec4\u4ef6"))),a.a.createElement("h2",{id:"7setstate-\u662f\u5f02\u6b65\u8fd8\u662f\u540c\u6b65"},a.a.createElement(c["AnchorLink"],{to:"#7setstate-\u662f\u5f02\u6b65\u8fd8\u662f\u540c\u6b65","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"7\u3001setState \u662f\u5f02\u6b65\u8fd8\u662f\u540c\u6b65\uff1f"),a.a.createElement("p",null,a.a.createElement("code",null,"setState")," \u9ed8\u8ba4\u662f\u5f02\u6b65\u7684\uff0c\u56e0\u4e3a\u5f02\u6b65\u5c31\u53ef\u4ee5\u628a\u4e00\u4e2a\u540c\u6b65\u4ee3\u7801\u4e2d\u7684\u591a\u4e2a setState \u5408\u5e76\u6210\u4e00\u4e2a\u7ec4\u4ef6\u66f4\u65b0\uff0c\u800c\u4e0d\u662f setState \u6267\u884c\u4e00\u6b21\u5c31\u66f4\u65b0\u4e00\u6b21\uff0c\u4f18\u5316\u4e86\u6027\u80fd"),a.a.createElement("p",null,a.a.createElement("code",null,"setState")," \u5728 setTimeout\u3001\u539f\u751f\u4e8b\u4ef6\u91cc\u9762\u662f\u540c\u6b65\u7684"),a.a.createElement("h2",{id:"8react-\u7684\u4f18\u7f3a\u70b9"},a.a.createElement(c["AnchorLink"],{to:"#8react-\u7684\u4f18\u7f3a\u70b9","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"8\u3001react \u7684\u4f18\u7f3a\u70b9\uff1f"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,"\u4f18\u70b9"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,"react \u901f\u5ea6\u5feb")),a.a.createElement("li",null,a.a.createElement("p",null,"\u8de8\u6d4f\u89c8\u5668\u517c\u5bb9")),a.a.createElement("li",null,a.a.createElement("p",null,"\u6a21\u5757\u5316")),a.a.createElement("li",null,a.a.createElement("p",null,"\u5355\u5411\u6570\u636e\u6d41")),a.a.createElement("li",null,a.a.createElement("p",null,"\u540c\u6784\u7684 javascript \u5355\u9875\u9762\u5e94\u7528\u6700\u5927\u7684\u7f3a\u9677\u5c31\u662f\u5bf9 SEO \u4e0d\u53cb\u597d\uff0c\u6240\u4ee5 react \u6709\u4e86\u89e3\u51b3\u65b9\u6848\uff0creact \u53ef\u4ee5\u5728\u670d\u52a1\u7aef\u9884\u6e32\u67d3\u518d\u53d1\u9001\u5230\u5ba2\u6237\u7aef\uff0c\u53ef\u4ee5\u4ece\u9884\u6e32\u67d3\u7684\u9759\u6001\u5185\u5bb9\u4e2d\u6062\u590d\u4e00\u6837\u7684\u8bb0\u5f55\u5230\u52a8\u6001\u5e94\u7528\u4e2d\uff0c"),a.a.createElement("p",null,"\u641c\u7d22\u5f15\u64ce\u722c\u866b\u7a0b\u5e8f\u4f9d\u8d56\u7684\u662f\u670d\u52a1\u7aef\u54cd\u5e94\u800c\u4e0d\u662f javascript \u7684\u6267\u884c\uff0c\u9884\u6e32\u67d3\u6709\u52a9\u4e8e\u641c\u7d22\u5f15\u64ce\u7684\u4f18\u5316")))),a.a.createElement("li",null,a.a.createElement("p",null,"\u7f3a\u70b9"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,"\u53ea\u662f view \u5c42 react \u672c\u8eab\u53ea\u662f\u4e00\u4e2a view \u5c42\uff0c\u4e0d\u662f\u5b8c\u6574\u7684 mvc \u6846\u67b6\uff0c\u5927\u578b\u9879\u76ee\u9700\u8981\u52a0\u4e0a reactRouter\u3001redux \u624d\u884c")),a.a.createElement("li",null,a.a.createElement("p",null,"\u72b6\u6001\u4e0d\u540c\u6b65 \u51fd\u6570\u7684\u8fd0\u884c\u65f6\u72ec\u7acb\u7684\uff0c\u6bcf\u4e2a\u51fd\u6570\u90fd\u6709\u4e00\u4efd\u72ec\u7acb\u7684\u4f5c\u7528\u57df\uff0c",a.a.createElement("strong",null,"\u51fd\u6570\u7684\u53d8\u91cf\u662f\u4fdd\u5b58\u5728\u8fd0\u884c\u65f6\u7684\u4f5c\u7528\u57df\u91cc\u9762"),"\uff0c\u5f53\u6211\u4eec\u6709\u5f02\u6b65\u64cd\u4f5c\u7684\u65f6\u5019\u4eac\u5439\u9047\u5230\u5f02\u6b65\u56de\u8c03\u7684\u53d8\u91cf\u5f15\u7528\u662f\u4e4b\u524d\u7684\uff0c\u4e5f\u5c31\u662f\u65e7\u7684\u6ca1\u6709\u66f4\u65b0\u8fc7\u7684(\u53ef\u4ee5\u7406\u89e3\u4e3a\u95ed\u5305)"),a.a.createElement(r["a"],{code:"import React, { useState } from 'react';\n\nconst App1 = () => {\n  const [counter, setCounter] = useState(0);\n  const add1 = () => {\n    setTimeout(() => {\n      console.log(counter);\n    }, 3000);\n  };\n  return (\n    <div>\n      <p>{counter}</p>\n      <button onClick={() => setCounter(counter + 1)}>\u70b9\u51fb\u52a01</button>\n      <button onClick={add1}>\u70b9\u51fb</button>\n    </div>\n  );\n};\n\nexport default App1;",lang:"js"}),a.a.createElement("p",null,"\u4e0a\u9762\u7684\u4ee3\u7801\uff0c\u5f53\u70b9\u51fb\u7b2c\u4e8c\u4e2a\u6309\u94ae\u4e4b\u540e\u7acb\u9a6c\u70b9\u51fb\u7b2c\u4e00\u4e2a\u6309\u94ae\uff0c\u867d\u7136\u6267\u884c\u52a0\u4e00\u7684\u64cd\u4f5c\uff0c\u4f46\u662f 3 \u79d2\u540e\u6253\u5370\u7684\u8fd8\u662f 0\uff0c\u4e3a\u4ec0\u4e48\u5462\uff1f\u4e3a\u4ec0\u4e48\u4e0d\u662f 1 \u5462\uff1f\u8fd9\u662f\u56e0\u4e3a\u7b2c\u4e00\u4e2a\u51fd\u6570\u6267\u884c\u7684\u662f counter \u662f 0\uff0c",a.a.createElement("code",null,"add1"),"\u6267\u884c\u7684\u65f6\u5019 counter \u662f 0\uff0c\u867d\u7136\u662f 3 \u79d2\u540e\u6267\u884c\u7684\uff0c\u4f46\u662f\u521d\u59cb\u7684\u503c\u5df2\u7ecf\u4fdd\u5b58\u5728\u8fd9\u4e2a\u95ed\u5305\u91cc\u9762\u4e86\uff0c"),a.a.createElement("p",null,"\u8fd9\u4e2a\u95ee\u9898 class component \u4e0d\u4f1a\u6709\uff0c\u56e0\u4e3a class component \u7684\u5c5e\u6027\u548c\u65b9\u6cd5\u90fd\u5b58\u5728\u4e0d\u53d8\u7684",a.a.createElement("code",null,"instance"),"\u4e0a\u53d6\u503c\uff0c\u6240\u4ee5\u4e0d\u5b58\u5728\u5f15\u7528\u662f\u65e7\u7684\u95ee\u9898"),a.a.createElement("p",null,a.a.createElement("strong",null,"\u89e3\u51b3\u65b9\u6cd5")),a.a.createElement("p",null,"\u89e3\u51b3\u8fd9\u4e2a hooks \u7684\u95ee\u9898\u5c31\u662f\u53c2\u7167\u7c7b\u7684 instance,\u7528 ",a.a.createElement("code",null,"useRef")," \u8fd4\u56de\u7684 immutable RefObject(",a.a.createElement("code",null,"current")," \u5c5e\u6027\u662f\u53ef\u53d8\u7684)\u6765\u4fdd\u5b58 state"),a.a.createElement(r["a"],{code:"import React, { useState, useRef, useEffect } from 'react';\n\nconst App1 = () => {\n  const [counter, setCounter] = useState(0);\n  const counterRef = useRef(counter);\n  const add1 = () => {\n    setTimeout(() => {\n      console.log(counterRef.current);\n    }, 3000);\n  };\n  useEffect(() => {\n    counterRef.current = counter;\n  });\n  return (\n    <div>\n      <p>{counter}</p>\n      <button onClick={() => setCounter(counter + 1)}>\u70b9\u51fb\u52a01</button>\n      <button onClick={add1}>\u70b9\u51fb</button>\n    </div>\n  );\n};\n\nexport default App1;",lang:"js"}))),a.a.createElement("p",null,a.a.createElement("strong",null,"hooks \u5e38\u89c1\u95ee\u9898")),a.a.createElement("ol",null,a.a.createElement("li",null,"\u4e0d\u8981\u5728",a.a.createElement("code",null,"useEffect"),"\u91cc\u9762\u5199\u592a\u591a\u7684\u4f9d\u8d56\uff0c\u53ef\u4ee5\u5212\u5206\u6210\u591a\u4e2a\u5355\u4e00\u7684",a.a.createElement("code",null,"useEffect")),a.a.createElement("li",null,"\u91cd\u89c6",a.a.createElement("code",null,"eslint-plugin-react-hooks"),"\u7684\u8b66\u544a"),a.a.createElement("li",null,"\u590d\u6742\u4e1a\u52a1\u4f7f\u7528",a.a.createElement("code",null,"Component"),"\u4ee3\u66ff",a.a.createElement("code",null,"hooks"))))),a.a.createElement("h2",{id:"9\u9ad8\u9636\u7ec4\u4ef6\u548c\u666e\u901a\u7ec4\u4ef6\u6709\u4ec0\u4e48\u533a\u522b\u9002\u7528\u4ec0\u4e48\u573a\u666f"},a.a.createElement(c["AnchorLink"],{to:"#9\u9ad8\u9636\u7ec4\u4ef6\u548c\u666e\u901a\u7ec4\u4ef6\u6709\u4ec0\u4e48\u533a\u522b\u9002\u7528\u4ec0\u4e48\u573a\u666f","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"9\u3001\u9ad8\u9636\u7ec4\u4ef6\u548c\u666e\u901a\u7ec4\u4ef6\u6709\u4ec0\u4e48\u533a\u522b\uff1f\u9002\u7528\u4ec0\u4e48\u573a\u666f\uff1f"),a.a.createElement("blockquote",null,a.a.createElement("p",null,a.a.createElement("code",null,"\u9ad8\u9636\u7ec4\u4ef6(HOC)"),"\u662f React \u4e2d\u590d\u7528\u7ec4\u4ef6\u903b\u8f91\u7684\u4e00\u79cd\u9ad8\u7ea7\u6280\u5de7\uff0cHOC \u81ea\u8eab\u4e0d\u662f React API \u7684\u4e00\u90e8\u5206\uff0c\u5b83\u662f\u4e00\u79cd\u57fa\u4e8e React \u7684\u7ec4\u5408\u7279\u6027\u800c\u5f62\u6210\u7684\u8bbe\u8ba1\u6a21\u5f0f")),a.a.createElement("p",null,"\u9ad8\u9636\u7ec4\u4ef6\u5c31\u662f\u4e00\u4e2a\u51fd\u6570\uff0c\u4ed6\u662f\u63a5\u53d7\u4e00\u4e2a\u7ec4\u4ef6\u4f5c\u4e3a\u53c2\u6570\uff0c\u8fd4\u56de\u4e00\u4e2a\u65b0\u7684\u7ec4\u4ef6\uff0c\u4ed6\u53ea\u662f\u4e00\u79cd\u7ec4\u4ef6\u7684\u8bbe\u8ba1\u6a21\u5f0f\uff0c\u8fd9\u79cd\u8bbe\u8ba1\u6a21\u5f0f\u662f\u7531 react \u81ea\u8eab\u7684\u7ec4\u5408\u6027\u8d28\u5fc5\u7136\u4ea7\u751f\u7684\uff0c\u6211\u4eec\u5c06\u4ed6\u4eec\u79f0\u4e3a\u7eaf\u7ec4\u4ef6\uff0c\u56e0\u4e3a\u4ed6\u4eec\u63a5\u53d7\u4efb\u4f55\u52a8\u6001\u63d0\u4f9b\u7684\u5b50\u7ec4\u4ef6\uff0c\u4f46\u662f\u4ed6\u4eec\u4e0d\u4f1a\u4fee\u6539\u548c\u590d\u5236\u5176\u8f93\u5165\u7ec4\u4ef6\u7684\u4efb\u4f55\u884c\u4e3a"),a.a.createElement(r["a"],{code:"//HOC\nfunction withSubscription(WrappedComponent, selectData) {\n  return class extends React.Component {\n    constructor(props) {\n      super(props);\n      this.state = {\n        data: selectData,\n      };\n    }\n    //\u4e00\u4e9b\u903b\u8f91\u5904\u7406\n    render() {\n      //\u4f7f\u7528\u65b0\u6570\u636e\u6e32\u67d3\u5305\u88c5\u7684\u7ec4\u4ef6\n      return <WrappedComponent data={this.state.data} {...this.props} />;\n    }\n  };\n}\n\n//\u4f7f\u7528\nconst BlogSubscription = withSubscription(BlogPost, (DataSource, props) =>\n  DataSource.getBlogPost(props.id),\n);",lang:"js"}),a.a.createElement("p",null,a.a.createElement("strong",null,"HOC \u4f18\u7f3a\u70b9\uff1a")),a.a.createElement("ul",null,a.a.createElement("li",null,"\u4f18\u70b9\uff1a\u903b\u8f91\u590d\u7528\uff0c\u4e0d\u5f71\u54cd\u88ab\u5305\u88f9\u7ec4\u4ef6\u7684\u5185\u90e8\u903b\u8f91"),a.a.createElement("li",null,"\u7f3a\u70b9\uff1ahoc \u4f20\u9012\u7ed9\u88ab\u5305\u88f9\u7ec4\u4ef6\u7684 props \u5bb9\u6613\u548c\u88ab\u5305\u88f9\u540e\u7684\u7ec4\u4ef6\u91cd\u540d\uff0c\u8fdb\u800c\u88ab\u8986\u76d6")),a.a.createElement("p",null,a.a.createElement("strong",null,"\u5177\u4f53\u5c0f\u4f8b\u5b50")),a.a.createElement("ol",null,a.a.createElement("li",null,"\u6743\u9650\u63a7\u5236 \u5229\u7528\u9ad8\u9636\u7ec4\u4ef6\u7684\u6761\u4ef6\u6e32\u67d3\u7279\u6027\u53ef\u4ee5\u591a\u9875\u9762\u8fdb\u884c\u6743\u9650\u63a7\u5236\uff0c\u6743\u9650\u63a7\u5236\u4e00\u822c\u5206\u4e3a\u4e24\u4e2a\u7ef4\u5ea6\uff1a\u9875\u9762\u7ea7\u522b\u548c\u9875\u9762\u5143\u7d20\u7ea7\u522b")),a.a.createElement(r["a"],{code:"function withAdminAuth(WrappedComponent) {\n  return class extends React.Component {\n    stat = {\n      isAdmin: false,\n    };\n    async UNSAFE_componentWillMount() {\n      const currentRole = await getCurrentUserRole();\n      this.setState({\n        isAdmin: currentRole === 'Admin',\n      });\n    }\n    render() {\n      if (this.state.isAdmin) {\n        return <WrappedComponent {...this.props} />;\n      } else {\n        return <div>\u4f60\u6ca1\u6709\u6743\u9650\u67e5\u770b\u8be5\u9875\u9762</div>;\n      }\n    }\n  };\n}\n\n//\u4f7f\u7528\nclass PageA extends React.Component {\n  constructor(props) {\n    super(props);\n  }\n  UNSAFE_componentWillMount() {}\n  render() {}\n}\nexport default withAdminAuth(PageA);",lang:"js"}),a.a.createElement("ol",{start:2},a.a.createElement("li",null,"\u7ec4\u4ef6\u6e32\u67d3\u6027\u80fd\u8ffd\u8e2a"),a.a.createElement("li",null,"\u9875\u9762\u590d\u7528")),a.a.createElement("h2",{id:"10\u5982\u4f55\u5728-rn-\u4e0a\u505a-android-\u548c-ios-\u7684\u9002\u914d"},a.a.createElement(c["AnchorLink"],{to:"#10\u5982\u4f55\u5728-rn-\u4e0a\u505a-android-\u548c-ios-\u7684\u9002\u914d","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"10\u3001\u5982\u4f55\u5728 RN \u4e0a\u505a Android \u548c ios \u7684\u9002\u914d"),a.a.createElement("ol",null,a.a.createElement("li",null,"\u5e03\u5c40 RN \u91cc\u9762\u662f\u4e0d\u9700\u8981\u5199\u5355\u4f4d\u7684\uff0c\u9ed8\u8ba4\u662f\u50cf\u7d20\u70b9 dp,\u4f46\u662f\u8bbe\u8ba1\u5e08\u4e00\u822c\u7528 px,\u6240\u4ee5\u9700\u8981\u6362\u7b97\uff0c",a.a.createElement("strong",null,"\u6362\u7b97\u516c\u5f0f\u4e3a\uff1apx*screenWidth/uiwidth"),",uiwidth \u4e3a\u8bbe\u8ba1\u5e08\u7684 ui \u8bbe\u8ba1\u57fa\u51c6\u5bbd\u5ea6\uff0c\u6bd4\u5982 640\uff0c750\uff0c1024\uff0cscreenWidth \u4e3a\u8bbe\u5907\u903b\u8f91\u5206\u8fa8\u7387\uff0c\u6bd4\u5982 iphone6 \u5c31\u662f 375"),a.a.createElement("li",null,"\u56fe\u7247 \u4e3a\u4e86\u9002\u914d\u4e0d\u540c\u5206\u8fa8\u7387\u7684\u5c4f\u5e55\uff0c\u9700\u8981\u51c6\u5907 1x\u30012x\u30013x \u4e09\u79cd\u5927\u5c0f\u7684\u5c3a\u5bf8\uff0c\u5047\u5982\u6709\u4e00\u4e2a btn.png\u3001",a.a.createElement(c["Link"],{to:"mailto:btn@2x.png"},"btn@2x.png"),"\u3001",a.a.createElement(c["Link"],{to:"mailto:btn@3x.png"},"btn@3x.png")," \u5728\u4ee3\u7801\u79cd\u4e0d\u8981\u6307\u5b9a\u500d\u56fe\uff0c\u9700\u8981\u4f7f\u7528",a.a.createElement("code",null,"<Image src=","{","require('btn.png')","}","/>")),a.a.createElement("li",null,"\u7ec4\u4ef6\u5206\u4e3a ios\u3001android\u3001\u548c\u4e24\u7aef\u90fd\u9002\u7528\u7684\uff0c\u4e0d\u540c\u7684\u5e73\u53f0\u4f7f\u7528\u4e0d\u540c\u7684\u7ec4\u4ef6")),a.a.createElement("h2",{id:"11\u5355\u5411\u6570\u636e\u6d41\u6709\u4ec0\u4e48\u597d\u5904"},a.a.createElement(c["AnchorLink"],{to:"#11\u5355\u5411\u6570\u636e\u6d41\u6709\u4ec0\u4e48\u597d\u5904","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"11\u3001\u5355\u5411\u6570\u636e\u6d41\u6709\u4ec0\u4e48\u597d\u5904\uff1f"),a.a.createElement("p",null,"\u5355\u5411\u6570\u636e\u6d41\u4f7f\u5f97\u6570\u636e\u6d41\u52a8\u65b9\u5411\u53ef\u4ee5\u8ffd\u8e2a\uff0c\u6d41\u52a8\u5355\u4e00\uff0c\u8ffd\u67e5\u95ee\u9898\u7684\u65f6\u5019\u66f4\u5feb\u6377"),a.a.createElement("p",null,"view \u53d1\u51fa action \u4e4b\u540e\u4e0d\u662f\u4fee\u6539\u539f\u6765\u7684 state,\u800c\u662f\u8fd4\u56de\u4e86\u4e00\u4e2a\u65b0\u7684\uff0c\u53ef\u4ee5\u4fdd\u5b58 state \u7684\u5386\u53f2\u8bb0\u5f55\uff0c\u53ef\u4ee5\u590d\u73b0\u573a\u666f\uff0c\u6613\u6d4b\u8bd5"),a.a.createElement("h2",{id:"12reactcomponent-\u548c-reactpurecomponent-\u7684\u533a\u522b"},a.a.createElement(c["AnchorLink"],{to:"#12reactcomponent-\u548c-reactpurecomponent-\u7684\u533a\u522b","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"12\u3001React.Component \u548c React.PureComponent \u7684\u533a\u522b\uff1f"),a.a.createElement("p",null,"\u5bf9\u4e8e\u57fa\u672c\u7c7b\u578b\uff0c\u6d45\u62f7\u8d1d\u53ea\u662f\u68c0\u67e5\u503c\u662f\u5426\u76f8\u540c"),a.a.createElement("p",null,"\u5bf9\u4e8e\u5f15\u7528\u7c7b\u578b\uff0c\u6d45\u62f7\u8d1d\u53ea\u662f\u68c0\u67e5\u5f15\u7528\u503c\u662f\u5426\u76f8\u7b49\uff0c\u8fd9\u610f\u5473\u7740\u4fee\u6539\u4e86\u4e00\u4e2a\u5bf9\u8c61\u91cc\u9762\u7684\u67d0\u4e00\u4e2a\u4f4d\u7f6e\u7684\u503c\uff0c\u90a3\u4e48\u66f4\u65b0\u524d\u540e\u7684\u5bf9\u8c61\u4ecd\u7136\u76f8\u7b49"),a.a.createElement("p",null,a.a.createElement("strong",null,"\u603b\u7ed3")),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,"React.Component"),"\u9700\u8981\u81ea\u5df1\u5b9e\u73b0",a.a.createElement("code",null,"shouldComponentUpdate()")),a.a.createElement("li",null,a.a.createElement("code",null,"React.PureComponent"),"\u901a\u8fc7 props \u548c state \u7684\u6d45\u5bf9\u6bd4\u6765\u5b9e\u73b0",a.a.createElement("code",null,"shouldComponentUpdate()")),a.a.createElement("li",null,"\u5982\u679c\u7ec4\u4ef6\u5b9a\u4e49\u4e86",a.a.createElement("code",null,"shouldComponentUpdate"),"\uff0c\u65e0\u8bba\u7ec4\u4ef6\u662f\u5426\u662f",a.a.createElement("code",null,"PureComponent"),"\u90fd\u4f1a\u6267\u884c",a.a.createElement("code",null,"shouldComponentUpdate"),"\u7ed3\u679c\u6765\u5224\u65ad\u662f\u5426\u6267\u884c",a.a.createElement("code",null,"update"),",\u5982\u679c\u7ec4\u4ef6\u6ca1\u6709\u5b9e\u73b0",a.a.createElement("code",null,"shouldComponentUpdate"),"\uff0c\u5219\u4f1a\u5224\u65ad\u7ec4\u4ef6\u662f\u5426\u662f",a.a.createElement("code",null,"PureComponent"),"\uff0c\u5982\u679c\u662f\u7684\u8bdd\uff0c\u5219\u4f1a\u65b0\u65e7 props\u3001state \u8fdb\u884c\u6bd4\u8f83\uff0c\u4e00\u65e6\u5fc3\u5c31\u4e0d\u4e00\u81f4\u5c31\u4f1a\u89e6\u53d1\u66f4\u65b0"),a.a.createElement("li",null,a.a.createElement("code",null,"React.PureComponent"),"\u4f18\u7f3a\u70b9\uff1a",a.a.createElement("ul",null,a.a.createElement("li",null,"\u4f18\u70b9\uff1a\u4e0d\u9700\u8981\u5f00\u53d1\u8005\u81ea\u5df1\u5b9e\u73b0",a.a.createElement("code",null,"shouldComponentUpdate")),a.a.createElement("li",null,"\u7f3a\u70b9\uff1a\u53ef\u80fd\u4f1a\u56e0\u4e3a\u6df1\u5c42\u7684\u6570\u636e\u4e0d\u4e00\u81f4\u800c\u4ea7\u751f\u9519\u8bef\u7684\u5426\u5b9a\u5224\u65ad\uff0c\u4ece\u800c\u4e0d\u66f4\u65b0")))),a.a.createElement("h2",{id:"12\u7b80\u5355\u8bf4\u4e00\u4e0b-react-\u548c-vue-\u7684\u5f02\u540c"},a.a.createElement(c["AnchorLink"],{to:"#12\u7b80\u5355\u8bf4\u4e00\u4e0b-react-\u548c-vue-\u7684\u5f02\u540c","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"12\u3001\u7b80\u5355\u8bf4\u4e00\u4e0b react \u548c vue \u7684\u5f02\u540c\uff1f"),a.a.createElement("ol",null,a.a.createElement("li",null,a.a.createElement("p",null,"\u76f8\u4f3c\u4e4b\u5904"),a.a.createElement("ul",null,a.a.createElement("li",null,"\u90fd\u5c06\u6ce8\u610f\u529b\u96c6\u4e2d\u4fdd\u6301\u5728\u6838\u5fc3\u5e93\uff0c\u5176\u4ed6\u529f\u80fd\u5982\u8def\u7531\uff0c\u5168\u5c40\u72b6\u6001\u7ba1\u7406\u5219\u4ea4\u7ed9\u76f8\u5173\u7684\u5e93"),a.a.createElement("li",null,"\u90fd\u6709\u81ea\u5df1\u7684\u6784\u5efa\u5de5\u5177\uff0c\u80fd\u5f97\u5230\u4e00\u4e2a\u6700\u4f73\u7684\u9879\u76ee\u6a21\u677f"),a.a.createElement("li",null,"\u90fd\u662f\u7528\u4e86\u865a\u62df DOM \u63d0\u9ad8\u91cd\u7ed8\u6027\u80fd"),a.a.createElement("li",null,"\u90fd\u6709 props \u5141\u8bb8\u7ec4\u4ef6\u6570\u636e\u4f20\u9012"),a.a.createElement("li",null,"\u90fd\u9f13\u52b1\u62c6\u5206\u7ec4\u4ef6\u6210\u4e00\u4e2a\u4e2a\u529f\u80fd\u660e\u786e\u7684\u5c0f\u7ec4\u4ef6"))),a.a.createElement("li",null,a.a.createElement("p",null,"\u4e0d\u540c\u4e4b\u5904"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("strong",null,"\u6570\u636e\u6d41")," vue \u9ed8\u8ba4\u662f\u53cc\u5411\u7ed1\u5b9a\uff0creact \u662f\u5355\u5411\u6570\u636e\u6d41")),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("strong",null,"\u865a\u62df DOM"),"vue \u5ba3\u79f0\u53ef\u4ee5\u66f4\u5feb\u7684\u8ba1\u7b97\u51fa\u865a\u62df DOM \u7684\u5dee\u5f02\uff0c\u8fd9\u662f\u7531\u4e8e\u4ed6\u5728\u6e32\u67d3\u8fc7\u7a0b\u4e2d\uff0c\u4f1a\u8ddf\u8e2a\u6bcf\u4e2a\u7ec4\u4ef6\u7684\u4f9d\u8d56\u5173\u7cfb\uff0c\u4e0d\u9700\u8981\u91cd\u65b0\u6e32\u67d3\u6574\u4e2a DOM \u6811"),a.a.createElement("p",null,"react \u5219\u4e0d\u662f\uff0c\u53ea\u8981\u6709\u72b6\u6001\u6539\u53d8\uff0c\u5168\u90e8\u7684\u5b50\u7ec4\u4ef6\u90fd\u4f1a\u91cd\u65b0\u6e32\u67d3\uff0c\u5f53\u7136\u8fd9\u662f\u53ef\u4ee5\u901a\u8fc7",a.a.createElement("code",null,"shouldComponentUpdate"),"\u548c",a.a.createElement("code",null,"PureComponent"),"\u6765\u63a7\u5236")),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("strong",null,"\u7ec4\u4ef6\u5316"),"vue \u662f\u7c7b\u4f3c html \u7684\u6a21\u677f\uff0c\u5199\u8d77\u6765\u548c H5 \u5dee\u4e0d\u591a\uff0c"),a.a.createElement("p",null,"react \u662f jsx \u7684\u5199\u6cd5"),a.a.createElement("p",null,"\u5177\u4f53\u6765\u8bf4\uff0cvue \u5f15\u7528\u7ec4\u4ef6",a.a.createElement("code",null,"import"),"\u4e4b\u540e\u8fd8\u9700\u8981\u5728",a.a.createElement("code",null,"componets"),"\u6ce8\u518c,\u4f46\u662f react \u662f\u53ef\u4ee5\u76f4\u63a5\u5f15\u7528\u7684")),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("strong",null,"\u76d1\u542c\u539f\u7406\u4e0d\u540c"),"vue2 \u901a\u8fc7",a.a.createElement("code",null,"getter/setter"),"\u4ee5\u53ca\u4e00\u4e9b\u51fd\u6570\u7684\u52ab\u6301\uff0c\u80fd\u7cbe\u786e\u77e5\u9053\u6570\u636e\u53d8\u5316\uff0c\u4e0d\u9700\u8981\u7279\u522b\u7684\u4f18\u5316\u5c31\u80fd\u8fbe\u5230\u5f88\u597d\u7684\u6027\u80fd,vue3 \u662f\u901a\u8fc7",a.a.createElement("code",null,"proxy"),"\u6765\u76d1\u542c\u7684"),a.a.createElement("p",null,"react \u9ed8\u8ba4\u662f\u901a\u8fc7\u6bd4\u8f83\u5f15\u7528\u7684\u65b9\u5f0f\u8fdb\u884c\u7684\uff0c\u5982\u679c\u4e0d\u4f18\u5316\u5c31\u4f1a\u5bfc\u81f4\u5927\u91cf\u7684\u4e0d\u5fc5\u8981\u7684 VDOM \u6e32\u67d3\uff0c\u9020\u6210\u6027\u80fd\u4e0d\u597d")),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("strong",null,"\u9ad8\u9636\u7ec4\u4ef6"),a.a.createElement("code",null,"react")," \u53ef\u4ee5\u4f7f\u7528\u9ad8\u9636\u7ec4\u4ef6\u6765\u6269\u5c55\uff0c",a.a.createElement("code",null,"vue")," \u5219\u662f\u901a\u8fc7 ",a.a.createElement("code",null,"mixins")," \u6765\u6269\u5c55")),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("strong",null,"\u6784\u5efa\u5de5\u5177")),a.a.createElement("p",null,"react => create-react-app"),a.a.createElement("p",null,"vue => vue-cli")),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("strong",null,"\u8de8\u5e73\u53f0")),a.a.createElement("p",null,"React => React Native"),a.a.createElement("p",null,"Vue => weex"))))),a.a.createElement("h2",{id:"13react-key-\u662f\u5e72\u561b\u7528\u7684\u4e3b\u8981\u89e3\u51b3\u4ec0\u4e48\u95ee\u9898"},a.a.createElement(c["AnchorLink"],{to:"#13react-key-\u662f\u5e72\u561b\u7528\u7684\u4e3b\u8981\u89e3\u51b3\u4ec0\u4e48\u95ee\u9898","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"13\u3001react key \u662f\u5e72\u561b\u7528\u7684\uff0c\u4e3b\u8981\u89e3\u51b3\u4ec0\u4e48\u95ee\u9898"),a.a.createElement("p",null,a.a.createElement("code",null,"key"),"\u4e3b\u8981\u662f",a.a.createElement("code",null,"react"),"\u8ffd\u8e2a\u54ea\u4e9b\u5217\u8868\u4e2d\u5143\u7d20\u88ab\u4fee\u6539\u3001\u88ab\u6dfb\u52a0\u6216\u8005\u88ab\u79fb\u9664\u7684\u8f85\u52a9\u6807\u5fd7"),a.a.createElement("p",null,"\u5728",a.a.createElement("code",null,"react diff"),"\u7b97\u6cd5\u4e2d\uff0creact \u4f1a\u501f\u52a9\u5143\u7d20\u7684 key \u503c\u6765\u5224\u65ad\u5143\u7d20\u662f\u65b0\u5efa\u521b\u5efa\u8fd8\u662f\u88ab\u79fb\u52a8\u800c\u6765\u7684\u5143\u7d20\uff0c\u51cf\u5c11\u4e0d\u5fc5\u8981\u7684\u6e32\u67d3"),a.a.createElement("blockquote",null),a.a.createElement("ol",null,a.a.createElement("li",null,"key \u503c\u4e00\u5b9a\u8981\u548c\u5177\u4f53\u7684\u5143\u7d20\u4e00\u4e00\u5bf9\u5e94"),a.a.createElement("li",null,"\u5c3d\u91cf\u4e0d\u8981\u7528\u6570\u7ec4\u7684 index \u6765\u4f5c\u4e3a\u552f\u4e00\u7684 key \u503c"),a.a.createElement("li",null,"\u6c38\u8fdc\u4e0d\u8981\u5728 render \u7684\u65f6\u5019\u7528\u968f\u673a\u6570\u6216\u8005\u5176\u4ed6\u64cd\u4f5c\u7ed9\u5143\u7d20\u52a0\u4e0a\u4e0d\u7a33\u5b9a\u7684 key,\u8fd9\u6837\u4f1a\u9020\u6210\u6027\u80fd\u5f00\u9500\u6bd4\u4e0d\u52a0 key \u7684\u60c5\u51b5\u4e0b\u66f4\u7cdf\u7cd5")),a.a.createElement("h2",{id:"14\u51fd\u6570\u7ec4\u4ef6\u548c\u7c7b\u7ec4\u4ef6\u7684\u533a\u522b"},a.a.createElement(c["AnchorLink"],{to:"#14\u51fd\u6570\u7ec4\u4ef6\u548c\u7c7b\u7ec4\u4ef6\u7684\u533a\u522b","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"14\u3001\u51fd\u6570\u7ec4\u4ef6\u548c\u7c7b\u7ec4\u4ef6\u7684\u533a\u522b\uff1f"),a.a.createElement("p",null,"\u4f5c\u4e3a\u7ec4\u4ef6\u800c\u8a00\uff0c\u7c7b\u7ec4\u4ef6\u4e0e\u51fd\u6570\u7ec4\u4ef6\u5728\u4f7f\u7528\u4e0e\u5448\u73b0\u4e0a\u6ca1\u6709\u4efb\u4f55\u4e0d\u540c\uff0c\u6027\u80fd\u4e0a\u5728\u73b0\u4ee3\u6d4f\u89c8\u5668\u4e2d\u4e5f\u4e0d\u4f1a\u6709\u660e\u663e\u5dee\u5f02"),a.a.createElement("ol",null,a.a.createElement("li",null,a.a.createElement("p",null,"\u51fd\u6570\u7ec4\u4ef6\u662f\u65e0\u72b6\u6001\u7ec4\u4ef6\uff0c\u76f8\u6bd4\u7c7b\u7ec4\u4ef6\u65e0\u6cd5\u4f7f\u7528\u8bb8\u591a\u7279\u6027\uff0c\u4f8b\u5982\u751f\u547d\u5468\u671f\u94a9\u5b50\u3001\u72b6\u6001 state \u7b49\uff0c\u968f\u7740 hooks \u51fa\u73b0\uff0c\u7c7b\u7ec4\u4ef6\u4e5f\u540c\u6837\u53ef\u4ee5\u5b9e\u73b0\u76f8\u5e94\u7684\u529f\u80fd")),a.a.createElement("li",null,a.a.createElement("p",null,"\u51fd\u6570\u7ec4\u4ef6\u4e2d\u6ca1\u6709 this\u3002\u6240\u4ee5\u4f60\u518d\u4e5f\u4e0d\u9700\u8981\u8003\u8651 this\u3002")),a.a.createElement("li",null,a.a.createElement("p",null,"\u51fd\u6570\u7ec4\u4ef6\u7684\u6027\u80fd\u6bd4\u7c7b\u7ec4\u4ef6\u7684\u6027\u80fd\u8981\u9ad8\uff0c\u56e0\u4e3a\u7c7b\u7ec4\u4ef6\u4f7f\u7528\u7684\u65f6\u5019\u8981\u5b9e\u4f8b\u5316\uff0c\u800c\u51fd\u6570\u7ec4\u4ef6\u76f4\u63a5\u6267\u884c\u51fd\u6570\u53d6\u8fd4\u56de\u7ed3\u679c\u5373\u53ef"))),a.a.createElement("h2",{id:"15\u5bb9\u5668\u7ec4\u4ef6\u548c\u5c55\u793a\u7ec4\u4ef6\u5206\u522b\u662f\u4ec0\u4e48"},a.a.createElement(c["AnchorLink"],{to:"#15\u5bb9\u5668\u7ec4\u4ef6\u548c\u5c55\u793a\u7ec4\u4ef6\u5206\u522b\u662f\u4ec0\u4e48","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"15\u3001\u5bb9\u5668\u7ec4\u4ef6\u548c\u5c55\u793a\u7ec4\u4ef6\u5206\u522b\u662f\u4ec0\u4e48\uff1f"),a.a.createElement("ul",null,a.a.createElement("li",null,"\u5c55\u793a\u7ec4\u4ef6",a.a.createElement("ul",null,a.a.createElement("li",null,"\u5173\u6ce8\u9875\u9762\u7684\u5c55\u793a\u6548\u679c\uff08\u5916\u89c2\uff09"),a.a.createElement("li",null,"\u5185\u90e8\u53ef\u4ee5\u5305\u542b\u5c55\u793a\u7ec4\u4ef6\u548c\u5bb9\u5668\u7ec4\u4ef6\uff0c\u901a\u5e38\u4f1a\u5305\u542b\u4e00\u4e9b\u81ea\u5df1\u7684 DOM \u6807\u8bb0\u548c\u6837\u5f0f(style)"),a.a.createElement("li",null,"\u901a\u5e38\u5141\u8bb8\u901a\u8fc7",a.a.createElement("code",null,"this.props.children"),"\u65b9\u5f0f\u6765\u5305\u542b\u5176\u4ed6\u7ec4\u4ef6\u3002"),a.a.createElement("li",null,"\u5bf9\u5e94\u7528\u7a0b\u5e8f\u7684\u5176\u4ed6\u90e8\u5206\u6ca1\u6709\u4f9d\u8d56\u5173\u7cfb\uff0c\u4f8b\u5982 Flux \u64cd\u4f5c\u6216 store\u3002"),a.a.createElement("li",null,"\u4e0d\u7528\u5173\u5fc3\u6570\u636e\u662f\u600e\u4e48\u52a0\u8f7d\u548c\u53d8\u52a8\u7684\u3002"),a.a.createElement("li",null,"\u53ea\u80fd\u901a\u8fc7",a.a.createElement("code",null,"props"),"\u7684\u65b9\u5f0f\u63a5\u6536\u6570\u636e\u548c\u8fdb\u884c\u56de\u8c03",a.a.createElement("code",null,"(callback)"),"\u64cd\u4f5c\u3002"),a.a.createElement("li",null,"\u5f88\u5c11\u62e5\u6709\u81ea\u5df1\u7684\u72b6\u6001\uff0c\u5373\u4f7f\u6709\u4e5f\u662f\u7528\u4e8e\u5c55\u793a",a.a.createElement("code",null,"UI"),"\u72b6\u6001\u7684\u3002"),a.a.createElement("li",null,"\u4f1a\u88ab\u5199\u6210\u51fd\u6570\u5f0f\u7ec4\u4ef6\u9664\u975e\u8be5\u7ec4\u4ef6\u9700\u8981\u81ea\u5df1\u7684\u72b6\u6001\uff0c\u751f\u547d\u5468\u671f\u6216\u8005\u505a\u4e00\u4e9b\u6027\u80fd\u4f18\u5316"))),a.a.createElement("li",null,"\u5bb9\u5668\u7ec4\u4ef6",a.a.createElement("ul",null,a.a.createElement("li",null,"\u5173\u6ce8\u5e94\u7528\u7684\u662f\u5982\u4f55\u5de5\u4f5c\u7684"),a.a.createElement("li",null,"\u5185\u90e8\u53ef\u4ee5\u5305\u542b\u5bb9\u5668\u7ec4\u4ef6\u548c\u5c55\u793a\u7ec4\u4ef6\uff0c\u4f46\u901a\u5e38\u6ca1\u6709\u4efb\u4f55\u81ea\u5df1\u7684 DOM \u6807\u8bb0\uff0c\u9664\u4e86\u4e00\u4e9b\u5305\u88c5 divs\uff0c\u5e76\u4e14\u4ece\u4e0d\u5177\u6709\u4efb\u4f55\u6837\u5f0f\u3002"),a.a.createElement("li",null,"\u63d0\u4f9b\u6570\u636e\u548c\u884c\u4e3a\u7ed9\u5176\u4ed6\u7684\u5c55\u793a\u7ec4\u4ef6\u6216\u5bb9\u5668\u7ec4\u4ef6\u3002"),a.a.createElement("li",null,"\u8c03\u7528 Flux \u64cd\u4f5c\u5e76\u5c06\u5b83\u4eec\u4f5c\u4e3a\u56de\u8c03\u51fd\u6570\u63d0\u4f9b\u7ed9\u5c55\u793a\u7ec4\u4ef6\u3002"),a.a.createElement("li",null,"\u5f80\u5f80\u662f\u6709\u72b6\u6001\u7684\uff0c\u56e0\u4e3a\u5b83\u4eec\u503e\u5411\u4e8e\u4f5c\u4e3a\u6570\u636e\u6e90"),a.a.createElement("li",null,"\u901a\u5e38\u4f7f\u7528\u9ad8\u9636\u7ec4\u4ef6\u751f\u6210\uff0c\u4f8b\u5982",a.a.createElement("code",null,"React Redux\u7684connect()"),"\uff0c",a.a.createElement("code",null,"Relay\u7684createContainer()"),"\u6216",a.a.createElement("code",null,"Flux Utils\u7684Container.create()"),"\uff0c\u800c\u4e0d\u662f\u624b\u5de5\u7f16\u5199\u3002")))),a.a.createElement("p",null,"\u793a\u4f8b\uff1a"),a.a.createElement(r["a"],{code:"//\u5c55\u793a\u7ec4\u4ef6\n  class TodoList extends React.Component{\n      constructor(props){\n        super(props);\n      }\n      render(){\n        const {todos} = this.props;\n        return (<div>\n          <ul>\n              {todos.map((item,index)=>{\n                  return <li key={item.id}>{item.name}</li>\n              })}\n          </ul>\n        </div>)\n      }\n\n  //\u5bb9\u5668\u7ec4\u4ef6\n  class TodoListContainer extends React.Component{\n      constructor(props){\n        super(props);\n        this.state = {\n            todos:[]\n        }\n        this.fetchData = this.fetchData.bind(this);\n      }\n      componentDidMount(){\n        this.fetchData();\n      }\n      fetchData(){\n        fetch('/api/todos').then(data =>{\n          this.setState({\n            todos:data\n          })\n        })\n      }\n      render(){\n        return (<div>\n            <TodoList todos={this.state.todos} />\n        </div>)\n      }\n  }",lang:"js"}),a.a.createElement("h2",{id:"16\u53d7\u63a7\u7ec4\u4ef6\u548c\u975e\u53d7\u63a7\u7ec4\u4ef6"},a.a.createElement(c["AnchorLink"],{to:"#16\u53d7\u63a7\u7ec4\u4ef6\u548c\u975e\u53d7\u63a7\u7ec4\u4ef6","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"16\u3001\u53d7\u63a7\u7ec4\u4ef6\u548c\u975e\u53d7\u63a7\u7ec4\u4ef6\uff1f"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,"\u53d7\u63a7\u7ec4\u4ef6"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,"HTML"),"\u4e2d\u7684\u8868\u5355\u5143\u7d20\u662f\u53ef\u8f93\u5165\u7684\uff0c\u4e5f\u5c31\u662f\u6709\u81ea\u5df1\u7684\u53ef\u53d8\u72b6\u6001"),a.a.createElement("li",null,"\u800c",a.a.createElement("code",null,"React"),"\u4e2d\u53ef\u53d8\u72b6\u6001\u901a\u5e38\u4fdd\u5b58\u5728",a.a.createElement("code",null,"state"),"\u4e2d\uff0c\u5e76\u4e14\u53ea\u80fd\u901a\u8fc7",a.a.createElement("code",null,"setState()")," \u65b9\u6cd5\u6765\u4fee\u6539"),a.a.createElement("li",null,a.a.createElement("code",null,"React"),"\u5c06",a.a.createElement("code",null,"state"),"\u4e0e\u8868\u5355\u5143\u7d20\u503c",a.a.createElement("code",null,"value"),"\u7ed1\u5b9a\u5728\u4e00\u8d77\uff0c\u6709",a.a.createElement("code",null,"state"),"\u7684\u503c\u6765\u63a7\u5236\u8868\u5355\u5143\u7d20\u7684\u503c"),a.a.createElement("li",null,"\u53d7\u63a7\u7ec4\u4ef6\uff1a\u503c\u53d7\u5230",a.a.createElement("code",null,"react"),"\u63a7\u5236\u7684\u8868\u5355\u5143\u7d20")),a.a.createElement(r["a"],{code:'<input type="text" value={this.state.txt} onChange={this.inputChange} />',lang:"js"})),a.a.createElement("li",null,a.a.createElement("p",null,"\u975e\u53d7\u63a7\u7ec4\u4ef6"),a.a.createElement("ul",null,a.a.createElement("li",null,"\u8c03\u7528 ",a.a.createElement("code",null,"React.createRef()")," \u65b9\u6cd5\u521b\u5efa ref \u5bf9\u8c61"),a.a.createElement("li",null,"\u5c06\u521b\u5efa\u597d\u7684 ",a.a.createElement("code",null,"ref")," \u5bf9\u8c61\u6dfb\u52a0\u5230\u6587\u672c\u6846\u4e2d"),a.a.createElement("li",null,"\u901a\u8fc7",a.a.createElement("code",null,"ref"),"\u5bf9\u8c61\u83b7\u53d6\u5230\u6587\u672c\u6846\u7684\u503c"),a.a.createElement("li",null,"\u975e\u53d7\u63a7\u7ec4\u4ef6\uff1a \u8868\u5355\u7ec4\u4ef6\u6ca1\u6709",a.a.createElement("code",null,"value prop"),"\u5c31\u53ef\u4ee5\u79f0\u4e3a\u975e\u53d7\u63a7\u7ec4\u4ef6")),a.a.createElement(r["a"],{code:'class App extends React.Component {\n  constructor() {\n    super();\n    //\u521b\u5efa ref\n    this.txtRef = React.createRef();\n  }\n  // \u83b7\u53d6\u6587\u672c\u6846\u7684\u503c\n  getTxt = () => {\n    console.log(this.txtRef.current.value);\n  };\n  render() {\n    return (\n      <div>\n        <input type="text" ref={this.txtRef} />\n        <button onClick={this.getTxt}>\u83b7\u53d6\u503c</button>\n      </div>\n    );\n  }\n}',lang:"js"}))),a.a.createElement("h2",{id:"17\u7b80\u8ff0-react-\u7684-diff-\u7b97\u6cd5"},a.a.createElement(c["AnchorLink"],{to:"#17\u7b80\u8ff0-react-\u7684-diff-\u7b97\u6cd5","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"17\u3001\u7b80\u8ff0 react \u7684 diff \u7b97\u6cd5"),a.a.createElement("p",null,"React \u901a\u8fc7\u5f15\u5165",a.a.createElement("code",null,"Virtual DOM"),"\u7684\u6982\u5ff5\uff0c\u6781\u5927\u7684\u907f\u514d\u65e0\u6548\u7684 DOM \u64cd\u4f5c\uff0c\u4f7f\u6211\u4eec\u7684\u9875\u9762\u7684\u6784\u5efa\u6548\u7387\u5f97\u5230\u4e86\u6781\u5927\u7684\u63d0\u5347\uff0c\u4f46\u662f\u5982\u4f55\u9ad8\u6548\u7684\u901a\u8fc7\u5bf9\u6bd4\u65b0\u65e7",a.a.createElement("code",null,"Virtual DOM"),"\u6765\u627e\u5230\u771f\u6b63\u7684 DOM \u53d8\u5316\u4e4b\u5904\u540c\u6837\u4e5f\u51b3\u5b9a\u7740\u9875\u9762\u7684\u6027\u80fd\u3002"),a.a.createElement("p",null,a.a.createElement("strong",null,"React DOM-diff \u7684\u7b56\u7565")),a.a.createElement("img",{src:n("fbB9")}),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"web ui"),"\u4e2d",a.a.createElement("code",null,"DOM"),"\u8282\u70b9\u8de8\u5c42\u7ea7\u7684\u79fb\u52a8\u64cd\u4f5c\u7279\u522b\u5c11\uff0c\u53ef\u4ee5\u5ffd\u7565\u4e0d\u8ba1")),a.a.createElement("li",null,a.a.createElement("p",null,"\u62e5\u6709\u76f8\u540c\u7c7b\u7684\u4e24\u4e2a\u7ec4\u4ef6\u5c06\u4f1a\u751f\u6210\u76f8\u4f3c\u7684\u6811\u5f62\u7ed3\u6784\uff0c\u62e5\u6709\u4e0d\u540c\u7c7b\u7684\u4e24\u4e2a\u7ec4\u4ef6\u5c06\u4f1a\u751f\u6210\u4e0d\u540c\u7684\u6811\u5f62\u7ed3\u6784")),a.a.createElement("li",null,a.a.createElement("p",null,"\u5bf9\u4e8e\u540c\u4e00\u5c42\u7ea7\u7684\u4e00\u7ec4\u5b50\u8282\u70b9\uff0c\u4ed6\u4eec\u53ef\u4ee5\u901a\u8fc7\u552f\u4e00 ",a.a.createElement("code",null,"id")," \u8fdb\u884c\u533a\u5206"))),a.a.createElement("p",null,"\u57fa\u4e8e\u4ee5\u4e0a\u4e09\u4e2a\u524d\u63d0\u7b56\u7565\uff0c",a.a.createElement("code",null,"React"),"\u5206\u522b\u5bf9",a.a.createElement("code",null,"tree diff"),"\u3001",a.a.createElement("code",null,"component diff"),"\u4ee5\u53ca",a.a.createElement("code",null,"element diff"),"\u8fdb\u884c\u7b97\u6cd5\u4f18\u5316"),a.a.createElement("ol",null,a.a.createElement("li",null,a.a.createElement("code",null,"tree diff"),"\u57fa\u4e8e\u7b56\u7565 1\uff0creact \u5bf9\u6811\u7684\u7b97\u6cd5\u91d1\u9879\u94fe\u7b80\u6d01\u660e\u4e86\u7684\u4f18\u5316\uff0c\u5bf9\u6811\u8fdb\u884c\u5206\u5c42\u6bd4\u8f83\uff0c\u4e24\u68f5\u6811\u53ea\u4f1a\u5bf9\u540c\u4e00\u5c42\u6b21\u7684\u8282\u70b9\u8fdb\u884c\u6bd4\u8f83\uff0c\u5f53\u53d1\u73b0\u8282\u70b9\u4ee5\u53ca\u4e0d\u900a\u5728\uff0c\u5219\u8be5\u8282\u70b9\u53ca\u5176\u5b50\u8282\u70b9\u540e\u4f1a\u88ab\u5b8c\u5168\u5220\u9664\uff0c\u4e0d\u4f1a\u8fdb\u884c\u8fdb\u4e00\u6b65\u7684\u6bd4\u8f83\uff0c\u8fd9\u6837\u53ea\u9700\u8981\u5bf9\u6811\u8fdb\u884c\u4e00\u6b21\u904d\u5386\uff0c\u4fbf\u80fd\u5b8c\u6210\u6574\u4e2a DOM \u6811\u7684\u6bd4\u8f83"),a.a.createElement("li",null,a.a.createElement("code",null,"component diff"))),a.a.createElement("ul",null,a.a.createElement("li",null,"\u5982\u679c\u662f\u540c\u4e00\u7c7b\u578b\u7684\u7ec4\u4ef6\uff0c\u6309\u7167\u539f\u7b56\u7565\u7ee7\u7eed\u6bd4\u8f83 ",a.a.createElement("code",null,"virtual DOM tree"),"\uff0c\u5982\u679c\u4e0d\u662f\u5219\u5c06\u8be5\u7ec4\u4ef6\u4e0b\u7684\u6240\u6709\u5b50\u8282\u70b9\u90fd\u66ff\u6362"),a.a.createElement("li",null,"\u5bf9\u4e8e\u540c\u7c7b\u7684\u7ec4\u4ef6\uff0c\u6709\u53ef\u80fd\u5176",a.a.createElement("code",null,"virtual DOM"),"\u6ca1\u6709\u4efb\u4f55\u53d8\u5316\uff0c\u5982\u679c\u80fd\u591f\u786e\u5207\u7684\u77e5\u9053\u8fd9\u70b9\u90a3\u53ef\u4ee5\u8282\u7701\u5927\u91cf\u7684 diff \u8fd0\u7b97\u4e8b\u4ef6\uff0c\u56e0\u6b64",a.a.createElement("code",null,"react"),"\u8fd0\u884c\u7528\u6237\u901a\u8fc7",a.a.createElement("code",null,"shouldComponentUpdate()"),"\u6765\u5224\u65ad\u8be5\u7ec4\u4ef6\u662f\u5426\u9700\u8981\u8fdb\u884c",a.a.createElement("code",null,"diff"))),a.a.createElement("ol",{start:3},a.a.createElement("li",null,a.a.createElement("code",null,"element diff"),"\u901a\u8fc7\u552f\u4e00\u7684",a.a.createElement("code",null,"key"),"\u503c\u8fdb\u884c\u589e\u5220\u6539")),a.a.createElement("h2",{id:"18mvvm-\u662f\u4ec0\u4e48"},a.a.createElement(c["AnchorLink"],{to:"#18mvvm-\u662f\u4ec0\u4e48","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"18\u3001MVVM \u662f\u4ec0\u4e48\uff1f"),a.a.createElement("p",null,a.a.createElement("code",null,"MVVM"),"\u662f ",a.a.createElement("code",null,"Model-View-ViewModel"),"\u7684\u7f29\u5199\uff0c\u5373\u6a21\u578b-\u89c6\u56fe-\u89c6\u56fe\u6a21\u578b\u3002",a.a.createElement("code",null,"MVVM")," \u662f\u4e00\u79cd\u8bbe\u8ba1\u601d\u60f3\u3002"),a.a.createElement("p",null,"\u6a21\u578b",a.a.createElement("code",null,"\uff08Model\uff09"),"\uff1a \u6570\u636e\u4fdd\u5b58\u2014\u5b58\u653e\u7740\u5404\u79cd\u6570\u636e\uff0c\u6709\u7684\u662f\u56fa\u5b9a\u5199\u6b7b\u7684\uff0c\u5927\u591a\u6570\u662f\u4ece\u540e\u7aef\u8fd4\u56de\u7684\u6570\u636e \u89c6\u56fe ",a.a.createElement("code",null,"\uff08View\uff09"),"\uff1a\u7528\u6237\u754c\u9762\uff0c\u4e5f\u5c31\u662f DOM \u89c6\u56fe\u6a21\u578b",a.a.createElement("code",null,"\uff08View-Model\uff09"),":\u8fde\u63a5",a.a.createElement("code",null,"View"),"\u548c",a.a.createElement("code",null,"Model"),"\u7684\u6865\u6881\uff0c\u5f53\u6570\u636e\u53d8\u5316\u65f6\uff0c",a.a.createElement("code",null,"ViewModel"),"\u591f\u76d1\u542c\u5230\u6570\u636e\u7684\u53d8\u5316\uff08\u901a\u8fc7",a.a.createElement("code",null,"Data Bindings"),"\uff09\uff0c\u81ea\u52a8\u66f4\u65b0\u89c6\u56fe\uff0c\u800c\u5f53\u7528\u6237\u64cd\u4f5c\u89c6\u56fe\uff0c",a.a.createElement("code",null,"ViewModel"),"\u4e5f\u80fd\u76d1\u542c\u5230\u89c6\u56fe\u7684\u53d8\u5316\uff08\u901a\u8fc7",a.a.createElement("code",null,"DOM Listeners"),"\uff09\uff0c\u7136\u540e\u901a\u77e5\u6570\u636e\u505a\u6539\u52a8\uff0c\u8fd9\u5c31\u5b9e\u73b0\u4e86\u6570\u636e\u7684\u53cc\u5411\u7ed1\u5b9a"),a.a.createElement("p",null,a.a.createElement("strong",null,"MVVM \u548c MVC \u533a\u522b\uff1f")),a.a.createElement("p",null,"\u90fd\u662f\u4e00\u79cd\u8bbe\u8ba1\u601d\u60f3",a.a.createElement("code",null,"MVC")," \u540e\u53f0\u7528\u7684\u591a\uff0c",a.a.createElement("code",null,"MVC"),"\u662f",a.a.createElement("code",null,"Model-View-Controller"),"\u7684\u7b80\u5199\uff0c\u5373\u6a21\u578b-\u89c6\u56fe-\u63a7\u5236\u5668\u3002",a.a.createElement("code",null,"MVC"),"\u7684\u76ee\u7684\u5c31\u662f\u5c06",a.a.createElement("code",null,"M"),"\u548c",a.a.createElement("code",null,"V"),"\u7684\u4ee3\u7801\u5206\u79bb",a.a.createElement("code",null,"MVC"),"\u662f\u5355\u5411\u901a\u4fe1\uff0c\u4e5f\u5c31\u662f",a.a.createElement("code",null,"View"),"\u548c",a.a.createElement("code",null,"Model"),"\uff0c\u5fc5\u987b\u901a\u8fc7",a.a.createElement("code",null,"Controller"),"\u6765\u627f\u4e0a\u542f\u4e0b",a.a.createElement("code",null,"MVVM"),"\u5b9e\u73b0\u4e86",a.a.createElement("code",null,"View"),"\u548c",a.a.createElement("code",null,"Model"),"\u7684\u81ea\u52a8\u540c\u6b65\uff0c\u5f53",a.a.createElement("code",null,"Model"),"\u7684\u5c5e\u6027\u6539\u53d8\u65f6\uff0c\u4e0d\u7528\u518d\u81ea\u5df1\u624b\u52a8\u64cd\u4f5c",a.a.createElement("code",null,"DOM"),"\u5143\u7d20\uff0c\u63d0\u9ad8\u4e86\u9875\u9762\u6e32\u67d3\u6027\u80fd"),a.a.createElement("h2",{id:"19\u5982\u4f55\u907f\u514d\u7ec4\u4ef6\u7684\u91cd\u65b0\u6e32\u67d3memousememousecallbackpurecomponent"},a.a.createElement(c["AnchorLink"],{to:"#19\u5982\u4f55\u907f\u514d\u7ec4\u4ef6\u7684\u91cd\u65b0\u6e32\u67d3memousememousecallbackpurecomponent","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"19\u3001\u5982\u4f55\u907f\u514d\u7ec4\u4ef6\u7684\u91cd\u65b0\u6e32\u67d3\uff1fmemo/useMemo/useCallback\u3001PureComponent\uff1f"),a.a.createElement("ol",null,a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"useMemo")," \u548c ",a.a.createElement("code",null,"React.mome")," \u7684\u533a\u522b\uff1f"),a.a.createElement("p",null,a.a.createElement("code",null,"react hooks"),"\u63d0\u4f9b\u7684\u4e24\u4e2a API\uff0c\u7528\u4e8e\u7f13\u5b58\u6570\u636e\uff0c\u4f18\u5316\u6027\u80fd"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"React.mome")),a.a.createElement("p",null,"\u4f7f\u7528 ",a.a.createElement("code",null,"React.mome")," \u6765\u7f13\u5b58\u7ec4\u4ef6\uff0c\u9632\u6b62\u7236\u7ec4\u4ef6 state \u7684\u6539\u53d8\u5f71\u54cd\u5b50\u7ec4\u4ef6\u91cd\u65b0\u6e32\u67d3")),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"useMemo")),a.a.createElement("p",null,"\u7528\u6765\u7f13\u5b58\u6570\u636e\uff0c\u5f53\u7ec4\u4ef6\u5185\u90e8\u67d0\u4e00\u4e2a\u6e32\u67d3\u7684\u6570\u636e\uff0c\u9700\u8981\u901a\u8fc7\u8ba1\u7b97\u800c\u6765\uff0c\u8fd9\u4e2a\u8ba1\u7b97\u662f\u4f9d\u8d56\u4e0e\u7279\u5b9a\u7684",a.a.createElement("code",null,"state\u3001props"),"\u6570\u636e\uff0c\u6211\u4eec\u5c31\u7528",a.a.createElement("code",null,"useMemo"),"\u6765\u7f13\u5b58\u8fd9\u4e2a\u6570\u636e\uff0c\u4ee5\u81f3\u4e8e\u6211\u4eec\u5728\u4fee\u6539\u5979\u4eec\u6ca1\u6709\u4f9d\u8d56\u7684\u6570\u636e\u6e90\u7684\u60c5\u51b5\u4e0b\uff0c\u591a\u6b21\u8c03\u7528\u8fd9\u4e2a\u8ba1\u7b97\u51fd\u6570\uff0c\u6d6a\u8d39\u8ba1\u7b97\u8d44\u6e90"),a.a.createElement("p",null,"\u4e5f\u53ef\u4ee5\u628a",a.a.createElement("code",null,"useMemo"),"\u66ff\u6362\u6210",a.a.createElement("code",null,"useCallback"),",\u4f7f\u7528",a.a.createElement("code",null,"useCallback"),"\u5c31\u4e0d\u7528\u5199",a.a.createElement("code",null,"return"),"\u51fd\u6570\u4e86"),a.a.createElement(r["a"],{code:"import React, { useState, useMemo } from 'react';\nimport './style.css';\n\n//\u7236\u7ec4\u4ef6\u7684state\u6539\u53d8\u7684\u65f6\u5019 \u5b50\u7ec4\u4ef6\u4e5f\u4f1a\u968f\u7740\u91cd\u65b0render,\u4f7f\u7528React.memo\u53ef\u4ee5\u7f13\u5b58\u7ec4\u4ef6\nconst ChildComponent = React.memo(() => {\n  console.log('\u8fd9\u662f\u5b50\u7ec4\u4ef6');\n  return <div>\u8fd9\u662f\u5b50\u7ec4\u4ef6</div>;\n});\n\nexport default function App() {\n  const [count, setCount] = useState(0);\n  const [val, setVal] = useState('');\n  //\u4e0d\u4f7f\u7528useMemo\u7684\u8bdd\uff0c\u6bcf\u6b21\u521b\u5efa\u51fa\u6765\u7684\u662f\u4e00\u4e2a\u65b0\u7684\u51fd\u6570\n  //\u4f7f\u7528useMemo\u7684\u8bdd\u6bcf\u6b21\u51fd\u6570\u5bf9\u8c61\u53ea\u521b\u5efa\u4e00\u6b21\uff0c\u6240\u4ee5\u5f53count\u6539\u53d8\u7684\u65f6\u5019\uff0cChild\u4e0d\u4f1arender\n  const sumFunction = useMemo(() => {\n    console.log('compute');\n    let sum = 0;\n    for (let i = 0; i < count * 10; i++) {\n      sum += i;\n    }\n    return sum;\n  }, [count]);\n  //\u7b49\u4ef7\u4e8e\n  // useCallback\u540c\u7406\uff0c\u5f53count\u6539\u53d8\u65f6\uff0c\u4ee3\u7801\u6267\u884c\u5230\u8fd9\u91cc\u65f6\uff0c\u4f1a\u518d\u6b21\u521b\u5efa\u4e00\u4e2a\u65b0\u7684sumFunction\u51fd\u6570\uff0c\u6240\u4ee5Child\u7ec4\u4ef6\u4e5f\u4f1a\u518d\u6b21render\n  const sumFunction = useCallback(() => {\n    console.log('compute');\n    let sum = 0;\n    for (let i = 0; i < count * 10; i++) {\n      sum += i;\n    }\n    return sum;\n  }, [count]);\n  return (\n    <div>\n      <div>\n        {count}-{val}-{sumFunction}\n      </div>\n      <button onClick={() => setCount(count + 1)}>\u70b9\u51fb+1</button>\n      <p>\n        <input value={val} onChange={e => setVal(e.target.value)} />\n      </p>\n      <ChildComponent />\n    </div>\n  );\n}",lang:"js"}))),a.a.createElement("ol",{start:2},a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"useMemo")," \u548c ",a.a.createElement("code",null,"useCallback")," \u7684\u533a\u522b\u53ca\u4f7f\u7528\u573a\u666f"),a.a.createElement("p",null,a.a.createElement("strong",null,"\u5171\u540c\u4f5c\u7528\uff1a")),a.a.createElement("p",null,a.a.createElement("code",null,"useMemo")," \u548c ",a.a.createElement("code",null,"useCallback")," \u63a5\u6536\u7684\u53c2\u6570\u90fd\u662f\u4e00\u6837,\u7b2c\u4e00\u4e2a\u53c2\u6570\u4e3a\u56de\u8c03 \u7b2c\u4e8c\u4e2a\u53c2\u6570\u4e3a\u8981\u4f9d\u8d56\u7684\u6570\u636e"),a.a.createElement("p",null,a.a.createElement("strong",null,"\u4e24\u8005\u533a\u522b\uff1a")),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,"useMemo")," \u8fd4\u56de\u7ed3\u679c\u662f ",a.a.createElement("code",null,"return")," \u56de\u6765\u7684\u503c, \u4e3b\u8981\u7528\u4e8e\u7f13\u5b58\u8ba1\u7b97\u7ed3\u679c\u7684\u503c \uff0c\u5e94\u7528\u573a\u666f\u5982\uff1a \u9700\u8981\u8ba1\u7b97\u7684\u72b6\u6001\uff08\u9632\u6b62\u8ba1\u7b97\u51fd\u6570\u6267\u884c\u591a\u6b21\uff09"),a.a.createElement("li",null,a.a.createElement("code",null,"useCallback")," \u8fd4\u56de\u7ed3\u679c\u662f\u51fd\u6570, \u4e3b\u8981\u7528\u4e8e\u7f13\u5b58\u51fd\u6570\u7684\u5f15\u7528\uff0c\u5e94\u7528\u573a\u666f\u5982: \u9700\u8981\u7f13\u5b58\u7684\u51fd\u6570\uff0c\u56e0\u4e3a\u51fd\u6570\u5f0f\u7ec4\u4ef6\u6bcf\u6b21\u4efb\u4f55\u4e00\u4e2a ",a.a.createElement("code",null,"state")," \u7684\u53d8\u5316\u6574\u4e2a\u7ec4\u4ef6\u90fd\u4f1a\u88ab\u91cd\u65b0\u5237\u65b0\uff0c\u4e00\u4e9b\u51fd\u6570\u662f\u6ca1\u6709\u5fc5\u8981\u88ab\u91cd\u65b0\u5237\u65b0\u7684\uff0c\u6b64\u65f6\u5c31\u5e94\u8be5\u7f13\u5b58\u8d77\u6765\uff0c\u63d0\u9ad8\u6027\u80fd\uff0c\u548c\u51cf\u5c11\u8d44\u6e90\u6d6a\u8d39")),a.a.createElement("p",null,a.a.createElement("strong",null,"\u4f7f\u7528\u573a\u666f")),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,"useMemo"),"\u4e0a\u8ff0\u4ee3\u7801\u4e2d\u7ef4\u62a4\u4e86\u4e24\u4e2a",a.a.createElement("code",null,"state"),"\uff0c\u53ef\u4ee5\u770b\u5230",a.a.createElement("code",null,"sumFunction"),"\u7684\u8ba1\u7b97\u4ec5\u4ec5\u8ddf",a.a.createElement("code",null,"count"),"\u6709\u5173\uff0c\u4f46\u662f\u73b0\u5728\u65e0\u8bba\u662f",a.a.createElement("code",null,"count"),"\u8fd8\u662f",a.a.createElement("code",null,"val"),"\u53d8\u5316\uff0c\u90fd\u4f1a\u5bfc\u81f4",a.a.createElement("code",null,"sumFunction"),"\u91cd\u65b0\u8ba1\u7b97\uff0c\u6240\u4ee5\u8fd9\u91cc\u6211\u4eec\u5e0c\u671b",a.a.createElement("code",null,"val"),"\u4fee\u6539\u7684\u65f6\u5019\uff0c\u4e0d\u9700\u8981\u518d\u6b21\u8ba1\u7b97\uff0c\u8fd9\u79cd\u60c5\u51b5\u4e0b\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528",a.a.createElement("code",null,"useMemo")),a.a.createElement("li",null,a.a.createElement("code",null,"useCallback"),"\u6709\u4e00\u4e2a\u7236\u7ec4\u4ef6\uff0c\u5176\u4e2d\u5305\u542b\u5b50\u7ec4\u4ef6\uff0c\u5b50\u7ec4\u4ef6\u63a5\u6536\u4e00\u4e2a\u51fd\u6570\u4f5c\u4e3a",a.a.createElement("code",null,"props"),"\uff1b\u901a\u5e38\u800c\u8a00\uff0c\u5982\u679c\u7236\u7ec4\u4ef6\u66f4\u65b0\u4e86\uff0c\u5b50\u7ec4\u4ef6\u4e5f\u4f1a\u6267\u884c\u66f4\u65b0\uff1b\u4f46\u662f\u5927\u591a\u6570\u573a\u666f\u4e0b\uff0c\u66f4\u65b0\u662f\u6ca1\u6709\u5fc5\u8981\u7684\uff0c\u6211\u4eec\u53ef\u4ee5\u501f\u52a9",a.a.createElement("code",null,"useCallback"),"\u6765\u8fd4\u56de\u51fd\u6570\uff0c\u7136\u540e\u628a\u8fd9\u4e2a\u51fd\u6570\u4f5c\u4e3a",a.a.createElement("code",null,"props"),"\u4f20\u9012\u7ed9\u5b50\u7ec4\u4ef6\uff1b\u8fd9\u6837\uff0c\u5b50\u7ec4\u4ef6\u5c31\u80fd\u907f\u514d\u4e0d\u5fc5\u8981\u7684\u66f4\u65b0"))),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"PureComponent")))),a.a.createElement("p",null,a.a.createElement("code",null,"React.PureComponent")," \u4e0e ",a.a.createElement("code",null,"React.Component")," \u51e0\u4e4e\u5b8c\u5168\u76f8\u540c\uff0c\u4f46",a.a.createElement("code",null,"React.PureComponent")," \u901a\u8fc7 ",a.a.createElement("code",null,"props")," \u548c ",a.a.createElement("code",null,"state")," \u7684\u6d45\u5bf9\u6bd4\u6765\u5b9e\u73b0 ",a.a.createElement("code",null,"shouldComponentUpate()"),"\uff0c\u5982\u679c\u5b9a\u4e49\u4e86 ",a.a.createElement("code",null,"shouldComponentUpdate()"),"\uff0c\u65e0\u8bba\u7ec4\u4ef6\u662f\u5426\u662f ",a.a.createElement("code",null,"PureComponent"),"\uff0c\u5b83\u90fd\u4f1a\u6267\u884c",a.a.createElement("code",null,"shouldComponentUpdate"),"\u7ed3\u679c\u6765\u5224\u65ad\u662f\u5426 ",a.a.createElement("code",null,"update"),"\u3002\u5982\u679c\u7ec4\u4ef6\u672a\u5b9e\u73b0 ",a.a.createElement("code",null,"shouldComponentUpdate()")," \uff0c\u5219\u4f1a\u5224\u65ad\u8be5\u7ec4\u4ef6\u662f\u5426\u662f ",a.a.createElement("code",null,"PureComponent"),"\uff0c\u5982\u679c\u662f\u7684\u8bdd\uff0c\u4f1a\u5bf9\u65b0\u65e7",a.a.createElement("code",null,"props\u3001state")," \u8fdb\u884c ",a.a.createElement("code",null,"shallowEqual")," \u6bd4\u8f83\uff0c\u4e00\u65e6\u65b0\u65e7\u4e0d\u4e00\u81f4\uff0c\u4f1a\u89e6\u53d1 ",a.a.createElement("code",null,"update")),a.a.createElement("p",null,a.a.createElement("strong",null,"\u4f18\u70b9")),a.a.createElement(r["a"],{code:"\u4e0d\u9700\u8981\u5f00\u53d1\u8005\u81ea\u5df1\u5b9e\u73b0`shouldComponentUpdate`\uff0c\u5c31\u53ef\u4ee5\u8fdb\u884c\u7b80\u5355\u7684\u5224\u65ad\u6765\u63d0\u5347\u6027\u80fd",lang:"unknown"}),a.a.createElement("p",null,a.a.createElement("strong",null,"\u7f3a\u70b9")),a.a.createElement(r["a"],{code:"\u53ef\u80fd\u4f1a\u56e0\u6df1\u5c42\u7684\u6570\u636e\u4e0d\u4e00\u81f4\u800c\u4ea7\u751f\u9519\u8bef\u7684\u5426\u5b9a\u5224\u65ad\uff0c\u4ece\u800c`shouldComponentUpdate`\u7ed3\u679c\u8fd4\u56de`false`\uff0c\u754c\u9762\u5f97\u4e0d\u5230\u66f4\u65b0",lang:"unknown"}))),a.a.createElement("h2",{id:"20react-\u4e2d\u7684-refs-\u662f\u5e72\u561b\u7528\u7684"},a.a.createElement(c["AnchorLink"],{to:"#20react-\u4e2d\u7684-refs-\u662f\u5e72\u561b\u7528\u7684","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"20\u3001react \u4e2d\u7684 refs \u662f\u5e72\u561b\u7528\u7684\uff1f"),a.a.createElement("p",null,a.a.createElement("code",null,"Refs")," \u63d0\u4f9b\u4e86\u4e00\u79cd\u8bbf\u95ee\u5728",a.a.createElement("code",null,"render"),"\u65b9\u6cd5\u4e2d\u521b\u5efa\u7684 ",a.a.createElement("code",null,"DOM")," \u8282\u70b9\u6216\u8005 ",a.a.createElement("code",null,"React")," \u5143\u7d20\u7684\u65b9\u6cd5\u3002\u5728\u5178\u578b\u7684\u6570\u636e\u6d41\u4e2d\uff0c",a.a.createElement("code",null,"props")," \u662f\u7236\u5b50\u7ec4\u4ef6\u4ea4\u4e92\u7684\u552f\u4e00\u65b9\u5f0f\uff0c\u60f3\u8981\u4fee\u6539\u5b50\u7ec4\u4ef6\uff0c\u9700\u8981\u4f7f\u7528\u65b0\u7684",a.a.createElement("code",null,"props"),"\u91cd\u65b0\u6e32\u67d3\u5b83\u3002\u51e1\u4e8b\u6709\u4f8b\u5916\uff0c\u67d0\u4e9b\u60c5\u51b5\u4e0b\u54b1\u4eec\u9700\u8981\u5728\u5178\u578b\u6570\u636e\u6d41\u5916\uff0c\u5f3a\u5236\u4fee\u6539\u5b50\u4ee3\uff0c\u8fd9\u4e2a\u65f6\u5019\u53ef\u4ee5\u4f7f\u7528 ",a.a.createElement("code",null,"Refs")),a.a.createElement("h2",{id:"21\u5728\u6784\u9020\u51fd\u6570\u8c03\u7528-super-\u5e76\u5c06-props-\u4f5c\u4e3a\u53c2\u6570\u4f20\u5165\u7684\u4f5c\u7528\u662f\u5565"},a.a.createElement(c["AnchorLink"],{to:"#21\u5728\u6784\u9020\u51fd\u6570\u8c03\u7528-super-\u5e76\u5c06-props-\u4f5c\u4e3a\u53c2\u6570\u4f20\u5165\u7684\u4f5c\u7528\u662f\u5565","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"21\u3001\u5728\u6784\u9020\u51fd\u6570\u8c03\u7528 super \u5e76\u5c06 props \u4f5c\u4e3a\u53c2\u6570\u4f20\u5165\u7684\u4f5c\u7528\u662f\u5565\uff1f"),a.a.createElement("p",null,"\u5728\u8c03\u7528 ",a.a.createElement("code",null,"super()")," \u65b9\u6cd5\u4e4b\u524d\uff0c\u5b50\u7c7b\u6784\u9020\u51fd\u6570\u65e0\u6cd5\u4f7f\u7528",a.a.createElement("code",null,"this"),"\u5f15\u7528\uff0cES6 \u5b50\u7c7b\u4e5f\u662f\u5982\u6b64\u3002\u5c06 ",a.a.createElement("code",null,"props")," \u53c2\u6570\u4f20\u9012\u7ed9 ",a.a.createElement("code",null,"super()"),"\u8c03\u7528\u7684\u4e3b\u8981\u539f\u56e0\u662f\u5728\u5b50\u6784\u9020\u51fd\u6570\u4e2d\u80fd\u591f\u901a\u8fc7",a.a.createElement("code",null,"this.props"),"\u6765\u83b7\u53d6\u4f20\u5165\u7684 ",a.a.createElement("code",null,"props"))))}));l["default"]=e=>{var l=a.a.useContext(c["context"]),n=l.demos;return a.a.useEffect((()=>{var l;null!==e&&void 0!==e&&null!==(l=e.location)&&void 0!==l&&l.hash&&c["AnchorLink"].scrollToAnchor(decodeURIComponent(e.location.hash.slice(1)))}),[]),a.a.createElement(o,{demos:n})}},fbB9:function(e,l,n){e.exports=n.p+"static/react-diff.c32de870.png"}}]);