React组件设计

根据原文实例，概括记录一下，便于回忆；

1.像设计师一样思考

已知“低保真原型和JSON数据结构”；
通过对比、重复、亲密性原则进行组件的划分，定义组件并命名；
然后划分组件层次（并列、包含）；

2.构建静态版本

利用数据模型渲染一个没有交互的静态版本；
可以自上而下或者自下而上的构建静态组件；
要求组件只使用render()方法，且只能用props传递数据；

3.确定最小的可变状态（state）

如何确定最小的state？
——列出应用所有的数据块；
——逐一对以上数据块思考三个问题：
①是通过props从父级传递过来么？如果是，则可能不是state。
②随时间变化么？如果不变，则可能不是state。
//说明可以通过props传递；
③能否基于其它state或者props计算出？如果可以，则不是state。

4.定义getInitialState()所在的组件

React 总是在组件层级中单向数据流动的；
①找出可以修改或者拥有该state的所有components；
②确定一个层级高于①中的所有组件单一组件；
③如果找不到该单一组件，则创建该组件；
//仅仅为了定义该state；

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!