197 lines
25 KiB
Plaintext
197 lines
25 KiB
Plaintext
<mxfile host="Electron" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/29.3.6 Chrome/140.0.7339.249 Electron/38.8.0 Safari/537.36" version="29.3.6">
|
|
<diagram id="4Y_KsI118iPX1C1HI_qV" name="Page-1">
|
|
<mxGraphModel dx="2066" dy="1249" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1100" pageHeight="850" math="0" shadow="0">
|
|
<root>
|
|
<mxCell id="0" />
|
|
<mxCell id="1" parent="0" />
|
|
<mxCell id="peq8d5gX8DXLt__JmTx_-2" parent="1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#B3B3B3;fontColor=#333333;" value="" vertex="1">
|
|
<mxGeometry height="269" width="192" x="210" y="131" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="peq8d5gX8DXLt__JmTx_-3" parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" value="<font style="font-size: 18px" face="Verdana">Mounting</font>" vertex="1">
|
|
<mxGeometry height="20" width="38" x="282" y="141" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="peq8d5gX8DXLt__JmTx_-4" edge="1" parent="1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" value="">
|
|
<mxGeometry relative="1" as="geometry">
|
|
<Array as="points">
|
|
<mxPoint x="272" y="301" />
|
|
<mxPoint x="272" y="301" />
|
|
</Array>
|
|
<mxPoint x="272" y="208" as="sourcePoint" />
|
|
<mxPoint x="272" y="321" as="targetPoint" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
<mxCell id="peq8d5gX8DXLt__JmTx_-5" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;gradientColor=#E8F1FF;" value="<h3 id="static-getderivedstatefromprops"><code style="font-weight: normal"><font style="font-size: 14px">function () {}</font></code></h3>" vertex="1">
|
|
<mxGeometry height="30" width="140" x="242" y="178" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="peq8d5gX8DXLt__JmTx_-7" parent="1" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;" value="<font style="font-size: 13px" face="Verdana"><b>"Render phase"<br></b></font><br>Pure and has no side<br>effects. May be paused,<br>aborted or restarted by<br>React." vertex="1">
|
|
<mxGeometry height="90" width="140" x="40" y="191" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="peq8d5gX8DXLt__JmTx_-8" parent="1" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;" value="<font style="font-size: 14px"><b>"Commit phase"<br></b><br></font>Can work with DOM,<br>run side effects,<br>schedule updates.<br>" vertex="1">
|
|
<mxGeometry height="70" width="130" x="40" y="471" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="peq8d5gX8DXLt__JmTx_-12" parent="1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#B3B3B3;fontColor=#333333;" value="" vertex="1">
|
|
<mxGeometry height="269" width="452" x="450" y="131" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="peq8d5gX8DXLt__JmTx_-13" parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" value="<font style="font-size: 18px" face="Verdana">Updating</font>" vertex="1">
|
|
<mxGeometry height="20" width="75.91564927857935" x="632.0037624861264" y="141" as="geometry" />
|
|
</mxCell>
|
|
<UserObject label="New props" id="peq8d5gX8DXLt__JmTx_-15">
|
|
<mxCell parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;gradientColor=#E8F1FF;" vertex="1">
|
|
<mxGeometry height="30" width="92" x="468" y="179" as="geometry" />
|
|
</mxCell>
|
|
</UserObject>
|
|
<mxCell id="peq8d5gX8DXLt__JmTx_-16" parent="1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#B3B3B3;" value="" vertex="1">
|
|
<mxGeometry height="320" width="692" x="210" y="430" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="peq8d5gX8DXLt__JmTx_-17" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#E8F1FF;strokeColor=#6c8ebf;" value="<h3 id="static-getderivedstatefromprops"><code><font style="font-weight: normal ; font-size: 14px">return ()</font></code></h3>" vertex="1">
|
|
<mxGeometry height="30" width="140" x="242" y="321" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="bXESYanQTJGo6Cj8_ghC-12" edge="1" parent="1" source="peq8d5gX8DXLt__JmTx_-18" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Helvetica;fontSize=12;" target="bXESYanQTJGo6Cj8_ghC-10">
|
|
<mxGeometry relative="1" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="peq8d5gX8DXLt__JmTx_-18" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;gradientColor=#C8E8C5;" value="" vertex="1">
|
|
<mxGeometry height="50" width="630" x="242" y="553" as="geometry" />
|
|
</mxCell>
|
|
<UserObject label="<h3 id="static-getderivedstatefromprops"><code><font style="font-size: 14px"><a href="https://reactjs.org/docs/hooks-reference.html#usememo">useMemo()</a></font></code></h3>" tooltip="https://reactjs.org/docs/hooks-reference.html#usememo" id="peq8d5gX8DXLt__JmTx_-26">
|
|
<mxCell parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;dashed=1;gradientColor=#E8F1FF;" vertex="1">
|
|
<mxGeometry height="30" width="90" x="292" y="236" as="geometry" />
|
|
</mxCell>
|
|
</UserObject>
|
|
<mxCell id="peq8d5gX8DXLt__JmTx_-31" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;gradientColor=#FFF1B8;" value="<h3 id="static-getderivedstatefromprops"><code style="font-weight: normal">React updates DOM and refs</code></h3>" vertex="1">
|
|
<mxGeometry height="50" width="632" x="240" y="461" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="yjP6mhXBnPZrxiyDEznI-19" edge="1" parent="1" source="peq8d5gX8DXLt__JmTx_-32" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;fontColor=#007FFF;" value="">
|
|
<mxGeometry relative="1" as="geometry">
|
|
<Array as="points">
|
|
<mxPoint x="770" y="330" />
|
|
<mxPoint x="671" y="330" />
|
|
</Array>
|
|
<mxPoint x="671" y="350" as="targetPoint" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
<UserObject label="<h3 id="static-getderivedstatefromprops"><code><font style="font-size: 14px"><a href="https://reactjs.org/docs/hooks-reference.html#usecallback">useCallback()</a></font></code></h3>" tooltip="https://reactjs.org/docs/hooks-reference.html#usecallback" id="peq8d5gX8DXLt__JmTx_-32">
|
|
<mxCell parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;dashed=1;gradientColor=#E8F1FF;" vertex="1">
|
|
<mxGeometry height="30" width="124" x="707.92" y="266" as="geometry" />
|
|
</mxCell>
|
|
</UserObject>
|
|
<mxCell id="peq8d5gX8DXLt__JmTx_-33" edge="1" parent="1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;" value="">
|
|
<mxGeometry relative="1" as="geometry">
|
|
<mxPoint x="339" y="209" as="sourcePoint" />
|
|
<mxPoint x="339" y="236" as="targetPoint" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
<mxCell id="peq8d5gX8DXLt__JmTx_-34" edge="1" parent="1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;" value="">
|
|
<mxGeometry relative="1" as="geometry">
|
|
<mxPoint x="341" y="265" as="sourcePoint" />
|
|
<mxPoint x="341" y="321" as="targetPoint" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
<UserObject label="<h3 id="static-getderivedstatefromprops"><code style="font-size: 14px"><font style="font-size: 14px"><a href="https://reactjs.org/docs/hooks-reference.html#useeffect">useEffect()</a>&nbsp;</font></code></h3>" tooltip="https://reactjs.org/docs/hooks-reference.html#useeffect" id="peq8d5gX8DXLt__JmTx_-42">
|
|
<mxCell parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1">
|
|
<mxGeometry height="20" width="40" x="299" y="567" as="geometry" />
|
|
</mxCell>
|
|
</UserObject>
|
|
<UserObject label="<h3 id="static-getderivedstatefromprops"><code style="font-size: 14px"><a href="https://reactjs.org/docs/hooks-reference.html#useeffect">useLayoutEffect()</a>&nbsp;</code></h3><h3 id="static-getderivedstatefromprops"><code><font size="1"><a href="https://reactjs.org/docs/hooks-reference.html#uselayouteffect"></a></font></code></h3>" tooltip="https://reactjs.org/docs/hooks-reference.html#uselayouteffect" link="https://reactjs.org/docs/hooks-reference.html#uselayouteffect" linkTarget="_blank" id="peq8d5gX8DXLt__JmTx_-43">
|
|
<mxCell parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1">
|
|
<mxGeometry height="20" width="40" x="435" y="567" as="geometry" />
|
|
</mxCell>
|
|
</UserObject>
|
|
<mxCell id="yjP6mhXBnPZrxiyDEznI-13" edge="1" parent="1" source="yjP6mhXBnPZrxiyDEznI-10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.68;entryY=-0.02;entryDx=0;entryDy=0;entryPerimeter=0;fontColor=#007FFF;" target="peq8d5gX8DXLt__JmTx_-31">
|
|
<mxGeometry relative="1" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="yjP6mhXBnPZrxiyDEznI-10" parent="1" style="rhombus;whiteSpace=wrap;html=1;labelBackgroundColor=none;fontColor=#007FFF;fillColor=none;aspect=fixed;" value="" vertex="1">
|
|
<mxGeometry height="20" width="20" x="660" y="210" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="Qn97D7aN3kyVjcPedb_y-5" connectable="0" parent="1" style="group;spacing=2;" value="" vertex="1">
|
|
<mxGeometry height="30" width="404" x="534" y="179" as="geometry" />
|
|
</mxCell>
|
|
<UserObject label="" id="Qn97D7aN3kyVjcPedb_y-1">
|
|
<mxCell parent="Qn97D7aN3kyVjcPedb_y-5" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;gradientColor=#E8F1FF;" vertex="1">
|
|
<mxGeometry height="30" width="332" x="20" as="geometry" />
|
|
</mxCell>
|
|
</UserObject>
|
|
<UserObject label="<h3 id="static-getderivedstatefromprops"><code><font color="#3399ff" style="font-size: 14px"><a href="https://reactjs.org/docs/hooks-reference.html#usestate">useState()</a></font></code></h3>" tooltip="https://reactjs.org/docs/hooks-reference.html#usestate" id="peq8d5gX8DXLt__JmTx_-39">
|
|
<mxCell parent="Qn97D7aN3kyVjcPedb_y-5" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1">
|
|
<mxGeometry height="20" width="40" x="58" y="5" as="geometry" />
|
|
</mxCell>
|
|
</UserObject>
|
|
<UserObject label="<h3 id="static-getderivedstatefromprops"><code><font color="#3399ff" style="font-size: 14px"><a href="https://reactjs.org/docs/hooks-reference.html#usereducer">useReducer()</a></font></code></h3>" tooltip="https://reactjs.org/docs/hooks-reference.html#usereducer" id="peq8d5gX8DXLt__JmTx_-40">
|
|
<mxCell parent="Qn97D7aN3kyVjcPedb_y-5" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1">
|
|
<mxGeometry height="20" width="40" x="162" y="5" as="geometry" />
|
|
</mxCell>
|
|
</UserObject>
|
|
<UserObject label="<h3 id="static-getderivedstatefromprops"><code><font color="#3399ff" style="font-size: 14px"><a href="https://reactjs.org/docs/hooks-reference.html#usecontext" style="line-height: 1">useContext()</a></font></code></h3>" tooltip="https://reactjs.org/docs/hooks-reference.html#usecontext" id="peq8d5gX8DXLt__JmTx_-41">
|
|
<mxCell parent="Qn97D7aN3kyVjcPedb_y-5" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1">
|
|
<mxGeometry height="20" width="40" x="275.5" y="5" as="geometry" />
|
|
</mxCell>
|
|
</UserObject>
|
|
<mxCell id="Qn97D7aN3kyVjcPedb_y-7" parent="1" style="text;whiteSpace=wrap;html=1;fillColor=none;align=left;" value="<h3 id="static-getderivedstatefromprops" style="color: rgb(0 , 0 , 0) ; letter-spacing: normal ; text-indent: 0px ; text-transform: none ; word-spacing: 0px"><span style="font-weight: 400"><font style="font-size: 12px"><i>These hooks support cleanup (inside their return function)</i></font></span></h3>" vertex="1">
|
|
<mxGeometry height="60" width="160" x="582" y="541" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="bXESYanQTJGo6Cj8_ghC-6" parent="1" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;" value="<font style="font-size: 13px" face="Verdana"><b>"Cleanup phase"<br></b></font><br>Runs before a<br>component is removed.<br>Prevents memory leaks." vertex="1">
|
|
<mxGeometry height="71" width="139" x="42" y="640" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="bXESYanQTJGo6Cj8_ghC-17" edge="1" parent="1" source="bXESYanQTJGo6Cj8_ghC-10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=12;" target="peq8d5gX8DXLt__JmTx_-18">
|
|
<mxGeometry relative="1" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="bXESYanQTJGo6Cj8_ghC-10" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" value="<h3 id="static-getderivedstatefromprops"><code style="font-weight: normal">React cleans up effects</code></h3>" vertex="1">
|
|
<mxGeometry height="50" width="631" x="241" y="670" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="bXESYanQTJGo6Cj8_ghC-15" edge="1" parent="1" style="endArrow=classic;html=1;strokeColor=#000000;entryX=0.377;entryY=-0.02;entryDx=0;entryDy=0;entryPerimeter=0;" value="">
|
|
<mxGeometry height="50" relative="1" width="50" as="geometry">
|
|
<mxPoint x="557.29" y="511" as="sourcePoint" />
|
|
<mxPoint x="557.29" y="552" as="targetPoint" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
<mxCell id="peq8d5gX8DXLt__JmTx_-11" edge="1" parent="1" source="peq8d5gX8DXLt__JmTx_-17" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" value="">
|
|
<mxGeometry relative="1" as="geometry">
|
|
<Array as="points">
|
|
<mxPoint x="310" y="401" />
|
|
<mxPoint x="310" y="401" />
|
|
</Array>
|
|
<mxPoint x="310" y="461" as="targetPoint" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
<mxCell id="peq8d5gX8DXLt__JmTx_-25" edge="1" parent="1" style="endArrow=none;dashed=1;html=1;fontFamily=Lucida Console;fontSize=12;fontColor=#000000;strokeColor=#B3B3B3;" value="">
|
|
<mxGeometry height="50" relative="1" width="50" as="geometry">
|
|
<mxPoint x="212" y="770" as="sourcePoint" />
|
|
<mxPoint x="900" y="770" as="targetPoint" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
<mxCell id="bXESYanQTJGo6Cj8_ghC-23" parent="1" style="text;whiteSpace=wrap;html=1;fillColor=none;align=left;" value="<h3 id="static-getderivedstatefromprops" style="color: rgb(0 , 0 , 0) ; letter-spacing: normal ; text-indent: 0px ; text-transform: none ; word-spacing: 0px"><span style="font-size: 12px ; font-weight: 400"><i>React will clean up<br>before the effects' next run</i></span></h3>" vertex="1">
|
|
<mxGeometry height="60" width="170" x="582" y="599" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="bXESYanQTJGo6Cj8_ghC-22" connectable="0" parent="1" style="group" value="" vertex="1">
|
|
<mxGeometry height="27" width="237.5" x="210" y="785.2" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="peq8d5gX8DXLt__JmTx_-24" parent="bXESYanQTJGo6Cj8_ghC-22" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;fontSize=12;fontColor=#000000;" value="<a href="https://github.com/Wavez/react-hooks-lifecycle" style="font-size: 12px"><font color="#007fff" style="font-size: 12px" face="Lucida Console">Wavez/react-hooks-lifecycle</font></a>" vertex="1">
|
|
<mxGeometry height="15" width="205" x="32.5" y="5" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="peq8d5gX8DXLt__JmTx_-23" parent="bXESYanQTJGo6Cj8_ghC-22" style="shape=image;imageAspect=0;aspect=fixed;verticalLabelPosition=bottom;verticalAlign=top;gradientColor=#ffffff;fontSize=18;fontColor=#000000;image=data:image/svg+xml,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDMyLjYgMzEuOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzIuNiAzMS44OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+JiN4YTs8c3R5bGUgdHlwZT0idGV4dC9jc3MiPiYjeGE7CS5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojMTgxNjE2O30mI3hhOzwvc3R5bGU+JiN4YTs8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTYuMywwQzcuMywwLDAsNy4zLDAsMTYuM2MwLDcuMiw0LjcsMTMuMywxMS4xLDE1LjVjMC44LDAuMSwxLjEtMC40LDEuMS0wLjhjMC0wLjQsMC0xLjQsMC0yLjggIGMtNC41LDEtNS41LTIuMi01LjUtMi4yYy0wLjctMS45LTEuOC0yLjQtMS44LTIuNGMtMS41LTEsMC4xLTEsMC4xLTFjMS42LDAuMSwyLjUsMS43LDIuNSwxLjdjMS41LDIuNSwzLjgsMS44LDQuNywxLjQgIGMwLjEtMS4xLDAuNi0xLjgsMS0yLjJjLTMuNi0wLjQtNy40LTEuOC03LjQtOC4xYzAtMS44LDAuNi0zLjIsMS43LTQuNEM3LjQsMTAuNyw2LjgsOSw3LjcsNi44YzAsMCwxLjQtMC40LDQuNSwxLjcgIGMxLjMtMC40LDIuNy0wLjUsNC4xLTAuNWMxLjQsMCwyLjgsMC4yLDQuMSwwLjVjMy4xLTIuMSw0LjUtMS43LDQuNS0xLjdjMC45LDIuMiwwLjMsMy45LDAuMiw0LjNjMSwxLjEsMS43LDIuNiwxLjcsNC40ICBjMCw2LjMtMy44LDcuNi03LjQsOGMwLjYsMC41LDEuMSwxLjUsMS4xLDNjMCwyLjIsMCwzLjksMCw0LjVjMCwwLjQsMC4zLDAuOSwxLjEsMC44YzYuNS0yLjIsMTEuMS04LjMsMTEuMS0xNS41ICBDMzIuNiw3LjMsMjUuMywwLDE2LjMsMHoiLz4mI3hhOzwvc3ZnPg==;" value="" vertex="1">
|
|
<mxGeometry height="27" width="27.675" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="AQQmuxFUS888oZAzTY0o-6" parent="1" style="shape=image;imageAspect=0;aspect=fixed;verticalLabelPosition=bottom;verticalAlign=top;image=https://www.svgrepo.com/show/167751/refresh.svg;" value="" vertex="1">
|
|
<mxGeometry height="20" width="20" x="547" y="626" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="peq8d5gX8DXLt__JmTx_-9" parent="1" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;fontFamily=Verdana;fontStyle=1" value="<font style="font-size: 26px" color="#232f3e">React Hooks Lifecycle</font>" vertex="1">
|
|
<mxGeometry height="20" width="330" x="294" y="52" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="dHOrFxX_HmPoJwZjWr78-1" connectable="0" parent="1" style="group" value="" vertex="1">
|
|
<mxGeometry height="59" width="62" x="218" y="34" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="peq8d5gX8DXLt__JmTx_-19" parent="dHOrFxX_HmPoJwZjWr78-1" style="shape=image;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;imageAspect=0;image=https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg;" value="" vertex="1">
|
|
<mxGeometry height="47" width="50" x="12" y="12" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="uvFVxUhtjcqsa5vKmOB1-4" parent="dHOrFxX_HmPoJwZjWr78-1" style="shape=image;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;aspect=fixed;imageAspect=0;image=data:image/svg+xml,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE0MC43IDMzNC42IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNDAuNyAzMzQuNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPiYjeGE7PHN0eWxlIHR5cGU9InRleHQvY3NzIj4mI3hhOwkuc3Qwe2ZpbGw6IzZFQ0ZGMDt9JiN4YTs8L3N0eWxlPiYjeGE7PGc+JiN4YTsJPGc+JiN4YTsJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zLjUsNTAuM2wzMS42LDYuMWMxLjMsMC4zLDIuNy0wLjYsMi45LTJsMC4zLTEuN2MwLjMtMS4zLTAuNi0yLjctMi0yLjlMNC44LDQzLjdjLTEuMy0wLjMtMi43LDAuNi0yLjksMiAgICBsLTAuMywxLjdDMS4zLDQ4LjcsMi4xLDUwLDMuNSw1MC4zeiIvPiYjeGE7CTwvZz4mI3hhOwk8Zz4mI3hhOwkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTMuNSw2Mi44bDMxLjYsNi4xYzEuMywwLjMsMi43LTAuNiwyLjktMmwwLjMtMS43YzAuMy0xLjMtMC42LTIuNy0yLTIuOUw0LjgsNTYuMmMtMS4zLTAuMy0yLjcsMC42LTIuOSwyICAgIGwtMC4zLDEuN0MxLjMsNjEuMiwyLjEsNjIuNSwzLjUsNjIuOHoiLz4mI3hhOwk8L2c+JiN4YTsJPGc+JiN4YTsJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zLjUsNzUuM2wzMS42LDYuMWMxLjMsMC4zLDIuNy0wLjYsMi45LTJsMC4zLTEuN2MwLjMtMS4zLTAuNi0yLjctMi0yLjlMNC44LDY4LjdjLTEuMy0wLjMtMi43LDAuNi0yLjksMiAgICBsLTAuMywxLjdDMS4zLDczLjcsMi4xLDc1LDMuNSw3NS4zeiIvPiYjeGE7CTwvZz4mI3hhOwk8Zz4mI3hhOwkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTMuNSw4Ny44bDMxLjYsNi4xYzEuMywwLjMsMi43LTAuNiwyLjktMmwwLjMtMS43YzAuMy0xLjMtMC42LTIuNy0yLTIuOUw0LjgsODEuMmMtMS4zLTAuMy0yLjcsMC42LTIuOSwyICAgIGwtMC4zLDEuN0MxLjMsODYuMiwyLjEsODcuNSwzLjUsODcuOHoiLz4mI3hhOwk8L2c+JiN4YTsJPGc+JiN4YTsJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zLjUsMTAwLjNsMzEuNiw2LjFjMS4zLDAuMywyLjctMC42LDIuOS0ybDAuMy0xLjdjMC4zLTEuMy0wLjYtMi43LTItMi45TDQuOCw5My43Yy0xLjMtMC4zLTIuNywwLjYtMi45LDIgICAgbC0wLjMsMS43QzEuMyw5OC43LDIuMSwxMDAsMy41LDEwMC4zeiIvPiYjeGE7CTwvZz4mI3hhOwk8Zz4mI3hhOwkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTMuNSwxMTIuOGwzMS42LDYuMWMxLjMsMC4zLDIuNy0wLjYsMi45LTJsMC4zLTEuN2MwLjMtMS4zLTAuNi0yLjctMi0yLjlsLTMxLjYtNi4xYy0xLjMtMC4zLTIuNywwLjYtMi45LDIgICAgbC0wLjMsMS43QzEuMywxMTEuMiwyLjEsMTEyLjUsMy41LDExMi44eiIvPiYjeGE7CTwvZz4mI3hhOwk8Zz4mI3hhOwkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTMuNSwxMjUuM2wzMS42LDYuMWMxLjMsMC4zLDIuNy0wLjYsMi45LTJsMC4zLTEuN2MwLjMtMS4zLTAuNi0yLjctMi0yLjlsLTMxLjYtNi4xYy0xLjMtMC4zLTIuNywwLjYtMi45LDIgICAgbC0wLjMsMS43QzEuMywxMjMuNywyLjEsMTI1LDMuNSwxMjUuM3oiLz4mI3hhOwk8L2c+JiN4YTsJPGc+JiN4YTsJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNS40LDM5LjN2MTAuMmg5LjFWMzkuM2M4LjgtMi4xLDE1LjQtMTAsMTUuNC0xOS40QzM5LjgsOC45LDMwLjksMCwxOS45LDBDOC45LDAsMCw4LjksMCwxOS45ICAgIEMwLDI5LjQsNi42LDM3LjMsMTUuNCwzOS4zeiBNNCwxOS45QzQsMTEuMSwxMS4xLDQsMTkuOSw0YzguOCwwLDE1LjksNy4xLDE1LjksMTUuOWMwLDguOC03LjEsMTUuOS0xNS45LDE1LjkgICAgQzExLjEsMzUuOSw0LDI4LjcsNCwxOS45eiIvPiYjeGE7CTwvZz4mI3hhOwk8Zz4mI3hhOwkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE1LjIsMTM1LjRWMTI1aDkuMXYxMC40YzAuMywwLjEsMC4zLTAuNCwwLjEtMC41bDAsMTExLjFjLTAuNSwxNS40LDQuNCwzMC4yLDEyLjQsNDMuM3MyMCwyMy44LDMzLjksMzAuMyAgICBjMTIuMSw1LjcsMjYuOCw4LDM4LjcsMmM5LjgtNSwxNi4zLTE1LDE5LjUtMjUuNWMzLjItMTAuNSwzLjUtMjEuNywzLjgtMzIuN2MtNS40LDUuNy0xMC4zLDExLTE1LjcsMTYuN2MwLjEtMC4zLDAuNC0wLjUsMC43LTAuNSAgICBjOC45LTE0LjksMTAuNy0zMy4xLDUuMS00OS41YzE2LjcsMTkuMiwyMi42LDQ2LjgsMTQsNzAuN2MtNS4yLDE0LjYtMTYuMSwyNy45LTMxLDMyLjNjLTEzLjgsNC4xLTI4LjktMC4xLTQxLjUtNy4xICAgIGMtMTguMi0xMC4xLTMzLTI2LjEtNDEuNi00NWMtOC43LTE4LjktNy02MC45LTctNjAuOUwxNS4yLDEzNS40eiIvPiYjeGE7CTwvZz4mI3hhOzwvZz4mI3hhOzwvc3ZnPg==;sketch=0;imageBorder=none;" value="" vertex="1">
|
|
<mxGeometry height="49" width="21" as="geometry" />
|
|
</mxCell>
|
|
<UserObject label="<font color="#007fff" face="Lucida Console">Gal Margalit</font>" link="https://twitter.com/MargalitGal" linkTarget="_blank" id="yjP6mhXBnPZrxiyDEznI-31">
|
|
<mxCell parent="1" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;fontSize=12;fontColor=#000000;fontStyle=4" vertex="1">
|
|
<mxGeometry height="20" width="80" x="836" y="791.12" as="geometry" />
|
|
</mxCell>
|
|
</UserObject>
|
|
</root>
|
|
</mxGraphModel>
|
|
</diagram>
|
|
</mxfile>
|