说明
采用函数形式对React组件和组件间的关系进行描述
内容
每个组件用一个函数描述。
函数的输入是props(data),imsg
函数的输出是props(function),omsg
props和state构成组件的呈现
state只在分解组件时用到
根据以上说明，组件c可以表达为
c=f(props.data,props.function,imsg,omsg)
组件样例
组件名称: Hello Component
props.data:
name
props.function:
onClick()
msg:
(click,count)
简化组件样例
Hello Component
-->
name
==>
(info,info)
<--
onClick()
<==
(click,count)
说明：
简化描述中：用右箭头-->和==>表示输入，用左箭头<--和<==表示输出。
其中
瘦右箭头 -->表示通过props中传递数据来输入
胖左箭头 ==>表示通过全局消息系统来输入
瘦左箭头 <--表示通过props中传递函数来输出
胖左箭头 <==表示通过全局消息系统来输出
极简组件表达
Hello(name) //组件名(属性名)
组件分解样例
一个复杂的组件，可能分解为多个子组件。分解时有可能传递本组件的props,state或this.function给子组件。大多数情况下来自state
假设父组件为A，子组件为B和C
分解时只描述相邻上下级之间的关系
A -- name -->B
A -- age -->C
以上表示将A的state name传递给B的props name
如果A的state和和B的props中对应变量命名不同，可以用以下表示
A -- son:name -->B //son是A的state,name是B的props
A -- p.son:name -->B //son是A的props,name是B的props
以上语法兼容了https://github.com/knsv/mermaid
可以绘制出flowchart
diagram.png