React组件设计

前端之家收集整理的这篇文章主要介绍了React组件设计前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

1.像设计师一样思考

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

2.构建静态版本

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

3.确定最小的可变状态(state)

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

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

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

原文链接:https://www.f2er.com/react/305006.html

猜你在找的React相关文章