结合过去的经验,还有 react 官方文档的开发说明,可见
-
先用已有的数据来渲染一个不包含交互功能的 UI。最好将渲染 UI 和添加交互两个过程分开。
理由:编写一个应用的静态版本的时候,往往需要编写大量的代码,而且不需要考虑太多的交互细节。添加交互功能的时候往往要考虑大量的细节,而不需要编写大量的代码。所以,将这两个过程分开更合适一些。自己在过去的开发过程中也有一定的体会。
-
在构建应用程序的静态版本的时候,我们需要创建一些会重用其他组件的组件(组合和继承),然后通过 props传入我们所需要的数据。所以,即使很熟悉 state,在静态阶段也不要使用 state 来构建应用程序的静态版本。state 用于动态交互数据。
-
应用比较简单的时候,自上而下的开发,比如从整体 table 到局部 list 的 listitem。应用比较复杂的时候,自下而上的开发,比如从局部到整体。。当你的应用比较简单的时候,自下而上。当你的应用比较复杂的时候,自上而下。
-
记住 DRY 原则,don’t repeat yourself
流程:
-
将设计好的 UI 划分为组件层级
-
用 React 创建一个静态版本
-
确定 UI state 的最小(且完整)表示
-
确定 state 放置的位置
-
添加反向数据流