docs__myblog__frame__react源码解析.md.js

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[65],{"3DAB":function(e,n,l){"use strict";l.r(n);var t=l("q1tI"),a=l.n(t),r=l("dEAq"),c=l("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:"react16130-\u7ed3\u6784\u4ecb\u7ecd"},a.a.createElement(r["AnchorLink"],{to:"#react16130-\u7ed3\u6784\u4ecb\u7ecd","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"React16.13.0 \u7ed3\u6784\u4ecb\u7ecd"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,".prettierrc.js")," \u4ee3\u7801\u98ce\u683c\u683c\u5f0f\u5316\u7edf\u4e00"),a.a.createElement("li",null,a.a.createElement("code",null,".nvmrc")," node \u7248\u672c\u7ba1\u7406"),a.a.createElement("li",null,a.a.createElement("code",null,".editorconfig")," \u5bf9\u4e0d\u540c\u7684\u4ee3\u7801\u7f16\u8f91\u5668\u6765\u89c4\u8303\uff0c\u8fd9\u4e2a\u548c",a.a.createElement("code",null,".prettierrc.js"),"\u91cd\u590d\u4e4b\u540e\uff0c",a.a.createElement("code",null,".prettierrc.js"),"\u7684\u4f18\u5148\u7ea7\u66f4\u9ad8"),a.a.createElement("li",null,a.a.createElement("code",null,"dangerfile.js")," \u6d4b\u8bd5\u4f7f\u7528"),a.a.createElement("li",null,a.a.createElement("code",null,"appveyor.yml"),"\u548c",a.a.createElement("code",null,"netlify.toml")," CI \u5de5\u5177"),a.a.createElement("li",null,a.a.createElement("code",null,"script")," \u6587\u4ef6\u5939\u4e0b\u9762\u5c31\u662f\u6253\u5305\u914d\u7f6e\u7684\u4e00\u4e9b\u6587\u4ef6"),a.a.createElement("li",null,a.a.createElement("code",null,"packages")," \u6587\u4ef6\u5939\u4e3b\u8981\u662f\u653e\u6e90\u7801")),a.a.createElement("h2",{id:"reactcreateelement"},a.a.createElement(r["AnchorLink"],{to:"#reactcreateelement","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"React.createElement"),a.a.createElement("p",null,"\u901a\u5e38\u6211\u4eec\u7528",a.a.createElement("code",null,"react"),"\u7684",a.a.createElement("code",null,"jsx"),"\u8bed\u6cd5\u5199\u5b8c\u4e4b\u540e\u90fd\u662f\u7ecf\u8fc7",a.a.createElement("code",null,"babel"),"\u8f6c\u4e49\u7684\u6210",a.a.createElement("code",null,"createElement"),"\u5bf9\u8c61\u5904\u7406\u4e4b\u540e\u6e32\u67d3\u5230",a.a.createElement("code",null,"DOM"),"\u5143\u7d20\u4e0a\u7684\u3002"),a.a.createElement("img",{src:l("ZRCK")}),a.a.createElement("p",null,"\u4e0b\u9762\u662f",a.a.createElement("code",null,"react"),"\u6e90\u7801\u91cc\u9762\u7684\u5173\u4e8e\u751f\u4ea7\u73af\u5883\u4e0b\u7684",a.a.createElement("code",null,"createElement"),"\u7684\u4ee3\u7801\uff0c\u6211\u4eec\u6765\u770b\u770b\u4e3b\u8981\u662f\u600e\u4e48\u5b9e\u73b0\u7684\uff1f"),a.a.createElement(c["a"],{code:"// packages/react/src/ReactElement.js\n\nexport function createElement(type, config, children) {\n  let propName;\n\n  // Reserved names are extracted\n  const props = {};\n\n  let key = null;\n  let ref = null;\n  let self = null;\n  let source = null;\n\n  if (config != null) {\n    // ref\u548ckey\u662f\u4e24\u4e2a\u7279\u6b8a\u7684\u5c5e\u6027\uff0c\u8981\u5355\u72ec\u5904\u7406\n    if (hasValidRef(config)) {\n      ref = config.ref; //\u5f97\u5230\u7ec4\u4ef6\u7684\u5f15\u7528\uff0c\u5f97\u5230\u6700\u7ec8\u7684Dom\u5143\u7d20\n\n      if (__DEV__) {\n        warnIfStringRefCannotBeAutoConverted(config);\n      }\n    }\n    if (hasValidKey(config)) {\n      key = '' + config.key;\n    }\n\n    self = config.__self === undefined ? null : config.__self;\n    source = config.__source === undefined ? null : config.__source;\n    // Remaining properties are added to a new props object\n    // \u904d\u5386config\u5f97\u5230props \u5982\u679c\u5bf9\u8c61\u672c\u8eab\u5b58\u5728\u8be5\u5c5e\u6027\u5c31\u590d\u5236\n    for (propName in config) {\n      if (\n        hasOwnProperty.call(config, propName) &&\n        !RESERVED_PROPS.hasOwnProperty(propName)\n      ) {\n        props[propName] = config[propName];\n      }\n    }\n  }\n\n  // Children can be more than one argument, and those are transferred onto\n  // the newly allocated props object.\n  //\u4e0b\u9762\u8fd9\u4e2a\u5730\u65b9\u662f\u5904\u7406\u5b50\u5143\u7d20\u7684\n  // createElement\u53ef\u4ee5\u4f20\u9012N\u4e2a\u53c2\u6570\uff0cN-2\u5c31\u662f\u5b50\u5143\u7d20\u7684\u4e2a\u6570\n  const childrenLength = arguments.length - 2;\n  if (childrenLength === 1) {\n    props.children = children;\n  } else if (childrenLength > 1) {\n    const childArray = Array(childrenLength);\n    for (let i = 0; i < childrenLength; i++) {\n      childArray[i] = arguments[i + 2];\n    }\n    if (__DEV__) {\n      if (Object.freeze) {\n        Object.freeze(childArray);\n      }\n    }\n    props.children = childArray;\n  }\n\n  // Resolve default props\n  // \u8d4b\u503c\u4e3adefault\n  if (type && type.defaultProps) {\n    const defaultProps = type.defaultProps;\n    for (propName in defaultProps) {\n      if (props[propName] === undefined) {\n        props[propName] = defaultProps[propName];\n      }\n    }\n  }\n  if (__DEV__) {\n    if (key || ref) {\n      const displayName =\n        typeof type === 'function'\n          ? type.displayName || type.name || 'Unknown'\n          : type;\n      if (key) {\n        defineKeyPropWarningGetter(props, displayName);\n      }\n      if (ref) {\n        defineRefPropWarningGetter(props, displayName);\n      }\n    }\n  }\n  // \u521b\u5efa\u4e00\u4e2aReactElement\n  return ReactElement(\n    type,\n    key,\n    ref,\n    self,\n    source,\n    ReactCurrentOwner.current,\n    props,\n  );\n}",lang:"js"}),a.a.createElement("p",null,"\u4e0a\u9762\u4ee3\u7801\u53ef\u4ee5\u770b\u51fa\u4e3b\u8981\u662f\u8fd4\u56de\u4e86\u4e00\u4e2a",a.a.createElement("code",null,"element"),"\u5bf9\u8c61,",a.a.createElement("code",null,"createElement"),"\u4f20\u5165\u4e86\u4e09\u4e2a\u53c2\u6570\uff1a"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,"type")," \u8868\u793a\u4f60\u8981\u6e32\u67d3\u7684 DOM \u5143\u7d20\u7c7b\u578b"),a.a.createElement("li",null,a.a.createElement("code",null,"config")," \u521b\u5efa",a.a.createElement("code",null,"React"),"\u5143\u7d20\u6240\u9700\u8981\u7684",a.a.createElement("code",null,"props"),"\u3002\u5305\u542b ",a.a.createElement("code",null,"style\uff0cclassName")," \u7b49,",a.a.createElement("code",null,"ref"),"\u548c",a.a.createElement("code",null,"key"),"\u662f\u4e0d\u4f1a\u6302\u8f7d\u5230 DOM \u5143\u7d20\u4e0a,",a.a.createElement("code",null,"ref"),"\u53ef\u4ee5\u627e DOM \u5143\u7d20\uff0c\u4e5f\u53ef\u4ee5\u8c03\u7528\u7ec4\u4ef6\u7684\u5b9e\u4f8b,",a.a.createElement("code",null,"key"),"\u662f\u53ef\u4ee5\u7528\u4f5c",a.a.createElement("code",null,"diff"),"\u7b97\u6cd5\u5224\u65ad\u5dee\u5f02"),a.a.createElement("li",null,a.a.createElement("code",null,"children")," \u8981\u6e32\u67d3\u5143\u7d20\u7684\u5b50\u5143\u7d20\uff0c\u8fd9\u91cc\u53ef\u4ee5\u5411\u540e\u4f20\u5165 n \u4e2a\u53c2\u6570\u3002\u53c2\u6570\u7c7b\u578b\u7686\u4e3a",a.a.createElement("code",null,"React.createElement")," \u8fd4\u56de\u7684",a.a.createElement("code",null,"React"),"\u5143\u7d20\u5bf9\u8c61")),a.a.createElement("p",null,a.a.createElement("code",null,"ReactElement"),"\u53ea\u662f\u4e00\u4e2a\u7528\u6765\u627f\u8f7d\u4fe1\u606f\u7684\u5bb9\u5668\uff0c\u5b83\u4f1a\u544a\u8bc9\u540e\u7eed\u7684\u64cd\u4f5c\u8fd9\u4e2a\u8282\u70b9\u7684\u4ee5\u4e0b\u4fe1\u606f\uff1a"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,"type"),"\u7c7b\u578b\uff0c\u7528\u4e8e\u5224\u65ad\u5982\u4f55\u521b\u5efa\u8282\u70b9\uff1b"),a.a.createElement("li",null,a.a.createElement("code",null,"key"),"\u548c",a.a.createElement("code",null,"ref"),"\u8fd9\u4e9b\u7279\u6b8a\u4fe1\u606f\uff1b"),a.a.createElement("li",null,a.a.createElement("code",null,"props"),"\u65b0\u7684\u5c5e\u6027\u5185\u5bb9\uff1b"),a.a.createElement("li",null,a.a.createElement("code",null,"$$typeof"),"\u7528\u4e8e\u786e\u5b9a\u662f\u5426\u5c5e\u4e8e",a.a.createElement("code",null,"ReactElement"),"\uff1b")),a.a.createElement("blockquote",null,a.a.createElement("p",null,"\u5728\u67d0\u79cd\u60c5\u51b5\u4e0b\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528",a.a.createElement("code",null,"React.createElement()"),",\u4f8b\u5982\uff1a\u6279\u91cf\u5316\u751f\u4ea7\u8868\u5355\u7cfb\u7edf\uff0c\u5728\u4f7f\u7528",a.a.createElement("code",null,"antd"),"\u7684",a.a.createElement("code",null,"Input"),"\u7ec4\u4ef6\u7684\u65f6\u5019,",a.a.createElement("code",null,"createElement"),"\u6709\u65f6\u5019\u8fd8\u662f\u5177\u6709\u7075\u6d3b\u6027\u7684")),a.a.createElement("h2",{id:"reactchildrenmap"},a.a.createElement(r["AnchorLink"],{to:"#reactchildrenmap","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"React.Children.map"),a.a.createElement("p",null,"\u4e00\u822c\u5728",a.a.createElement("code",null,"React"),"\u91cc\u9762\u6e32\u67d3\u6570\u7ec4\u90fd\u662f\u901a\u8fc7",a.a.createElement("code",null,"map"),"\u7684\u65b9\u6cd5\u6765\u5b9e\u73b0"),a.a.createElement(c["a"],{code:"render(){\n  return <div>\n    {\n      ['a','b','c'].map((item)=>{\n        return <span key={item}>{{item}}</span>\n      })\n    }\n  </div>\n}",lang:"js"}),a.a.createElement("p",null,a.a.createElement("code",null,"React.Children")," \u63d0\u4f9b\u4e86\u7528\u4e8e\u5904\u7406 ",a.a.createElement("code",null,"this.props.children")," \u4e0d\u900f\u660e\u6570\u636e\u7ed3\u6784\u7684\u5b9e\u7528\u65b9\u6cd5\u3002"),a.a.createElement("p",null,a.a.createElement("strong",null,"\u4e3a\u4ec0\u4e48\u8981\u4f7f\u7528 React.Children.map\uff0c \u800c\u4e0d\u662f\u76f4\u63a5\u4f7f\u7528 this.props.children.map?")),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("ol",null,a.a.createElement("li",null,"React.Children.map \u662f\u4e00\u79cd\u5b89\u5168\u7684\u7528\u6cd5\uff0c\u4f1a\u9ed8\u8ba4\u5224\u65ad null,undefined\uff0c\u5bf9\u8c61\uff0c\u5b57\u7b26\u4e32\u7b49\u60c5\u51b5\uff0c\u5373\u4f7f\u7c7b\u578b\u4e0d\u662f Array\uff0c\u4e5f\u4e0d\u4f1a\u62a5\u9519"))),a.a.createElement("li",null,a.a.createElement("ol",{start:2},a.a.createElement("li",null,"React.Children.map \u4f1a\u9ed8\u8ba4\u5c55\u5e73\u591a\u7ef4\u6570\u7ec4"))),a.a.createElement("li",null,a.a.createElement("ol",{start:3},a.a.createElement("li",null,"\u8fed\u4ee3\u5668\u4e5f\u53ef\u4ee5\u652f\u6301\u8f93\u51fa")))),a.a.createElement("p",null,a.a.createElement("strong",null,"React.Children.map \u7528\u6cd5")),a.a.createElement(c["a"],{code:"//\u7236\u7ec4\u4ef6\n<Parent>\n  <h1>Welcome.</h1>\n  <h1>Welcome.</h1>\n</Parent>\n// Parent.js\nrender(){\n  return <div>\n    {\n      React.children.map(result,(item)=>{\n        return <span key={item}>{{item}}</span>\n      })\n    }\n  </div>\n}\n\n//\u6b63\u786e\u5199\u6cd5\nrender(){\n  return <div>\n    {React.Children.map(['a'], () => {\n        return <p>11</p>\n    })}\n  </div>\n}\n\n//\u9519\u8bef\u5199\u6cd5 \u4f1a\u62a5\u9519\nrender(){\n  return <div>\n    {React.Children.map([{a:1}], () => {\n        return <p>11</p>\n    })}\n  </div>\n}",lang:"js"}),a.a.createElement("p",null,a.a.createElement("strong",null,"React.children.map \u6e90\u7801\u89e3\u6790")),a.a.createElement("p",null,a.a.createElement("code",null,"react/src/ReactChildren.js"),"\u4e3b\u8981\u662f\u5728\u8fd9\u4e2a\u6587\u4ef6\u91cc\u9762"),a.a.createElement(c["a"],{code:"function mapChildren(children, func, context) {\n  //\u5982\u679c\u4f20\u5165\u7684\u662fnull \u76f4\u63a5\u8fd4\u56denull\n  if (children == null) {\n    return children;\n  }\n  const result = [];\n  //\u5904\u7406\u6570\u7ec4\n  mapIntoWithKeyPrefixInternal(children, result, null, func, context);\n  return result;\n}\n\nfunction mapIntoWithKeyPrefixInternal(children, array, prefix, func, context) {\n  let escapedPrefix = '';\n  if (prefix != null) {\n    escapedPrefix = escapeUserProvidedKey(prefix) + '/';\n  }\n  const traverseContext = getPooledTraverseContext(\n    array,\n    escapedPrefix,\n    func,\n    context,\n  );\n  // \u5c06\u5d4c\u5957\u7684\u6570\u7ec4\u5c55\u5e73\n  traverseAllChildren(children, mapSingleChildIntoContext, traverseContext);\n  releaseTraverseContext(traverseContext);\n}",lang:"js"}),a.a.createElement("h2",{id:"react-fiber-\u7684\u5927\u81f4\u601d\u8def"},a.a.createElement(r["AnchorLink"],{to:"#react-fiber-\u7684\u5927\u81f4\u601d\u8def","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"React fiber \u7684\u5927\u81f4\u601d\u8def"),a.a.createElement("p",null,a.a.createElement("strong",null,"\u4e3a\u4ec0\u4e48\u8981\u7528 fiber \u8c03\u5ea6\uff0c \u5b83\u89e3\u51b3\u4e86\u4ec0\u4e48\u95ee\u9898\uff1f")),a.a.createElement("ol",null,a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"react16"),"\u4ee5\u524d\u7684\u8c03\u5ea6\u7b97\u6cd5, \u91c7\u7528\u81ea\u9876\u5411\u4e0b\u9012\u5f52\uff0c\u66f4\u65b0\u6574\u4e2a\u5b50\u6811\uff0c\u8fd9\u4e2a\u8fc7\u7a0b\u4e0d\u53ef\u6253\u65ad\uff0c\u4e0d\u53ef\u53d6\u6d88\uff0c\u5982\u679c\u5b50\u6811\u7279\u522b\u5927\u7684\u8bdd\uff0c\u4e3b\u7ebf\u7a0b\u5c31\u4f1a\u4e00\u76f4\u88ab\u5360\u7528\uff0c\u4f1a\u9020\u6210\u9875\u9762\u7684\u6389\u5e27\uff0c\u51fa\u73b0\u5361\u987f\u3002")),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"react16"),"\u63a8\u51fa\u7684",a.a.createElement("code",null,"fiber"),"\u8c03\u5ea6\uff0c \u5206\u4e3a\u4e24\u4e2a\u9636\u6bb5\uff0c\u4e00\u4e2a\u662f",a.a.createElement("code",null,"reconciliation"),"\u9636\u6bb5\uff0c\u4e8c\u662f",a.a.createElement("code",null,"commit"),"\u9636\u6bb5\uff0c\u5728",a.a.createElement("code",null,"reconciliation"),"\u9636\u6bb5\uff1afiber \u5728\u6267\u884c\u8fc7\u7a0b\u4e2d\u4ee5",a.a.createElement("code",null,"fiber"),"\u4e3a\u57fa\u672c\u5355\u4f4d\uff0c\u6bcf\u6267\u884c\u5b8c\u4e00\u4e2a",a.a.createElement("code",null,"fiber"),"\uff0c\u90fd\u4f1a\u6709\u4e00\u4e2a\u8be2\u95ee\u662f\u5426\u6709\u4f18\u5148\u7ea7\u66f4\u9ad8\u7684\u4efb\u52a1\u7684\u4e00\u4e2a\u5224\u65ad\uff0c\u5982\u679c\u6709\u4f18\u5148\u7ea7\u66f4\u9ad8\u7684\u4efb\u52a1\u8fdb\u6765\uff0c\u5c31\u4e2d\u65ad\u5f53\u524d\u6267\u884c\uff0c\u5148\u6267\u884c\u4f18\u5148\u7ea7\u66f4\u9ad8\u7684\u4efb\u52a1\u3002\u8fd9\u4e2a\u9636\u6bb5\u4f1a\u8fdb\u884c",a.a.createElement("code",null,"dom diff"),"\uff0c \u751f\u6210",a.a.createElement("code",null,"workInProgressTree"),",\u5e76\u6807\u8bb0\u597d\u6240\u6709\u7684",a.a.createElement("code",null,"side effect"),"\u3002"),a.a.createElement("ul",null,a.a.createElement("li",null,"\u6570\u503c\u7ed3\u6784\u53d8\u6210\u4e86\u94fe\u8868\u7ed3\u6784"),a.a.createElement("li",null,"\u4efb\u52a1+\u8fc7\u671f\u65f6\u95f4/\u4f18\u5148\u7ea7"),a.a.createElement("li",null,a.a.createElement("code",null,"reconciliation"),"\u53ef\u4ee5\u88ab\u6253\u65ad\uff0c\u4e0d\u4f1a\u6e32\u67d3\u5230\u9875\u9762\u4e0a\u7684\uff1b",a.a.createElement("code",null,"commit"),"\u9636\u6bb5\uff0c\u4e00\u6b21\u6267\u884c\u5b8c\u3002side effect"))),a.a.createElement("li",null,a.a.createElement("p",null,"commit \u9636\u6bb5\uff0c\u5904\u7406\u6240\u6709\u7684 side effect \uff0c \u6267\u884c\u66f4\u65b0\u64cd\u4f5c\u3002\u6b64\u9636\u6bb5\u4e0d\u53ef\u4e2d\u65ad"))),a.a.createElement("h2",{id:"reactdomrender-\u5206\u6790"},a.a.createElement(r["AnchorLink"],{to:"#reactdomrender-\u5206\u6790","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"ReactDom.render \u5206\u6790"),a.a.createElement("ol",null,a.a.createElement("li",null,"\u521b\u5efa Root\uff0c ReactRoot, FiberRoot , FiberNode,\u4ed6\u4eec\u4e4b\u95f4\u7684\u5c5e\u6027\u662f\uff1a")),a.a.createElement(c["a"],{code:"Root: {\n    _reactRootContainer: RootType\n  }\n\n  RootType: {\n    _internalRoot: FiberRoot\n  }\n\n  FiberRoot: {\n      // \u5f53\u524d\u5e94\u7528\u5bf9\u5e94\u7684Fiber\u5bf9\u8c61\n    current: uninitializedFiber, FiberNode\n    // root\u8282\u70b9\n    containerInfo: containerInfo,\n    // \u6307\u5411\u5f53\u524d\u5df2\u7ecf\u5b8c\u6210\u51c6\u5907\u5de5\u4f5c\u7684Fiber Tree Root\uff0c \u5728commit\u9636\u6bb5\u5904\u7406\n    finishedWork: null, // Fiber, \u94fe\u8868\u7ed3\u6784\n    // \u8fc7\u671f\u65f6\u95f4\n    expirationTime: NoWork,\n  }\n\n  FiberNode : {\n    // FiberNode\u7684\u7c7b\u578b\n    this.tag = tag;\n    this.key = key;\n    this.elementType = null;\n    // Function|String|Symbol|Number|Object\n    this.type = null;\n    this.stateNode = null;\n    // \u6df1\u5ea6\u4f18\u5148\u904d\u5386\u7684\n    // Fiber  \u8868\u793a\u7236\u7ea7 FiberNode\n    this.return = null;\n    // \u8868\u793a\u7b2c\u4e00\u4e2a\u5b50 FiberNode\n    this.child = null;\n    // \u8868\u793a\u7d27\u7d27\u76f8\u90bb\u7684\u4e0b\u4e00\u4e2a\u5144\u5f1f FiberNode\n    this.sibling = null;\n    this.index = 0;\n    // \u62ff\u5230\u771f\u5b9e\u7684dom\u5b9e\u4f8b\n    this.ref = null;\n    // \u8868\u793a\u65b0\u7684props\n    this.pendingProps = pendingProps;\n    // \u5f53\u524dfiber\u7684\u65e7props\n    this.memoizedProps = null;\n    // \u66f4\u65b0\u961f\u5217\uff0c\u961f\u5217\u5185\u653e\u7740\u5373\u5c06\u8981\u53d1\u751f\u7684\u53d8\u66f4\u72b6\u6001\n    this.updateQueue = null; // \u6700\u7ec8\u4f1a\u904d\u5386\u8fd9\u4e2aupdate\u94fe\u8868\n    // \u8868\u793a\u7ecf\u8fc7\u6240\u6709\u6d41\u7a0b\u5904\u7406\u540e\u7684\u5f53\u524d\u7684state\n    this.memoizedState = null;\n    this.contextDependencies = null;\n\n    this.mode = mode;\n\n    // effectTag \u66f4\u65b0\u7c7b\u578b\uff0c\u4f8b\u5982\uff0c replace\uff0c delete\uff0c update\n    this.effectTag = NoEffect;\n    // \u4e0b\u4e00\u4e2a\u5c06\u8981\u5904\u7406\u7684\u526f\u4f5c\u7528F\n    this.nextEffect = null;\n    // \u7b2c\u4e00\u4e2a\u9700\u8981\u5904\u7406\u7684\u526f\u4f5c\u7528\n    this.firstEffect = null;\n    // \u6700\u540e\u4e00\u4e2a\u5c06\u8981\u5904\u7406\u7684\u526f\u4f5c\u7528F\n    this.lastEffect = null;\n    // \u8fc7\u671f\u65f6\u95f4\u662f\u548c\u4f18\u5148\u7ea7\u6709\u5173\n    this.expirationTime = NoWork;\n    // \u5b50fiber\u4e2d\u4f18\u5148\u7ea7\u6700\u9ad8\u7684filber\n    this.childExpirationTime = NoWork;\n    // \u8fde\u63a5\u4e0a\u4e00\u4e2a\u72b6\u6001\u7684fiber\uff0c\u50a8\u5b58\u4e86\u4e4b\u524d\u7684\u955c\u50cf\n    this.alternate = null; // \u4e0a\u4e00\u6b21\u66f4\u65b0\u65f6\u7684\u65e7Fiber = WorkInProgress.alternate\n  }",lang:"js"}),a.a.createElement("ol",{start:2},a.a.createElement("li",null,a.a.createElement("p",null,"\u5c01\u88c5\u4e86",a.a.createElement("code",null,"callBack"),"\u51fd\u6570")),a.a.createElement("li",null,a.a.createElement("p",null,"\u6267\u884c\u4e86",a.a.createElement("code",null,"unbatchedUpdates"),"\uff0c \u8c03\u7528",a.a.createElement("code",null,"updateContainer"),"\uff08\u4ee5\u975e\u6279\u5904\u7406\u7684\u5f62\u5f0f\u8fd0\u884c\uff09")),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"updateContainer")),a.a.createElement("ol",null,a.a.createElement("li",null),a.a.createElement("li",null,a.a.createElement("p",null,"\u8bbe\u7f6e",a.a.createElement("code",null,"expirationTime"))),a.a.createElement("li",null,a.a.createElement("p",null,"\u5c01\u88c5",a.a.createElement("code",null,"callback"))),a.a.createElement("li",null,a.a.createElement("p",null,"\u65b0\u5efa\u4e00\u4e2a",a.a.createElement("code",null,"update"),"\uff0c\u6dfb\u52a0\u5230",a.a.createElement("code",null,"fiber"),"\u7684",a.a.createElement("code",null,"updateQuene"),"\u91cc"))),a.a.createElement(c["a"],{code:"{\n  expirationTime: expirationTime,\n  tag: UpdateState,\n  payload: null,   // element\n  callback: null,  // callback\n\n  next: null,  // \u4e0b\u4e00\u4e2aupdate\n  nextEffect: null,  // \u4e0b\u4e00\u4e2a\u526f\u4f5c\u7528\n}",lang:"js"}))),a.a.createElement("h3",{id:"schedulework\u8c03\u5ea6\u6d41\u7a0b"},a.a.createElement(r["AnchorLink"],{to:"#schedulework\u8c03\u5ea6\u6d41\u7a0b","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"scheduleWork(\u8c03\u5ea6\u6d41\u7a0b)"),a.a.createElement("p",null,"\u8c03\u7528 ",a.a.createElement("code",null,"scheduleWork")," (\u53ea\u8981\u6d89\u53ca\u5230\u66f4\u65b0\uff0c\u90fd\u4f1a\u4ece\u8fd9\u91cc\u5f00\u59cb\u8d70, ",a.a.createElement("code",null,"this.setState"),")"),a.a.createElement("ol",null,a.a.createElement("li",null,a.a.createElement("p",null,"\u627e\u5230",a.a.createElement("code",null,"FiberRoot"))),a.a.createElement("li",null,a.a.createElement("p",null,"\u5224\u65ad\u662f\u5426\u6709\u9ad8\u4f18\u5148\u7ea7\u4efb\u52a1\u6253\u65ad\u5f53\u524d\u6b63\u5728\u6267\u884c\u7684\u4efb\u52a1")),a.a.createElement("li",null,a.a.createElement("p",null,"\u5982\u679c\u6709\u6700\u9ad8\u4f18\u5148\u7ea7\u800c\u4e14\u5904\u4e8e",a.a.createElement("code",null,"unbatchUpdate"),"\u4e0b\u6267\u884c",a.a.createElement("code",null,"performSyncWorkOnRoot"))),a.a.createElement("li",null,a.a.createElement("p",null,"\u5176\u5b83\u8c03\u7528",a.a.createElement("code",null,"ensureRootIsScheduled"),"\u8fdb\u5165\u5f02\u6b65\u8c03\u5ea6\u6d41\u7a0b"))),a.a.createElement("h3",{id:"ensurerootisscheduled"},a.a.createElement(r["AnchorLink"],{to:"#ensurerootisscheduled","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"ensureRootIsScheduled"),a.a.createElement("p",null,"\u6b64\u5904\u4f1a\u5224\u65ad\u662f\u5426\u6709\u4f18\u5148\u7ea7\u66f4\u9ad8\u7684\u4efb\u52a1\u8fdb\u6765\uff0c\u5982\u679c\u6709\uff0c\u4f1a\u4e2d\u65ad\u73b0\u5728\u7684\u4efb\u52a1\uff0c\u5982\u679c\u6ca1\u6709\uff0c\u5c31\u7ee7\u7eed\u6267\u884c"),a.a.createElement("h3",{id:"unstable_schedulecallback"},a.a.createElement(r["AnchorLink"],{to:"#unstable_schedulecallback","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"unstable_scheduleCallback"),a.a.createElement("ul",null,a.a.createElement("li",null,"\u533a\u5206\u5ef6\u65f6\u4efb\u52a1(",a.a.createElement("code",null,"timeQuene"),")\u548c\u53ca\u65f6\u4efb\u52a1(",a.a.createElement("code",null,"taskQuene"),")\uff0c\u521b\u5efa\u4efb\u52a1"),a.a.createElement("li",null,"\u5b58\u5728\u53ca\u65f6\u4efb\u52a1\uff0c\u8c03\u7528",a.a.createElement("code",null,"requestHostCallback"))),a.a.createElement("h3",{id:"requesthostcallback"},a.a.createElement(r["AnchorLink"],{to:"#requesthostcallback","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"requestHostCallback"),a.a.createElement("ol",null,a.a.createElement("li",null,a.a.createElement("p",null,"\u521b\u5efa ",a.a.createElement("code",null,"MessageChannel"))),a.a.createElement("li",null,a.a.createElement("p",null,"\u8c03\u7528",a.a.createElement("code",null,"port.postMessage"),",\u6839\u636e ",a.a.createElement("code",null,"MessageChannel"),"\u7684\u7279\u6027\uff0c\u8c03\u7528",a.a.createElement("code",null,"port.postMessage"),"\u540e\uff0c\u4f1a\u5728\u5b8f\u4efb\u52a1\u91cc\u6267\u884c",a.a.createElement("code",null,"performWorkUntileDeadLine"))),a.a.createElement("li",null,a.a.createElement("p",null,"\u5728",a.a.createElement("code",null,"performWorkUntileDeadLine"),"\u4f1a\u9010\u6b65\u6839\u636e\u5f53\u524d\u65f6\u95f4\u5427\u5ef6\u65f6\u4efb\u52a1\u6dfb\u52a0\u5230\u53ca\u65f6\u4efb\u52a1")),a.a.createElement("li",null,a.a.createElement("p",null,"\u5728\u5b8f\u4efb\u52a1\u4e2d\u6267\u884c",a.a.createElement("code",null,"callback"),",\u4e5f\u5c31\u662f",a.a.createElement("code",null,"performSyncWorkOnRoot"))),a.a.createElement("li",null,a.a.createElement("p",null,"\u5982\u679c\u5b58\u5728\u5b50\u4efb\u52a1\uff0c\u5219\u9012\u5f52\u6267\u884c",a.a.createElement("code",null,"performWorkUntileDeadLine")))),a.a.createElement("h3",{id:"performsyncworkonroot"},a.a.createElement(r["AnchorLink"],{to:"#performsyncworkonroot","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"performSyncWorkOnRoot"),a.a.createElement("h4",{id:"workloopsync"},a.a.createElement(r["AnchorLink"],{to:"#workloopsync","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"workLoopSync"),a.a.createElement("p",null,"\u6b64\u5904\u53ea\u8981\u6267\u884c\u529b\u4e09\u4e2a\u64cd\u4f5c\uff1a"),a.a.createElement("ul",null,a.a.createElement("li",null,"\u6807\u8bb0\u4e0a\u4e0b\u6587\u4e3a",a.a.createElement("code",null,"RenderContext")),a.a.createElement("li",null,"\u6267\u884c",a.a.createElement("code",null,"workLoopSync"),"\u9012\u5f52\u521b\u5efa",a.a.createElement("code",null,"fiber tree"),"\u6807\u8bb0\u526f\u4f5c\u7528\uff0c",a.a.createElement("code",null,"render"),"\u4ee5\u53ca\u4e4b\u524d\u7684\u751f\u547d\u5468\u671f\u90fd\u5c06\u5728\u6b64\u9636\u6bb5\u6267\u884c"),a.a.createElement("li",null,"\u8c03\u7528",a.a.createElement("code",null,"finishSyncRender"),",\u6e32\u67d3\u9875\u9762\uff0c\u6267\u884c\u5269\u4e0b\u7684\u751f\u547d\u5468\u671f")),a.a.createElement("p",null,"\u8c03\u7528",a.a.createElement("code",null,"beginWork"),"\uff0c\u5728",a.a.createElement("code",null,"beginWork"),"\u521b\u5efa",a.a.createElement("code",null,"Fiber"),"\u8282\u70b9\uff0c\u5982\u679c",a.a.createElement("code",null,"Next"),"\u8282\u70b9\u4e0d\u4e3a\u7a7a\uff0c\u7ee7\u7eed\u5904\u7406",a.a.createElement("code",null,"next"),"\u8282\u70b9\uff0c\u76f4\u5230",a.a.createElement("code",null,"next"),"\u4e3a null \u8bf4\u660e\u5df2\u7ecf\u521b\u5efa\u5b8c\u6574\u4e2a",a.a.createElement("code",null,"Fiber tree"),"\u4e86\uff0c\u4e4b\u540e\u8c03\u7528",a.a.createElement("code",null,"completeUnitOfWork"),"\uff0c\u521b\u5efa Dom \u5bf9\u8c61\u7b49\u3002\u6ce8\u610f\uff1a ",a.a.createElement("code",null,"completeUnitOfWork"),"\u9636\u6bb5\u867d\u7136\u521b\u5efa\u4e86 dom \u5bf9\u8c61\uff0c\u4f46\u662f\u8fd8\u4e0d\u4f1a\u6e32\u67d3\u5230\u9875\u9762\u4e0a\uff0c\u53ea\u662f\u4fdd\u5b58\u7740\u3002"),a.a.createElement("p",null,a.a.createElement("strong",null,"beginWork")),a.a.createElement("ul",null,a.a.createElement("li",null,"\u521d\u6b21\u5219\u521b\u5efa",a.a.createElement("code",null,"fiber"),"\u8282\u70b9"),a.a.createElement("li",null,"\u975e\u521d\u6b21\u5219\u8fdb\u884c",a.a.createElement("code",null,"diff"),",\u6253\u4e0a",a.a.createElement("code",null,"Effect"),"\u66f4\u65b0\u6807\u8bb0"),a.a.createElement("li",null,"\u6267\u884c",a.a.createElement("code",null,"render"),"\u4e4b\u524d\u7684\u751f\u547d\u5468\u671f\uff0c\u4ee5\u53ca\u6267\u884c",a.a.createElement("code",null,"render"),"\u751f\u547d\u5468\u671f\uff0c\u83b7\u5f97\u5b50\u8282\u70b9\uff0c\u7ee7\u7eed\u5faa\u73af\u6267\u884c",a.a.createElement("code",null,"beginWork")),a.a.createElement("li",null,"\u94fe\u63a5\u4e0a\u7236\u7ea7\u8282\u70b9\uff0c\u5f62\u6210",a.a.createElement("code",null,"FiBer tree"))),a.a.createElement("p",null,a.a.createElement("strong",null,"\u53c2\u8003\u8d44\u6599")),a.a.createElement("p",null,a.a.createElement(r["Link"],{to:"https://zh-hans.reactjs.org/docs/concurrent-mode-adoption.html#why-so-many-modes"},"react \u5b98\u7f51"))))}));n["default"]=e=>{var n=a.a.useContext(r["context"]),l=n.demos;return a.a.useEffect((()=>{var n;null!==e&&void 0!==e&&null!==(n=e.location)&&void 0!==n&&n.hash&&r["AnchorLink"].scrollToAnchor(decodeURIComponent(e.location.hash.slice(1)))}),[]),a.a.createElement(o,{demos:l})}},ZRCK:function(e,n,l){e.exports=l.p+"static/createelement.a67487ca.png"}}]);