Last active
September 21, 2020 15:54
-
-
Save nabinno/9b681ac90bfc6e9d3ea7433332ec42b1 to your computer and use it in GitHub Desktop.
「Reactのコンポーネント周りの用語を整理する」をシークエンス図で整理する - https://blog.ojisan.io/react-component-words
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="639px" preserveAspectRatio="none" style="width:677px;height:639px;background:#EEEEEE;" version="1.1" viewBox="0 0 677 639" width="677px" zoomAndPan="magnify"><defs><filter height="300%" id="f7gai01hw9ycl" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"/><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/></filter></defs><g><!--MD5=[21c4f067ea39b24444517ddbeba0b8e4] | |
| entity RT--><ellipse cx="188.6649" cy="18" fill="#F8F8F8" filter="url(#f7gai01hw9ycl)" rx="8" ry="8" style="stroke: #383838; stroke-width: 2.0;"/><path d="M188.6649,26 L188.6649,53 M175.6649,34 L201.6649,34 M188.6649,53 L175.6649,68 M188.6649,53 L201.6649,68 " fill="none" filter="url(#f7gai01hw9ycl)" style="stroke: #383838; stroke-width: 2.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="70" x="153.6649" y="87.9951">ReactText</text><!--MD5=[3620b8db962a0c9e2b118e4ffaea039f] | |
| entity RC--><ellipse cx="295.6649" cy="18" fill="#F8F8F8" filter="url(#f7gai01hw9ycl)" rx="8" ry="8" style="stroke: #383838; stroke-width: 2.0;"/><path d="M295.6649,26 L295.6649,53 M282.6649,34 L308.6649,34 M295.6649,53 L282.6649,68 M295.6649,53 L308.6649,68 " fill="none" filter="url(#f7gai01hw9ycl)" style="stroke: #383838; stroke-width: 2.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="74" x="258.6649" y="87.9951">ReactChild</text><!--MD5=[1036529524e6b0067830f5701215fb26] | |
| entity RN--><ellipse cx="406.6649" cy="18" fill="#F8F8F8" filter="url(#f7gai01hw9ycl)" rx="8" ry="8" style="stroke: #383838; stroke-width: 2.0;"/><path d="M406.6649,26 L406.6649,53 M393.6649,34 L419.6649,34 M406.6649,53 L393.6649,68 M406.6649,53 L419.6649,68 " fill="none" filter="url(#f7gai01hw9ycl)" style="stroke: #383838; stroke-width: 2.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="77" x="368.1649" y="87.9951">ReactNode</text><!--MD5=[11e5abc0296d2a9544c49e35636d4c40] | |
| entity RE--><ellipse cx="145.6649" cy="413.5" fill="#F8F8F8" filter="url(#f7gai01hw9ycl)" rx="8" ry="8" style="stroke: #383838; stroke-width: 2.0;"/><path d="M145.6649,421.5 L145.6649,448.5 M132.6649,429.5 L158.6649,429.5 M145.6649,448.5 L132.6649,463.5 M145.6649,448.5 L158.6649,463.5 " fill="none" filter="url(#f7gai01hw9ycl)" style="stroke: #383838; stroke-width: 2.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="97" x="97.1649" y="483.4951">ReactElement</text><!--MD5=[468fda8435dc56d2e25f98895701387c] | |
| entity EJC--><ellipse cx="279.6649" cy="162" fill="#F8F8F8" filter="url(#f7gai01hw9ycl)" rx="8" ry="8" style="stroke: #383838; stroke-width: 2.0;"/><path d="M279.6649,170 L279.6649,197 M266.6649,178 L292.6649,178 M279.6649,197 L266.6649,212 M279.6649,197 L292.6649,212 " fill="none" filter="url(#f7gai01hw9ycl)" style="stroke: #383838; stroke-width: 2.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="21" x="238.6649" y="231.9951">JSX</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="57" x="238.6649" y="248.292">Element</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="82" x="238.6649" y="264.5889">Constructor</text><!--MD5=[930bb0f56598c1c199d26d016bb2101a] | |
| entity EJ--><ellipse cx="349.6649" cy="405" fill="#F8F8F8" filter="url(#f7gai01hw9ycl)" rx="8" ry="8" style="stroke: #383838; stroke-width: 2.0;"/><path d="M349.6649,413 L349.6649,440 M336.6649,421 L362.6649,421 M349.6649,440 L336.6649,455 M349.6649,440 L362.6649,455 " fill="none" filter="url(#f7gai01hw9ycl)" style="stroke: #383838; stroke-width: 2.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="25" x="321.1649" y="474.9951">JSX.</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="57" x="321.1649" y="491.292">Element</text><!--MD5=[7e8e540a7f9dcdc910b68bd9bbec6bf8] | |
| entity EH--><ellipse cx="559.6649" cy="389" fill="#F8F8F8" filter="url(#f7gai01hw9ycl)" rx="8" ry="8" style="stroke: #383838; stroke-width: 2.0;"/><path d="M559.6649,397 L559.6649,424 M546.6649,405 L572.6649,405 M559.6649,424 L546.6649,439 M559.6649,424 L572.6649,439 " fill="none" filter="url(#f7gai01hw9ycl)" style="stroke: #383838; stroke-width: 2.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="57" x="531.1649" y="458.9951">Detailed</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="40" x="531.1649" y="475.292">React</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="38" x="531.1649" y="491.5889">HTML</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="57" x="531.1649" y="507.8857">Element</text><!--MD5=[39389913e5f82dbd5d7b1801f5ae4f32] | |
| entity ED--><ellipse cx="257.6649" cy="405" fill="#F8F8F8" filter="url(#f7gai01hw9ycl)" rx="8" ry="8" style="stroke: #383838; stroke-width: 2.0;"/><path d="M257.6649,413 L257.6649,440 M244.6649,421 L270.6649,421 M257.6649,440 L244.6649,455 M257.6649,440 L270.6649,455 " fill="none" filter="url(#f7gai01hw9ycl)" style="stroke: #383838; stroke-width: 2.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="34" x="229.1649" y="474.9951">DOM</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="57" x="229.1649" y="491.292">Element</text><!--MD5=[16fab723be418f7eaf2ea4bd895a8e51] | |
| entity C--><ellipse cx="454.6649" cy="413.5" fill="#F8F8F8" filter="url(#f7gai01hw9ycl)" rx="8" ry="8" style="stroke: #383838; stroke-width: 2.0;"/><path d="M454.6649,421.5 L454.6649,448.5 M441.6649,429.5 L467.6649,429.5 M454.6649,448.5 L441.6649,463.5 M454.6649,448.5 L467.6649,463.5 " fill="none" filter="url(#f7gai01hw9ycl)" style="stroke: #383838; stroke-width: 2.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="82" x="413.6649" y="483.4951">Component</text><!--MD5=[def1ebe1b81388e86d861dee1613fad9] | |
| entity CF--><ellipse cx="144.6649" cy="170" fill="#F8F8F8" filter="url(#f7gai01hw9ycl)" rx="8" ry="8" style="stroke: #383838; stroke-width: 2.0;"/><path d="M144.6649,178 L144.6649,205 M131.6649,186 L157.6649,186 M144.6649,205 L131.6649,220 M144.6649,205 L157.6649,220 " fill="none" filter="url(#f7gai01hw9ycl)" style="stroke: #383838; stroke-width: 2.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="60" x="103.6649" y="239.9951">Function</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="82" x="103.6649" y="256.292">Component</text><!--MD5=[8ad42e69c823d91e931492f14bc2a1bb] | |
| entity S--><ellipse cx="42.6649" cy="413.5" fill="#F8F8F8" filter="url(#f7gai01hw9ycl)" rx="8" ry="8" style="stroke: #383838; stroke-width: 2.0;"/><path d="M42.6649,421.5 L42.6649,448.5 M29.6649,429.5 L55.6649,429.5 M42.6649,448.5 L29.6649,463.5 M42.6649,448.5 L55.6649,463.5 " fill="none" filter="url(#f7gai01hw9ycl)" style="stroke: #383838; stroke-width: 2.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="39" x="23.1649" y="483.4951">string</text><path d="M540.1649,579.5 L540.1649,619.7656 A0,0 0 0 0 540.1649,619.7656 L665.1649,619.7656 A0,0 0 0 0 665.1649,619.7656 L665.1649,589.5 L655.1649,579.5 L601.0489,579.5 L578.1503,511.4185 L593.0489,579.5 L540.1649,579.5 A0,0 0 0 0 540.1649,579.5 " fill="#ECECEC" filter="url(#f7gai01hw9ycl)" style="stroke: #383838; stroke-width: 1.0;"/><path d="M655.1649,579.5 L655.1649,589.5 L665.1649,589.5 L655.1649,579.5 " fill="#ECECEC" style="stroke: #383838; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="104" x="546.1649" y="596.5669">createElement()</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="39" x="546.1649" y="611.6997">の戻り</text><path d="M252.1649,579.5 L252.1649,619.7656 A0,0 0 0 0 252.1649,619.7656 L369.1649,619.7656 A0,0 0 0 0 369.1649,619.7656 L369.1649,589.5 L359.1649,579.5 L319.7954,579.5 L337.0027,495.1617 L311.7954,579.5 L252.1649,579.5 A0,0 0 0 0 252.1649,579.5 " fill="#ECECEC" filter="url(#f7gai01hw9ycl)" style="stroke: #383838; stroke-width: 1.0;"/><path d="M359.1649,579.5 L359.1649,589.5 L369.1649,589.5 L359.1649,579.5 " fill="#ECECEC" style="stroke: #383838; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="96" x="258.1649" y="596.5669">{()=> <div/>}</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="39" x="258.1649" y="611.6997">の戻り</text><path d="M404.1649,572 L404.1649,627.3984 A0,0 0 0 0 404.1649,627.3984 L505.1649,627.3984 A0,0 0 0 0 505.1649,627.3984 L505.1649,582 L495.1649,572 L458.6649,572 L454.6649,486.8099 L450.6649,572 L404.1649,572 A0,0 0 0 0 404.1649,572 " fill="#ECECEC" filter="url(#f7gai01hw9ycl)" style="stroke: #383838; stroke-width: 1.0;"/><path d="M495.1649,572 L495.1649,582 L505.1649,582 L495.1649,572 " fill="#ECECEC" style="stroke: #383838; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="67" x="410.1649" y="589.0669">+ render()</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="58" x="410.1649" y="604.1997">+ state()</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="80" x="410.1649" y="619.3325">+ setState()</text><!--MD5=[b2ccd986f065d955cd881947461038f7] | |
| link RT to RC--><path d="M223.7742,49.5 C228.6711,49.5 233.5679,49.5 238.4648,49.5 " fill="none" id="RT->RC" style="stroke: #383838; stroke-width: 1.0;"/><polygon fill="none" points="238.5963,42.4999,258.5963,49.5,238.5962,56.4999,238.5963,42.4999" style="stroke: #383838; stroke-width: 1.0;"/><!--MD5=[6660ade60546d0f21ed85f3f0a48324f] | |
| link RC to RN--><path d="M332.9539,49.5 C337.9853,49.5 343.0166,49.5 348.0479,49.5 " fill="none" id="RC->RN" style="stroke: #383838; stroke-width: 1.0;"/><polygon fill="none" points="348.0818,42.4999,368.0818,49.5,348.0818,56.4999,348.0818,42.4999" style="stroke: #383838; stroke-width: 1.0;"/><!--MD5=[fbc49e0da336f6cb53604e42c723dafb] | |
| link RN to CF--><path d="M367.8677,79.7509 C362.2152,83.7135 356.3742,87.5797 350.6649,91 C296.2602,123.5922 275.9418,119.1955 221.6649,152 C211.1372,158.3628 200.3075,165.853 190.217,173.2987 " fill="none" id="RN->CF" style="stroke: #383838; stroke-width: 1.0;"/><polygon fill="#383838" points="185.9408,176.4836,195.5481,174.3158,189.9508,173.497,190.7696,167.8997,185.9408,176.4836" style="stroke: #383838; stroke-width: 1.0;"/><!--MD5=[13db3abe8e8a21ee0ed42211f80ee08c] | |
| link CF to RE--><path d="M103.6165,225.3111 C72.977,239.1713 33.3165,262.8511 14.6649,298 C4.0401,318.0223 2.4486,329.9071 14.6649,349 C31.813,375.8009 53.5658,360.8015 79.6649,379 C88.3463,385.0535 96.894,392.3141 104.811,399.7718 " fill="none" id="CF->RE" style="stroke: #383838; stroke-width: 1.0;"/><polygon fill="#383838" points="108.6447,403.4443,104.9126,394.33,105.0341,399.9855,99.3785,400.107,108.6447,403.4443" style="stroke: #383838; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="42" x="58.6649" y="313.0669">型推論</text><line style="stroke: #000000; stroke-width: 1.0;" x1="58.6649" x2="100.6649" y1="301" y2="301"/><line style="stroke: #000000; stroke-width: 1.0;" x1="58.6649" x2="100.6649" y1="316.1328" y2="316.1328"/><line style="stroke: #000000; stroke-width: 1.0;" x1="58.6649" x2="58.6649" y1="301" y2="316.1328"/><line style="stroke: #000000; stroke-width: 1.0;" x1="100.6649" x2="100.6649" y1="301" y2="316.1328"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="127" x="16.1649" y="330.1997">子をpropsに必ずもち</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="128" x="15.6649" y="345.3325">ReactElementを返す</text><!--MD5=[c3438e6d809e83aff065c385b3141b26] | |
| link RN to EH--><path d="M422.7494,91.0779 C448.7394,158.2614 500.2726,291.4728 532.1718,373.9314 " fill="none" id="RN->EH" style="stroke: #383838; stroke-width: 1.0;"/><polygon fill="#383838" points="534.0544,378.7978,534.5378,368.9608,532.2504,374.1346,527.0767,371.8472,534.0544,378.7978" style="stroke: #383838; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="119" x="491.6649" y="207.0669">createElement()</text><line style="stroke: #000000; stroke-width: 1.0;" x1="491.6649" x2="610.6649" y1="195" y2="195"/><line style="stroke: #000000; stroke-width: 1.0;" x1="491.6649" x2="610.6649" y1="210.1328" y2="210.1328"/><line style="stroke: #000000; stroke-width: 1.0;" x1="491.6649" x2="491.6649" y1="195" y2="210.1328"/><line style="stroke: #000000; stroke-width: 1.0;" x1="610.6649" x2="610.6649" y1="195" y2="210.1328"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="109" x="496.6649" y="224.1997">ReactNodeが引数</text><!--MD5=[25287e3fc69eb9db36b31e9f37c9489f] | |
| link RE to ED--><path d="M194.2274,445 C199.106,445 203.9846,445 208.8632,445 " fill="none" id="RE->ED" style="stroke: #383838; stroke-width: 1.0;"/><polygon fill="none" points="208.9198,437.9999,228.9197,445,208.9197,451.9999,208.9198,437.9999" style="stroke: #383838; stroke-width: 1.0;"/><!--MD5=[395e744ae12400db4eda0956f856edb7] | |
| link RE to EJ--><path d="M150.8927,403.3481 C156.6198,376.8008 168.6046,344.3333 193.6649,327.5 C217.2769,311.6395 299.3418,309.8714 321.6649,327.5 C336.2713,339.0347 344.1153,356.6941 348.1303,374.8451 " fill="none" id="RE->EJ" style="stroke: #383838; stroke-width: 1.0;"/><polygon fill="none" points="355.087,374.033,351.1581,394.8552,341.2446,376.1276,355.087,374.033" style="stroke: #383838; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="126" x="194.6649" y="320.5669">HTMLへの描画として</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="101" x="207.1649" y="335.6997">stringが手に入る</text><!--MD5=[7c9a3a1b2bf3cbef05516f72a4fc35a1] | |
| link S to RE--><path d="M62.3797,445 C67.1394,445 71.8991,445 76.6588,445 " fill="none" id="S->RE" style="stroke: #383838; stroke-width: 1.0;"/><polygon fill="none" points="76.865,437.9999,96.865,445,76.8649,451.9999,76.865,437.9999" style="stroke: #383838; stroke-width: 1.0;"/><!--MD5=[545c3ef947c828bdc873fe243bbc6ce3] | |
| link EJC to RE--><path d="M223.9498,258.3214 C212.4147,270.3784 201.1947,283.9165 192.6649,298 C176.8257,324.1519 165.7687,356.197 158.3775,383.6855 " fill="none" id="EJC-RE" style="stroke: #383838; stroke-width: 1.0;"/><polygon fill="none" points="165.1456,385.4755,153.5247,403.1943,151.5597,382.096,165.1456,385.4755" style="stroke: #383838; stroke-width: 1.0;"/><polygon fill="none" points="219.3984,252.9782,238.5505,243.9117,229.2325,262.9427,219.3984,252.9782" style="stroke: #383838; stroke-width: 1.0;"/><!--MD5=[ff3011716991fc6c2f549854872e4df4] | |
| link ED to EH--><path d="M270.3151,394.8458 C279.7306,368.7127 295.5142,339.0367 321.1649,323.5 C387.6908,283.205 429.639,283.205 496.1649,323.5 C510.8701,332.407 522.3324,345.961 531.2111,360.8305 " fill="none" id="ED->EH" style="stroke: #383838; stroke-width: 1.0;"/><polygon fill="none" points="537.4809,357.7151,540.4866,378.6905,525.0565,364.1677,537.4809,357.7151" style="stroke: #383838; stroke-width: 1.0;"/><!--MD5=[4b4df8e0be785ba10dfe2d07f45489d3] | |
| link EJC to C--><path d="M320.6946,265.0971 C351.1062,305.9356 392.0685,360.9421 420.662,399.339 " fill="none" id="EJC->C" style="stroke: #383838; stroke-width: 1.0;"/><polygon fill="#383838" points="423.7372,403.4686,421.5701,393.8611,420.7509,399.4583,415.1537,398.6391,423.7372,403.4686" style="stroke: #383838; stroke-width: 1.0;"/><!--MD5=[8083cc3212b37e15ef1e00a40f5ace05] | |
| @startuml | |
| skinparam monochrome true | |
| skinparam backgroundColor #EEEEEE | |
| actor ReactText as RT | |
| actor ReactChild as RC | |
| actor ReactNode as RN | |
| actor ReactElement as RE | |
| actor "JSX\nElement\nConstructor" as EJC | |
| actor "JSX.\nElement" as EJ | |
| actor "Detailed\nReact\nHTML\nElement" as EH | |
| actor "DOM\nElement" as ED | |
| actor Component as C | |
| actor "Function\nComponent" as CF | |
| actor string as S | |
| RT -|> RC | |
| RC -|> RN | |
| RN - -> CF | |
| CF - -> RE: |型推論|\n子をpropsに必ずもち\nReactElementを返す | |
| RN - -> EH: |createElement()|\nReactNodeが引数 | |
| note bottom: createElement()\nの戻り | |
| RE -|> ED | |
| RE -|> EJ: HTMLへの描画として\nstringが手に入る | |
| note bottom: {()=> <div/>}\nの戻り | |
| S -|> RE | |
| EJC <|- -|> RE | |
| ED -|> EH | |
| EJC - -> C | |
| note bottom: + render()\n+ state()\n+ setState() | |
| @enduml | |
| PlantUML version 1.2019.12(Sun Nov 03 10:24:54 UTC 2019) | |
| (GPL source distribution) | |
| Java Runtime: OpenJDK Runtime Environment | |
| JVM: OpenJDK 64-Bit Server VM | |
| Java Version: 1.8.0_232-heroku-b09 | |
| Operating System: Linux | |
| Default Encoding: UTF-8 | |
| Language: en | |
| Country: US | |
| --></g></svg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @startuml | |
| skinparam monochrome true | |
| skinparam backgroundColor #EEEEEE | |
| actor ReactText as RT | |
| actor ReactChild as RC | |
| actor ReactNode as RN | |
| actor ReactElement as RE | |
| actor "JSX\nElement\nConstructor" as EJC | |
| actor "JSX.\nElement" as EJ | |
| actor "Detailed\nReact\nHTML\nElement" as EH | |
| actor "DOM\nElement" as ED | |
| actor Component as C | |
| actor "Function\nComponent" as CF | |
| actor string as S | |
| RT -|> RC | |
| RC -|> RN | |
| RN --> CF | |
| CF --> RE: |型推論|\n子をpropsに必ずもち\nReactElementを返す | |
| RN --> EH: |createElement()|\nReactNodeが引数 | |
| note bottom: createElement()\nの戻り | |
| RE -|> ED | |
| RE -|> EJ: HTMLへの描画として\nstringが手に入る | |
| note bottom: {()=> <div/>}\nの戻り | |
| S -|> RE | |
| EJC <|--|> RE | |
| ED -|> EH | |
| EJC --> C | |
| note bottom: + render()\n+ state()\n+ setState() | |
| @enduml |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment