React设计理念
将设计好的UI划分为组件层级
依据单一功能原则判断组件范围。
UI与数据模型数据同构,一一对应。
用React创建静态版本
将渲染UI与添加交互这两个过程分开。静态版本就是一个不包含交互功能的UI,需要编写较多代码而无需考虑组件间的交互细节。
建议:
自下而上地构建应用,从最基本的组件开始编写。
只需要用到
porps
而不应该使用state
。只需要提供
render()
方法用于渲染。
确定UI state的最小且完整表示
设计理念: DRY(Don’t Repeat Yourself)
考虑每个组件中的所有数据,逐个检查数据是否属于state:
- 该数据是否是由父组件通过 props 传递而来的?如果是,那它应该不是 state。
- 该数据是否随时间的推移而保持不变?如果是,那它应该也不是 state。
- 你能否根据其他 state 或 props 计算出该数据的值?如果是,那它也不是 state。
确定state的放置位置
对于应用中的每一个state:
- 找到根据这个 state 进行渲染的所有组件。
- 找到他们的共同所有者(common owner)组件(在组件层级上高于所有需要该 state 的组件)。
- 该共同所有者组件或者比它层级更高的组件应该拥有该 state。
- 如果你找不到一个合适的位置来存放该 state,就可以直接创建一个新的组件来存放该 state,并将这一新组件置于高于共同所有者组件层级的位置。
至此,完成了从上而下的数据流,此时state的值有顶层组件控制,用户对底层组件的操作无法改变其值。
添加反向数据流
因为用户的操作是对于底层的组件进行的,我们需要让数据反向传递:处于较低层级的表单组件更新较高层级组件的state。
这里涉及到onChange
事件、回调函数、setState()
。
- 本文标题:React设计理念
- 本文作者:徐徐
- 创建时间:2020-10-08 10:33:55
- 本文链接:https://machacroissant.github.io/2020/10/08/react-way-of-thinking/
- 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
评论