构建 React 通用博客应用程序：实现 Flux

[account_disabled]

在本系列的第一部分中，我们开始深入研究 React 的世界，看看如何使用它与 Node.js 一起构建 React 通用博客应用程序。 Pause Next Unmute Current Time  Duration 2:00 Fullscreen 在第二部分也是最后一部分中，我们将通过学习如何添加和编辑内容将我们的博客提升到一个新的水平。我们还将深入了解如何使用 React 组织概念和Flux 模式轻松扩展我们的 React 通用博客应用程序。 构建 React 通用博客应用程序：实现 Flux 为我分解它 随着我们向博客添加更多页面和内容，我们的routes.js文件很快就会变大。由于 React 的指导原则之一是将事物分解为更小的、可管理的部分，因此让我们将路由分成不同的文件。 打开routes.js文件并编辑它，使其包含以下代码我们在博客中添加了一些不同的页面，并routes.js通过将页面分成单独的组件来显着减小文件的大小。




此外，请注意，我们添加了一个商店，包括AppStore，这对于扩展 React 应用程序的后续步骤非常重要。 商店：唯一的真相来源 在 Flux 模式中，Store 是非常重要的一部分，因为它充当数据管理的单一事实来源。这是理解 React 开发如何工作的关键概念，也 WhatsApp 号码数据 是 React 最受欢迎的好处之一。这一学科的优点在于，在应用程序的任何给定状态下，我们都可以访问 的AppStore数据并确切地知道其中发生了什么。如果您想构建数据驱动的 React 应用程序，需要记住一些关键事项： 我们从不直接操作 DOM。 我们的 UI 对数据和商店中的实时数据做出回应 如果我们需要更改 UI，我们可以前往商店，商店将为我们的应用程序创建新的数据状态。 新数据被馈送到较高级别的组件，然后props根据收到的新数据通过组合新的 UI 传递到较低级别的组件。 有了这四点，我们基本上就具备了单向数据流应用的基础。





这也意味着，在我们应用程序的任何状态下，我们都可以console.log(AppStore.data)，并且如果我们正确构建我们的应用程序，我们将确切地知道我们可以期望看到什么。您还将体验到这对于调试来说是多么强大。 现在让我们创建一个名为 的存储文件夹stores。在其中创建一个名为AppStore.js以下内​​容的文件 您可以看到我们附加了一个事件发射器。这允许我们编辑商店中的数据，然后使用AppStore.emitChange(). 这是一个功能强大的工具，只能在我们的应用程序中的某些地方使用。否则很难理解在哪里AppStore数据在哪里被改变，这让我们想到了下一点…… React 组件：更高级别和更低级别 Dan Abramov 写了一篇关于智能组件和哑组件概念的精彩文章。这个想法是将数据更改操作保留在较高级别（智能）组件中，而较低级别（愚蠢）组件则获取通过 props 提供的数据并根据该数据渲染 UI。