React.js 思考

React 社区提供了一个关于如何以 React 方式思考并构建大型、快速且可扩展应用程序的方向。React 已覆盖多个平台，并广泛用作流行的 JavaScript UI 界面库。

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

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

在这里，我们可以包含组件中 JSON 的处理以及预期结果的评估。

步骤 2 - 将功能分解成更小的组件

React 最先建议的是创建更小、更容易理解的盒子设计。这些盒子将表示不同组件之间的关联以及数据流的传递。

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

创建组件层次结构将使开发人员的任务更容易。

步骤 3 - 如果可能，从创建简单的静态版本开始

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

创建静态版本不应使用状态修改。它应该只处理 props 的传递和 UI 的渲染。保持 React 中单向数据流使其简单且模块化。

为了更清楚地说明 props 和 state 的区别和用例，应该很好地理解它们。

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

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

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

步骤 5 - 确定状态应该位于哪里 -

状态可以在多个子组件之间共享。提升状态可以用于实现多个组件之间的通信。使用 Redux 等状态管理库可以解决许多由状态引起的问题。

React 强烈建议将数据单向向下传递到组件。

步骤 6 - 根据需要添加双向数据流 -

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

更新于：2019年8月28日

521 次浏览

启动您的职业生涯

通过完成课程获得认证

开始学习
广告