在React.js中思考

React社区为如何以React方式思考以及构建大型,快速和可扩展的应用程序提供了指导。React已经达到了多个平台,并广泛使用了流行的JavaScript UI接口库。

步骤1-创建一个简单的模拟服务

如果需要进行服务器调用并获取数据。我们可以创建一个模拟服务开始,并构建一个组件来获取和显示数据。

在这里,我们可以在组件中包含json的处理并评估预期结果。

步骤2-将功能分解为较小的组件

Thing React的第一个建议是创建较小的可理解的盒子设计。这些框将代表不同组件之间的关联以及数据流的传递。

组件的制造应基于单一责任原则。这意味着单个组件应处理单个任务。

创建组件层次结构将使开发人员的工作更加轻松。

步骤3-如果可能的话,首先制作一个简单的静态版本

通过使用模拟服务和较小的组件,我们可以创建静态版本并在其上构建应用程序。

创建静态版本不应使用状态修改。它应与道具通过并仅渲染Ui一起玩。在React中保持数据流的一种方式使其变得简单且模块化

为了更清楚地说明道具和状态的区别和用例,应该非常了解。

步骤4-识别UI状态的最小表示

为了使应用程序具有交互性,状态应该能够从相关组件中触发。

确定所需的可变状态对于构建正确的应用程序是必要的。

第5步-确定国家应该居住的地方-

状态可以在多个子组件之间共享。提升状态可用于在多个组件之间进行通信。使用像Redux这样的状态管理库可以解决很多由状态引起的问题。

React强烈建议将数据流向组件的一种方式。

步骤6-如果需要,添加双向数据流-

表单处理中的受控组件是双向数据绑定的示例。