「Reactのコンポーネント周りの用語を整理する」をシークエンス図で整理する - https://blog.ojisan.io/react-component-words

plantuml.svg

react-component-words.uml

@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