react_lifecycle.drawio

<mxfile host="drawio-plugin" modified="2023-09-12T12:03:11.485Z" agent="5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.45 Safari/537.36" etag="013n3jVeVfQSp_NEAhJW" version="15.5.4" type="embed"><diagram id="23iRSUPoRavnBvh4doch" name="Page-1"><mxGraphModel dx="738" dy="1466" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0"><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="3" value="componentDidMount" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1"><mxGeometry x="751" y="170" width="120" height="60" as="geometry"/></mxCell><mxCell id="5" value="componentWillReceiveProps" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1"><mxGeometry x="421" y="620" width="160" height="60" as="geometry"/></mxCell><mxCell id="9" value="componentWillUpdate" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1"><mxGeometry x="751" y="740" width="120" height="60" as="geometry"/></mxCell><mxCell id="11" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" parent="1" source="52" edge="1"><mxGeometry width="50" height="50" relative="1" as="geometry"><mxPoint x="871" y="320" as="sourcePoint"/><mxPoint x="1080.9999999999998" y="320" as="targetPoint"/></mxGeometry></mxCell><mxCell id="12" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" parent="1" source="3" edge="1"><mxGeometry width="50" height="50" relative="1" as="geometry"><mxPoint x="951" y="420" as="sourcePoint"/><mxPoint x="810.9999999999999" y="280" as="targetPoint"/></mxGeometry></mxCell><mxCell id="14" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;startArrow=none;" parent="1" source="54" target="9" edge="1"><mxGeometry width="50" height="50" relative="1" as="geometry"><mxPoint x="811" y="660" as="sourcePoint"/><mxPoint x="1001" y="370" as="targetPoint"/></mxGeometry></mxCell><mxCell id="15" value="" style="endArrow=classic;html=1;rounded=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;startArrow=none;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" parent="1" source="50" target="5" edge="1"><mxGeometry width="50" height="50" relative="1" as="geometry"><mxPoint x="521" y="360" as="sourcePoint"/><mxPoint x="951" y="370" as="targetPoint"/><Array as="points"/></mxGeometry></mxCell><mxCell id="16" value="" style="endArrow=classic;html=1;rounded=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" parent="1" source="5" target="54" edge="1"><mxGeometry width="50" height="50" relative="1" as="geometry"><mxPoint x="571" y="350" as="sourcePoint"/><mxPoint x="711" y="630" as="targetPoint"/></mxGeometry></mxCell><mxCell id="17" value="render" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1"><mxGeometry x="751" y="880" width="120" height="60" as="geometry"/></mxCell><mxCell id="18" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="9" target="17" edge="1"><mxGeometry width="50" height="50" relative="1" as="geometry"><mxPoint x="841" y="520" as="sourcePoint"/><mxPoint x="891" y="470" as="targetPoint"/></mxGeometry></mxCell><mxCell id="20" value="constructor" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1"><mxGeometry x="751" y="-160" width="120" height="60" as="geometry"/></mxCell><mxCell id="23" value="componentDidUpdate" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1"><mxGeometry x="751" y="1000" width="120" height="60" as="geometry"/></mxCell><mxCell id="30" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="2" edge="1"><mxGeometry width="50" height="50" relative="1" as="geometry"><mxPoint x="821" y="60" as="sourcePoint"/><mxPoint x="810.9999999999999" y="50" as="targetPoint"/></mxGeometry></mxCell><mxCell id="31" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" parent="1" target="3" edge="1"><mxGeometry width="50" height="50" relative="1" as="geometry"><mxPoint x="810.9999999999999" y="130" as="sourcePoint"/><mxPoint x="871" y="10" as="targetPoint"/></mxGeometry></mxCell><mxCell id="32" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="17" target="23" edge="1"><mxGeometry width="50" height="50" relative="1" as="geometry"><mxPoint x="821" y="630" as="sourcePoint"/><mxPoint x="871" y="580" as="targetPoint"/></mxGeometry></mxCell><mxCell id="33" value="" style="endArrow=classic;html=1;rounded=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.263;entryY=0.896;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" source="23" target="52" edge="1"><mxGeometry width="50" height="50" relative="1" as="geometry"><mxPoint x="821" y="770" as="sourcePoint"/><mxPoint x="991" y="460" as="targetPoint"/><Array as="points"><mxPoint x="991" y="1030"/><mxPoint x="991" y="430"/></Array></mxGeometry></mxCell><mxCell id="34" value="componentWillUnmount" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1"><mxGeometry x="1081" y="290" width="160" height="60" as="geometry"/></mxCell><mxCell id="36" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="34" edge="1"><mxGeometry width="50" height="50" relative="1" as="geometry"><mxPoint x="821" y="350" as="sourcePoint"/><mxPoint x="1161" y="450" as="targetPoint"/></mxGeometry></mxCell><mxCell id="2" value="componentWillMount" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1"><mxGeometry x="751" y="-50" width="120" height="60" as="geometry"/></mxCell><mxCell id="40" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" parent="1" source="20" target="2" edge="1"><mxGeometry width="50" height="50" relative="1" as="geometry"><mxPoint x="821" y="60" as="sourcePoint"/><mxPoint x="871" y="10" as="targetPoint"/></mxGeometry></mxCell><mxCell id="43" value="state改变" style="ellipse;whiteSpace=wrap;html=1;" parent="1" vertex="1"><mxGeometry x="751" y="440" width="120" height="80" as="geometry"/></mxCell><mxCell id="45" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="43" target="54" edge="1"><mxGeometry width="50" height="50" relative="1" as="geometry"><mxPoint x="1161" y="400" as="sourcePoint"/><mxPoint x="811" y="600" as="targetPoint"/></mxGeometry></mxCell><mxCell id="46" value="开始" style="ellipse;whiteSpace=wrap;html=1;" parent="1" vertex="1"><mxGeometry x="751" y="-270" width="120" height="80" as="geometry"/></mxCell><mxCell id="47" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" parent="1" source="46" target="20" edge="1"><mxGeometry width="50" height="50" relative="1" as="geometry"><mxPoint x="701" y="-170" as="sourcePoint"/><mxPoint x="751" y="-220" as="targetPoint"/></mxGeometry></mxCell><mxCell id="49" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" source="48" target="3" edge="1"><mxGeometry relative="1" as="geometry"/></mxCell><mxCell id="48" value="render" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1"><mxGeometry x="751" y="50" width="120" height="60" as="geometry"/></mxCell><mxCell id="50" value="父组件重新render()&lt;br&gt;props改变" style="ellipse;whiteSpace=wrap;html=1;" parent="1" vertex="1"><mxGeometry x="441" y="280" width="120" height="80" as="geometry"/></mxCell><mxCell id="51" value="" style="endArrow=none;dashed=1;html=1;rounded=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="50" edge="1"><mxGeometry width="50" height="50" relative="1" as="geometry"><mxPoint x="631" y="400" as="sourcePoint"/><mxPoint x="750.9999999999999" y="320" as="targetPoint"/></mxGeometry></mxCell><mxCell id="52" value="组件运行时" style="shape=offPageConnector;whiteSpace=wrap;html=1;direction=north;size=0.21428571428571347;" parent="1" vertex="1"><mxGeometry x="751" y="280" width="140" height="80" as="geometry"/></mxCell><mxCell id="54" value="shouldComponentUpdate" style="rhombus;whiteSpace=wrap;html=1;" parent="1" vertex="1"><mxGeometry x="703.5" y="600" width="215" height="100" as="geometry"/></mxCell><mxCell id="57" value="" style="endArrow=classic;html=1;rounded=0;" parent="1" edge="1"><mxGeometry width="50" height="50" relative="1" as="geometry"><mxPoint x="921" y="650" as="sourcePoint"/><mxPoint x="991" y="650" as="targetPoint"/></mxGeometry></mxCell><mxCell id="58" value="false" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1"><mxGeometry x="918.5" y="620" width="60" height="30" as="geometry"/></mxCell><mxCell id="60" value="true" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1"><mxGeometry x="811" y="700" width="60" height="30" as="geometry"/></mxCell><mxCell id="61" value="" style="endArrow=none;dashed=1;html=1;rounded=0;exitX=0.5;exitY=0;exitDx=0;exitDy=0;" parent="1" source="43" edge="1"><mxGeometry width="50" height="50" relative="1" as="geometry"><mxPoint x="1091" y="390" as="sourcePoint"/><mxPoint x="811" y="360" as="targetPoint"/></mxGeometry></mxCell><mxCell id="62" value="结束" style="ellipse;whiteSpace=wrap;html=1;" parent="1" vertex="1"><mxGeometry x="1101" y="450" width="120" height="80" as="geometry"/></mxCell></root></mxGraphModel></diagram></mxfile>