+{"diagram":{"image":{"x":0,"width":200,"y":0,"pngdata":"iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAsUlEQVR4nO3BAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB8GXHmAAFMgHIEAAAAAElFTkSuQmCC","height":200},"elements":{"leftChildren":[],"note":"","margin":{"childMarginW":10,"childMarginH":5,"marginW":20,"marginH":10},"watermark":"","children":[{"parent":"root","lineStyle":{"lineColor":"#4DD0E1","lineWidth":"2"},"children":[{"parent":"c723a9675abe","note":"","children":[],"id":"6c3908c4ee07","title":"React 是 React 库的入口","icons":[{"color":"rgb(191, 30, 27)","name":"priority","index":"0","text":""}]},{"parent":"c723a9675abe","children":[],"id":"a53c6f2ec719","title":"如果你通过使用 <script> 标签的方式来加载 React，则可以通过 React 全局变量对象来获得 React 的顶层 API","icons":[{"color":"rgb(99, 171, 247)","name":"priority","index":"1","text":""}]},{"parent":"c723a9675abe","children":[],"id":"290074f61aa6","title":"当你使用 ES6 与 npm 时，可以通过编写 import React from 'react' 来引入它们","icons":[{"color":"rgb(113, 203, 45)","name":"priority","index":"2","text":""}]},{"parent":"c723a9675abe","children":[],"id":"8c658118ae96","title":"当你使用 ES5 与 npm 时，则可以通过编写 var React = require('react') 来引入它们","icons":[{"color":"rgb(255, 159, 26)","name":"priority","index":"3","text":""}]}],"style":{"padding":"8px 10px 8px 10px","backgroundColor":"#2196F3","color":"#F5F5F5","textAlign":"left","font-weight":"bold","font-size":13,"font-style":"normal","border-radius":"5px","background-color":"#4DD0E1","lineStype":{"lineColor":"#1976D2","lineWidth":"2"},"box-shadow":"1px 2px 6px #aaa","lineStyle":{"lineColor":"#4DD0E1","lineWidth":"2"},"font-family":"微软雅黑","border-width":0,"border-style":"solid"},"id":"c723a9675abe","title":"介绍"},{"parent":"root","lineStyle":{"lineColor":"#388E3C","randomLineColor":"rgb(153,204,255)","lineWidth":"2"},"children":[{"parent":"a366ed307a4a","lineStyle":{"lineColor":"#388E3C","lineWidth":"2"},"children":[{"parent":"430e936d9889","note":"","children":[],"id":"076beaf94298","title":"可以通过子类 React.Component 或 React.PureComponent 来定义 React 组件","icons":[{"color":"rgb(191, 30, 27)","name":"priority","index":"0","text":""}]},{"parent":"430e936d9889","children":[],"id":"339a6475a4c6","title":"如果你不使用 ES6 的 class，则可以使用 create-react-class 模块来替代","icons":[{"color":"rgb(99, 171, 247)","name":"priority","index":"1","text":""}]},{"parent":"430e936d9889","children":[{"parent":"e4bee9a893b6","children":[],"id":"a884532e360e","title":"React.memo"}],"id":"e4bee9a893b6","title":"React 组件也可以被定义为可被包装的函数：<br>","icons":[{"color":"rgb(113, 203, 45)","name":"priority","index":"2","text":""}]}],"style":{"padding":"8px 10px 8px 10px","backgroundColor":"#2196F3","color":"#616161","textAlign":"left","font-weight":"bold","font-size":12,"border-color":"rgb(255, 255, 255)","font-style":"normal","border-radius":"5px","background-color":"#C8E6C9","lineStype":{"lineColor":"#388E3C","randomLineColor":"rgb(153,204,255)","lineWidth":"2"},"box-shadow":"1px 2px 6px #aaa","lineStyle":{"lineColor":"#388E3C","randomLineColor":"rgb(153,204,255)","lineWidth":"2"},"font-family":"微软雅黑","border-width":"0px","border-style":"none"},"id":"430e936d9889","title":"组件<br>"},{"parent":"a366ed307a4a","lineStyle":{"lineColor":"#388E3C","lineWidth":"2"},"children":[{"parent":"87647f3a4cff","note":"","children":[],"id":"83e0e5bda124","title":"我们建议使用 JSX 来编写你的 UI 组件。每个 JSX 元素都是调用 React.createElement() 的语法糖。","icons":[{"color":"rgb(191, 30, 27)","name":"priority","index":"0","text":""}]},{"parent":"87647f3a4cff","children":[{"parent":"4f895faf2a9c","children":[],"id":"a341e158b9a9","title":"createElement()"},{"parent":"4f895faf2a9c","children":[],"id":"6c7ac1b01f87","title":"createFactory()"}],"id":"4f895faf2a9c","title":"一般来说，如果你使用了 JSX，就不再需要调用以下方法","icons":[{"color":"rgb(99, 171, 247)","name":"priority","index":"1","text":""}]}],"style":{"padding":"8px 10px 8px 10px","backgroundColor":"#2196F3","color":"#616161","textAlign":"left","font-weight":"bold","font-size":12,"border-color":"rgb(255, 255, 255)","font-style":"normal","border-radius":"5px","background-color":"#C8E6C9","lineStype":{"lineColor":"#388E3C","randomLineColor":"rgb(153,204,255)","lineWidth":"2"},"box-shadow":"1px 2px 6px #aaa","lineStyle":{"lineColor":"#388E3C","randomLineColor":"rgb(153,204,255)","lineWidth":"2"},"font-family":"微软雅黑","border-width":"0px","border-style":"none"},"id":"87647f3a4cff","title":"创建 React 元素<br>"},{"parent":"a366ed307a4a","lineStyle":{"lineColor":"#388E3C","lineWidth":"2"},"children":[{"parent":"bc5852960a60","note":"","children":[{"parent":"9dd42a8de6f2","children":[],"id":"a70a8b792aff","title":"cloneElement()"},{"parent":"9dd42a8de6f2","children":[],"id":"66f5b799ec16","title":"isValidElement()"},{"parent":"9dd42a8de6f2","children":[],"id":"746e8b570c30","title":"React.Children"}],"id":"9dd42a8de6f2","title":"React 提供了几个用于操作元素的 API","icons":[{"color":"rgb(191, 30, 27)","name":"priority","index":"0","text":""}]}],"style":{"padding":"8px 10px 8px 10px","backgroundColor":"#2196F3","color":"#616161","textAlign":"left","font-weight":"bold","font-size":12,"border-color":"rgb(255, 255, 255)","font-style":"normal","border-radius":"5px","background-color":"#C8E6C9","lineStype":{"lineColor":"#388E3C","randomLineColor":"rgb(153,204,255)","lineWidth":"2"},"box-shadow":"1px 2px 6px #aaa","lineStyle":{"lineColor":"#388E3C","randomLineColor":"rgb(153,204,255)","lineWidth":"2"},"font-family":"微软雅黑","border-width":"0px","border-style":"none"},"id":"bc5852960a60","title":"转换元素<br>"},{"parent":"a366ed307a4a","lineStyle":{"lineColor":"#388E3C","lineWidth":"2"},"children":[{"parent":"4f7c1471de66","note":"","children":[{"parent":"53d1f5ca1c70","children":[],"id":"3cc98f2214b4","title":"React.Fragment\n"}],"id":"53d1f5ca1c70","title":"React 还提供了用于减少不必要嵌套的组件","icons":[{"color":"rgb(191, 30, 27)","name":"priority","index":"0","text":""}]}],"style":{"padding":"8px 10px 8px 10px","backgroundColor":"#2196F3","color":"#616161","textAlign":"left","font-weight":"bold","font-size":12,"border-color":"rgb(255, 255, 255)","font-style":"normal","border-radius":"5px","background-color":"#C8E6C9","lineStype":{"lineColor":"#388E3C","randomLineColor":"rgb(153,204,255)","lineWidth":"2"},"box-shadow":"1px 2px 6px #aaa","lineStyle":{"lineColor":"#388E3C","randomLineColor":"rgb(153,204,255)","lineWidth":"2"},"font-family":"微软雅黑","border-width":"0px","border-style":"none"},"id":"4f7c1471de66","title":"Fragments<br>"},{"parent":"a366ed307a4a","lineStyle":{"lineColor":"#388E3C","lineWidth":"2"},"children":[{"parent":"f36ffc2f1dfb","note":"","children":[],"id":"2d73710e5e39","title":"React.createRef<br>","icons":[{"color":"rgb(191, 30, 27)","name":"priority","index":"0","text":""}]},{"parent":"f36ffc2f1dfb","children":[],"id":"7e14ac828892","title":"React.forwardRef","icons":[{"color":"rgb(99, 171, 247)","name":"priority","index":"1","text":""}]}],"style":{"padding":"8px 10px 8px 10px","backgroundColor":"#2196F3","color":"#616161","textAlign":"left","font-weight":"bold","font-size":12,"border-color":"rgb(255, 255, 255)","font-style":"normal","border-radius":"5px","background-color":"#C8E6C9","lineStype":{"lineColor":"#388E3C","randomLineColor":"rgb(153,204,255)","lineWidth":"2"},"box-shadow":"1px 2px 6px #aaa","lineStyle":{"lineColor":"#388E3C","randomLineColor":"rgb(153,204,255)","lineWidth":"2"},"font-family":"微软雅黑","border-width":"0px","border-style":"none"},"id":"f36ffc2f1dfb","title":"Refs<br>"},{"parent":"a366ed307a4a","lineStyle":{"lineColor":"#388E3C","lineWidth":"2"},"children":[{"parent":"38bbd215657b","note":"","children":[],"id":"02a92c5c377a","title":"Suspense 使得组件可以“等待”某些操作结束后，再进行渲染。目前，Suspense 仅支持的使用场景是：通过 React.lazy 动态加载组件","icons":[{"color":"rgb(191, 30, 27)","name":"priority","index":"0","text":""}]},{"parent":"38bbd215657b","children":[{"parent":"c75bbe348e48","children":[],"id":"3c717b82003e","title":"React.lazy"},{"parent":"c75bbe348e48","children":[],"id":"1392c0b40b0c","title":"React.Suspense"}],"id":"c75bbe348e48","title":"相关API","icons":[{"color":"rgb(99, 171, 247)","name":"priority","index":"1","text":""}]}],"style":{"padding":"8px 10px 8px 10px","backgroundColor":"#2196F3","color":"#616161","textAlign":"left","font-weight":"bold","font-size":12,"border-color":"rgb(255, 255, 255)","font-style":"normal","border-radius":"5px","background-color":"#C8E6C9","lineStype":{"lineColor":"#388E3C","randomLineColor":"rgb(153,204,255)","lineWidth":"2"},"box-shadow":"1px 2px 6px #aaa","lineStyle":{"lineColor":"#388E3C","randomLineColor":"rgb(153,204,255)","lineWidth":"2"},"font-family":"微软雅黑","border-width":"0px","border-style":"none"},"id":"38bbd215657b","title":"Suspense<br>"},{"parent":"a366ed307a4a","lineStyle":{"lineColor":"#388E3C","lineWidth":"2"},"children":[{"parent":"3fd9aa008b08","note":"","children":[],"id":"2dfedeec2ad4","title":"Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性","icons":[{"color":"rgb(191, 30, 27)","name":"priority","index":"0","text":""}]},{"parent":"3fd9aa008b08","children":[{"parent":"b0bc02f6a76c","children":[],"id":"1e7d9d5d5d61","title":"useState"},{"parent":"b0bc02f6a76c","children":[],"id":"3d8739eeca37","title":"useEffect"},{"parent":"b0bc02f6a76c","children":[],"id":"7dfb6d53a5d1","title":"useContext"}],"id":"b0bc02f6a76c","title":"基础 Hook","icons":[{"color":"rgb(99, 171, 247)","name":"priority","index":"1","text":""}]},{"parent":"3fd9aa008b08","children":[{"parent":"5d2882d55b2f","children":[],"id":"07820c811268","title":"useReducer"},{"parent":"5d2882d55b2f","children":[],"id":"295c24d5dd81","title":"useCallback"},{"parent":"5d2882d55b2f","children":[],"id":"f4bfa6af5bec","title":"useMemo"},{"parent":"5d2882d55b2f","children":[],"id":"69598d6c29a6","title":"useRef"},{"parent":"5d2882d55b2f","children":[],"id":"30c46f4bb02f","title":"useImperativeHandle"},{"parent":"5d2882d55b2f","children":[],"id":"ee54e3d5acab","title":"useLayoutEffect"},{"parent":"5d2882d55b2f","children":[],"id":"1438bd062fd6","title":"useDebugValue"}],"id":"5d2882d55b2f","title":"额外的 Hook","icons":[{"color":"rgb(113, 203, 45)","name":"priority","index":"2","text":""}]}],"style":{"padding":"8px 10px 8px 10px","backgroundColor":"#2196F3","color":"#616161","textAlign":"left","font-weight":"bold","font-size":12,"border-color":"rgb(255, 255, 255)","font-style":"normal","border-radius":"5px","background-color":"#C8E6C9","lineStype":{"lineColor":"#388E3C","randomLineColor":"rgb(153,204,255)","lineWidth":"2"},"box-shadow":"1px 2px 6px #aaa","lineStyle":{"lineColor":"#388E3C","randomLineColor":"rgb(153,204,255)","lineWidth":"2"},"font-family":"微软雅黑","border-width":"0px","border-style":"none"},"id":"3fd9aa008b08","title":"Hook<br>"}],"style":{"padding":"8px 10px 8px 10px","backgroundColor":"#2196F3","color":"rgb(255, 255, 255)","textAlign":"left","font-weight":"bold","font-size":13,"border-color":"rgb(255, 255, 255)","font-style":"normal","border-radius":"5px","background-color":"#388E3C","lineStype":{"lineColor":"#388E3C","randomLineColor":"rgb(153,204,255)","lineWidth":"2"},"box-shadow":"1px 2px 6px #aaa","lineStyle":{"lineColor":"#388E3C","randomLineColor":"rgb(153,204,255)","lineWidth":"2"},"font-family":"微软雅黑","border-width":"0px","border-style":"none"},"id":"a366ed307a4a","title":"概览<br>"}],"root":true,"theme":"customise_7fd055efa78b","style":{"background-color":"rgb(80, 194, 139)","border-radius":"5px","color":"rgb(255, 255, 255)","font-weight":"bold","border-color":"rgb(255, 255, 255)","border-width":"0px","border-style":"none"},"id":"root","title":"React 顶层 API之概览","icons":[{"color":"rgb(255, 255, 255)","name":"","index":"60"}],"structure":"mind_free"}},"meta":{"exportTime":"2022-04-09 11:06:09","member":"60cca488e0b34d55bbf2954f","diagramInfo":{"creator":"60cca488e0b34d55bbf2954f","created":"2022-04-09 10:52:52","modified":"2022-04-09 11:06:02","title":"4.1.1React 顶层 API之概览","category":"mind_free"},"id":"6250f5040791290727ba7720","type":"ProcessOn Schema File","version":"1.0"}}
0 commit comments