React 理念
-
静态界面:使用props进行单向数据传递,从顶向下进行数据传递,不需要使用state。
-
动态界面:使用props进行从上到下传递(repoID),state进行组件内部的数据产生和传递(comment)。简单界面使用从上到下的开发过程,复杂界面使用从下到上的开发流程。尽量减少state使用:确定state的使用位置,确定使用state的组件。
-
组件化会增加代码复用性(后期开发显著增加代码复用性,初期代码比较复杂)
开发流程
-
UI 设计:根据UI中不同图层,确定组件的相对位置;根据产品功能,根据后端传来的数据(默认是字典的JSON),确定组件的内容。基本上,一个组件做到实现一个单一的功能。如果一个组件可以实现很多功能(后期增加很多新的功能,需要拆分成独立功能的子组件)。
-
静态开发:不考虑用户交互的情况,直接静态页面进行开发(listComments),数据自顶向下进行传递。完成静态开发后,可以进行逐步测试,确保当前静态功能的实现(显示当前评论数量,显示当前已有评论,删除评论)。
-
动态开发:主要针对用户输入或者操作。用户在底组件中输入,从下层获取数据直接请求,或者使用父组件的函数统一进行请求。