React组件设计

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

1.像设计师一样思考

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

2.构建静态版本

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

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

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

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

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

code-review description

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值