React组件设计

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

1.像设计师一样思考

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

2.构建静态版本

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

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

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

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

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

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...