在React.js中思考
React社区为如何以React方式思考以及构建大型,快速和可扩展的应用程序提供了指导。React已经达到了多个平台,并广泛使用了流行的JavaScriptUI接口库。
步骤1-创建一个简单的模拟服务
如果需要进行服务器调用并获取数据。我们可以创建一个模拟服务开始,并构建一个组件来获取和显示数据。
在这里,我们可以在组件中包含json的处理并评估预期结果。
步骤2-将功能分解为较小的组件
ThingReact的第一个建议是创建较小的可理解的盒子设计。这些框将代表不同组件之间的关联以及数据流的传递。
组件的制造应基于单一责任原则。这意味着单个组件应处理单个任务。
创建组件层次结构将使开发人员的工作更加轻松。
步骤3-如果可能的话,首先制作一个简单的静态版本
通过使用模拟服务和较小的组件,我们可以创建静态版本并在其上构建应用程序。
创建静态版本不应使用状态修改。它应与道具通过并仅渲染Ui一起玩。在React中保持数据流的一种方式使其变得简单且模块化
为了更清楚地说明道具和状态的区别和用例,应该非常了解。
步骤4-识别UI状态的最小表示
为了使应用程序具有交互性,状态应该能够从相关组件中触发。
确定所需的可变状态对于构建正确的应用程序是必要的。
第5步-确定国家应该居住的地方-
状态可以在多个子组件之间共享。提升状态可用于在多个组件之间进行通信。使用像Redux这样的状态管理库可以解决很多由状态引起的问题。
React强烈建议将数据流向组件的一种方式。
步骤6-如果需要,添加双向数据流-
表单处理中的受控组件是双向数据绑定的示例。