React 学习录

组件

组件:将UI切分成一些独立的、可复用的部分。

分割

关于组件的分割原则,仁者见仁,就像代码的对象和函数的设计一样。所以这里推荐的还是 单一职责 原则(单一功能原则)。一个好的组件分割应当是和其数据模型相对应(映射)的,也就是说组件能合理得表示数据模型的对应部分。

无论是界面、数据库设计和API设计应当都是以数据流为核心的。因为数据流连接的是各个业务。

构建顺序

对于组件的构建顺序,分为自顶而下和自底而上两种方案。自顶而下就是我们先设计(完成)顶层(最外层)的组件,然后逐层向内完成各个子组件。而自底而上就是我们先完成最底层(最小)的组件,然后一个个组合成较大组件。

官方推荐的是:在小的案例中,使用自顶而下的构建方式会容易一些。而在大型项目中,使用自底而上的构建方式会容易一些。

从官方推荐可以看出,自顶而上的构建方式是更适合新手操作,而自底而上对开发人员的要求则比较高。所以我建议新手在操作之前,可以对项目的设计图(原型图)进行组件的分割设计,提取公共组件。然后再自定而下地完成各层组件(当然最合理的还是先完成公共组件)。

这里有一点,React 推荐在构建的时候不用设计状态,只需要先完成静态的组件版本,这样在构建的时候能极大的减少开发人员的工作量。因为 State 只在交互的时候使用,即随时间变化的数据。由于这是静态版本的应用,你不需要使用它。

状态(state)设计原则

对于状态的设计,React也提供了几个合理的建议:

  1. 它是通过 props 从父级传来的吗?如果是,他可能不是 state
  2. 它随着时间推移不变吗?如果是,它可能不是 state
  3. 你能够根据组件中任何其他的 stateprops 把它计算出来吗?如果是,它不是 state

状态(state)位置

对于状态的存储位置,这又是一个仁者见仁的问题。每一个人设计出来的方式都是不一样的。由于 React 是单向数据流操作的,所以 React 推荐新人将状态存储在组件的最小公共组件上,这样方便其子组件能合理的获取并使用该状态。具体的操作如下:

  1. 确定每一个需要这个 state 来渲染的组件。
  2. 找到一个公共所有者组件(一个在层级上高于所有其他需要这个 state 的组件的组件)
  3. 这个公共所有者组件或另一个层级更高的组件应该拥有这个 state
  4. 如果你没有找到可以拥有这个 state 的组件,创建一个仅用来保存状态的组件并把它加入比这个公共所有者组件层级更高的地方。

数据流

React 的单向数据流是它的亮点之一吧,单向数据流保证了数据的可靠性,状态只能在指定的组件(存储的组件)中被修改,子组件则无法直接直接对状态进行操作,只能通过父组件传入的回调函数进行修改。

通过调用回调函数去修改父组件的状态又称反向数据流。

其他

  1. React 是函数式的,Vue 是MVVM模式。

MVVM模式中有时会遇到 View 层状态问题,那大都是 Model 和 ViewModel 设计不合理所造成的。而现在的 MVVM 框架 Vue.js 也同样借鉴了 Flux、Redux等。

资料

  1. React 理念
文章目录
  1. 组件
    1. 分割
    2. 构建顺序
    3. 状态(state)设计原则
    4. 状态(state)位置
  2. 数据流
  3. 其他
  4. 资料
|