在React中构建数据驱动的应用程序

在数据驱动的应用程序中，应用程序中处理的数据是由应用程序的流程所决定的。数据集的输入可能会改变你的应用行为。这意味着数据会影响你的决策。

本文将重点讨论React中的数据驱动应用程序。

如果每次我们的应用数据发生变化时，都要改革我们的应用组件，那是不合适的。我们需要更多的数据来拥有一个可靠的数据驱动的应用程序，以吸引各种各样的商业用户。

前提条件

读者需要以下条件才能跟上。

一个合适的IDE，如VS Code、IntelliJ或NetBeans。
对React的基本了解。
对Relay框架的基本了解。

主要收获

在这篇文章中，读者将学到以下内容。

什么是数据驱动应用程序。
数据驱动的组件。
如何构建数据驱动的应用程序。

用于构建数据驱动应用程序的React框架的例子

Relay - Relay帮助管理数据的获取，你的应用程序中的组件数量并不重要。
React-admin - 这是一个用于构建数据驱动应用程序的反应框架。React-admin组件完全根据从API获取的记录来猜测应用的格式。React-admin需要一个数据提供者函数来翻译数据。
数据驱动的表单--数据驱动的表单是一个开源的react库，它允许你在数据库中存储复杂的表单，这样你就可以在众多开发者环境中重复使用它们。

如何在React中构建数据驱动的组件

在本节中，我们将展示如何构建数据驱动的应用程序头。React允许我们在与HTML相同的语法中向一个元素发送数据，使用属性或属性的因素。

在构建我们的组件时，我们将使用静态JJSX模板。我们将在HTML代码中加入我们的React代码。

我们将首先添加以下HTML代码。

   <html>
  <head>
    <meta charset="utf-8" />
    <title>Hello</title>

然后我们将使用下面的代码添加React库cdn.js ，后面是babel 。

<!-- Script tags including React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

现在让我们添加一个字体和图标工具包，将字体awesome链接到我们的代码中，然后添加一个<body> ，它将包含类demo ，类notificationsFrame 和一个id-app 。

然后是一个<script> 标签，如下图所示。

   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
   rel="stylesheet"type="text/css" />
    </head>
    <body>
    <div class="demo">
      <div class="notificationsFrame">
        <div id="app"></div>
      </div>
    </div>
    <script type="text/babel">

现在让我们使用这两个组件建立我们的应用程序的头。

头部组件
应用组件

头部组件

要创建该组件，请添加以下代码。

   class Header extends React.Component {
        render() {
          return (
            <div className="header">
         <span className="title">Profile</span>
 </div>
          );
        }
      }

应用组件

我们将使用Header ，把它放在App 组件中，如下所示。

      class App extends React.Component {
        render() {
          return (
            <div>
            <Header  title="Profile" />
            </div>
          );
        }

走向数据驱动

现在，让我们在我们的应用程序标题中添加一些功能，在我们的标题组件中添加下面的代码，在className 标题的下面。

      <div className="menukey"></div>
      <div className="dashTop"></div>
      <div className="dashBottom"></div>
      <div className="circle"></div>

让我们在我们的组件中添加数据。当我们看我们的头像时，头像组件只有简介作为我们的标题。

这意味着我们不能将标题设置为其他东西。我们可以在页面的不同元素/组件中重复使用它，profile的标题并不适合每一种用途。随后，我们可以告诉react我们想把标题设置为其他的东西，如设置、聊天等。

我们可以通过使用下面的代码把它作为一个道具传递给我们的<span className="title">Profile</span> 。

      <span className="title">{this.props.title}</span>

这允许我们把我们的title 作为一个属性传入<Header/> 。该属性将标题调用为一个字符串，就像这样<Header title="Profile" /> ，这使得我们可以根据自己的意愿多次调用我们的标题组件。

因此，这将允许用户根据他/她想要执行的任务，选择他/她喜欢的标题。

现在让我们在我们的应用程序标题中添加一个搜索栏和搜索图标，使其更具互动性。

      <input type="text"
        className="search"
       placeholder="Search .../>
      <div className="fa fa-search searchIcon"></div>
      </div>

Header 现在通过在我们的div 内添加以下代码，三次调用我们的App 组件，如下所示。

    <div>
    <Header  title="Profile" />
    <Header title="Settings" />
    <Header title="Chat" />
    </div>

不要忘记添加关闭标签，并调用react.Dom ，将你的应用程序放在页面上。

   ReactDOM.render(<App />,
   document.querySelector("#app"));
    </script>
   </body>
   </html>

这导致了三个Header组件的安装。

现在我们能够重用带有动态标题属性的标题组件。

一些数据驱动的React GitHub项目的例子，你可以练习一下

[Relay-starter-example]完全记录（如果你是一个初学者，你可以使用这个项目开始练习，因为它很简单。它将帮助你开始使用Relay框架。该项目包含较少的模板，使代码更容易理解）。
[React-data-menu]
[数据驱动的旋转木马]
[数据驱动的运动]

其他数据驱动的现实世界应用的例子

Survey monkey，你可以做一个问卷，让人们回答。你看到的输出是由数据驱动的。在这种情况下，数据是被输入的东西，它的处理 "驱动 "结果。
Quora - 一般来说，数据是输入的。Quora是一个数据驱动的应用程序，但以不同的方式。它有统计数据，但应用程序的价值并不特别在于所写的东西，而是在于所读的东西。因此，输出并不完全由数据驱动。
登录表格--这里的数据（用户名、密码）是从该网站的数据库中传输的（反之亦然）。
Twitter是数据驱动的，在这种情况下，你在应用程序中输入数据，例如通过发布推文。然后你添加的数据允许你创建一个账户并登录。此外，Twitter还使用数据驱动的做法来做广告。

结论

"数据驱动的编程可能有不同的含义，但这里是我使用它的含义：它是一种编程风格，其中专业化是通过数据结构而不是模板代码来完成的。"~ Pierre Chapuis.

如何在React中构建数据驱动的应用程序