React设计理念
徐徐 抱歉选手

将设计好的UI划分为组件层级

依据单一功能原则判断组件范围。

UI与数据模型数据同构,一一对应。

用React创建静态版本

渲染UI添加交互这两个过程分开。静态版本就是一个不包含交互功能的UI,需要编写较多代码而无需考虑组件间的交互细节。

建议:

  1. 自下而上地构建应用,从最基本的组件开始编写。

  2. 只需要用到porps而不应该使用state

  3. 只需要提供render()方法用于渲染。

确定UI state的最小且完整表示

设计理念: DRY(Don’t Repeat Yourself)

考虑每个组件中的所有数据,逐个检查数据是否属于state:

  1. 该数据是否是由父组件通过 props 传递而来的?如果是,那它应该不是 state。
  2. 该数据是否随时间的推移而保持不变?如果是,那它应该也不是 state。
  3. 你能否根据其他 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 许可协议。转载请注明出处!
 评论