React 理念与开发流程

React 理念

  1. 静态界面:使用props进行单向数据传递,从顶向下进行数据传递,不需要使用state。

  2. 动态界面:使用props进行从上到下传递(repoID),state进行组件内部的数据产生和传递(comment)。简单界面使用从上到下的开发过程,复杂界面使用从下到上的开发流程。尽量减少state使用:确定state的使用位置,确定使用state的组件。

  3. 组件化会增加代码复用性(后期开发显著增加代码复用性,初期代码比较复杂)

开发流程

  1. UI 设计:根据UI中不同图层,确定组件的相对位置;根据产品功能,根据后端传来的数据(默认是字典的JSON),确定组件的内容。基本上,一个组件做到实现一个单一的功能。如果一个组件可以实现很多功能(后期增加很多新的功能,需要拆分成独立功能的子组件)。

  2. 静态开发:不考虑用户交互的情况,直接静态页面进行开发(listComments),数据自顶向下进行传递。完成静态开发后,可以进行逐步测试,确保当前静态功能的实现(显示当前评论数量,显示当前已有评论,删除评论)。

  3. 动态开发:主要针对用户输入或者操作。用户在底组件中输入,从下层获取数据直接请求,或者使用父组件的函数统一进行请求。

猜你喜欢

转载自blog.csdn.net/weixin_41697143/article/details/84448049