构建React应用的原则

从原型(mock)开始

大概可以根据设计师画出的图层来划分组件

将会用户界面拆分为组件树

可以按照以下原则对用户界面进行拆分

  • 单一功能原则(即单一职责),指的是,理想状态下一个组件应该只做一件事,假如它功能逐渐变大就需要被拆分成更小的子组件

    这就好像我们不能只写一个万能的对象

  • 尝试把尽可能多的组件无状态化。这样做能隔离state,把它放到最合理的地方,也能减少冗余,同时易于解释程序运作过程

使用React,创建静态版本的应用

在简单的应用中,通常情况下从上(顶级组件开始)至下(最内部的组件)的方式更加简单;在大型的项目中,从下至上的方式更加简单,这样也可以在构建的同时写测试代码

识别出最小的(但是完整的)代表UI的state

可以使用以下三个问题来判断是否那个是属于state数据模型

  • 是否是从父级通过 props 传入的?如果是,可能不是 state 。
  • 是否会随着时间改变?如果不是,可能不是 state 。
  • 能根据组件中其它 state 数据或者 props 计算出来吗?如果是,就不是state

确认state的生命周期

对于应用中的每一个 state 数据:

  • 找出每一个基于那个 state 渲染界面的组件。
  • 找出共同的祖先组件(某个单个的组件,在组件树中位于需要这个 state 的所有组件的上面)。
  • 要么是共同的祖先组件,要么是另外一个在组件树中位于更高层级的组件应该拥有这个 state 。
  • 如果找不出拥有这个 state 数据模型的合适的组件,创建一个新的组件来维护这个 state ,然后添加到组件树中,层级位于所有共同拥有者组件的上面。

添加反向数据流

如果需要实现数据双向绑定则需要添加反向数据流,React提供了一个叫做ReactLink的插件来使其和双向数据绑定一样方便

你的欣赏是我最大的动力

Yanxiong Huang

My name is Yanxiong Huang. graduated from Nanyang middle school.Love Linux,familiar with Node.js,Docker,Serverless... and more Web technology.Contact Me:QQ 31356617;Email:huangaynxiong2013@gmail.com

guangzhou,china http://www.myfreax.com

乐在分享