React 是一个用于构建用户界面的 Javascript 库。现在有两件事很重要，一是Javascript库，二是用户界面。库是一些代码的集合，我们可以重用它们来制作我们的应用程序。通过使用 React 和一些代码集合，我们可以制作我们的 Web 应用程序、移动应用程序、桌面应用程序和用户界面。
每当我们谈论应用程序时，它基本上都有两个部分。一个是前端（即用户界面），另一个是后端，所有逻辑都驻留在其中。
前端是用户交互的部分，比如浏览、点击按钮、提交表单等。然后我们的前端用后端响应它。
并且后端包含很多复杂的逻辑和数据，比如认证、授权、数据操作等
但 React 根本不关心后端。 React 仅适用于用户界面。
现在，如果我们谈论网络，我们知道 Javascript 是浏览器的默认编程语言。但 React 不是一种编程语言，它只是一个 Javascript 库。
这意味着，我们在 React 中所做的一切最终只不过是纯粹的普通 Javascript。
好吧，我问你一个问题。 React 是 2013 年出现的兄弟，那我们之前不是就已经做了用户界面了吗？
是的，我们之前已经使用纯 Javascript 和 jQuery 完成了此操作。
现在的问题是，为什么React又来了？ Javascript 会出现什么问题？
为了理解 React 真正要解决什么问题，我们需要更深入地挖掘。让我们深入探讨一下...！
我们将通过一个小应用程序看到。我们将创建一个小型计数器应用程序，如下所示，一个简单的 HTML 代码，其中包含两个名为 counterNumber 和 button 的 id。
现在看一下JavaScript代码图像，有一个简单的代码。我不想向你解释这段代码。请注意我的意思。
选择counterNumber和button作为DOM元素，然后使用addEventListener将计数值加1。然后在那里更新 counterNumberEl 的值。这里究竟发生了什么？如果你仔细看的话，你会明白基本上有两个功能：
1.抓住元素并与它们合作是我们想要做的。
2.更新 UI（用户界面）
那么，这里有什么问题呢？代码正在运行！但是，假设您需要两个计数器应用程序。那该怎么办？
您需要返回到该 HTML 并获取一个新的 div，并使用新的 id 单独获取它。那么 UI 应该稍后更新。
现在，我只讨论两个计数器应用程序，但是当交互过多且 UI 复杂时，开发人员会不知所措。这是主要问题！你一方面创建功能，另一方面更新 UI，这变得非常痛苦。
当像 Facebook 这样的公司面临这个巨大问题时，Facebook 软件工程师 Jordan Walke 受到 PHP 的基于组件的框架 XHP-js 的启发，于 2011 年创建了 React.js。它于 2011 年首次在 Facebook 的新闻源中实现，并于 2012 年在 Instagram 中使用。 2013 年开源 React.js。
现在我们知道为什么要使用 React 了。因此，让我们现在使用 React 来完成我们使用 vanilla JS 所做的计数器应用程序。然后你就会更有信心，相信 React 之后开发人员的生活变得多么轻松。让我们看代码...
首先，我将向您展示如何安装 React，以方便您使用，但在我们的项目中没有人以这种方式使用 React。我这样展示只是为了方便理解，让大家从核心层面理解。
在这里，我只是将 React 与此链接连接起来，正如他们在react.org 网站上所说的那样。现在，如果我转到react.js文件并写入console.log(React)和console.log(ReactDOM)，那么我们可以在控制台中看到2个对象，这意味着我们的React已连接。注意，body 标签内只有一个空的 div，只有一个名为 root 的 id。
在 JavaScript 中，我们可以像最初使用选择器一样在 DOM 中创建元素。类似地，我们也可以在 React 中创建元素。这里创建了一个div，里面打印了带有p标签的Hello World。虽然目前这似乎不是问题，但当您创建太多元素时，生活就结束了！一遍又一遍地做同样的事情是一个问题。这就是 React 创建自己的标记，称为 JSX (JavaScript XML) 的原因。虽然看起来像 HTML，但实际上是 JSX。
上图中是这样写的。但问题是，浏览器无法理解这个 JSX。因此，为了解决这个问题，我们的转译器 Babel 诞生了，它会将我们的 JSX 转译为浏览器能够理解的普通 JS。
要连接 Babel，请访问我们的网站 >设置> 将此链接复制到我们输入的 HTML 和 js 文件的正文标记下方=”text/babel” 那里。
现在既然是 JSX，我们就可以在这里编写我们想要的任何 JavaScript。那么让我们简化一下这个语法。首先我们将其放入 JS 函数中。
这里注意，myElement 皮重我只是放入了一个名为 Increment 的函数，并且像这样制作 Increment 函数使得在 React 中编写起来更加容易。现在我们可以在这里编写 JS，如果我们在这里使用之前的 JS 代码，那就可以了。但 React 表示，如果你想像我一样管理状态，则不必考虑 UI 更新。所以在 React 中他们提供了一个名为 useState 的函数，我正在展示如何使用它。
这个 useState 将作为我们增量按钮的状态。 UseState 默认为一个值，该值将显示我们状态的默认值，在本例中我们必须给出 0。 useState 函数基本上返回一个数组，其中包含两件事 - 一个是我们给出的值，另一个是更新状态值的函数。现在我们通过解构数组来分离它。
现在，如果我们想要 counter 作为我们的初始值，现在返回后我们可以像这样给出 {counter} 而不是 0。这称为插值。现在计数器的值将动态变化。而按钮中的onClick（因为是JSX，所以应该像onClick一样按照驼峰式写法）应该被称为功能。
如果我这样给它，那么就完成了，但是这里有一个问题。如果我像这样调用 setCounter 函数，它将已经被调用，这是我们不希望的。我们希望当有人点击按钮时按钮的值会增加。所以我们需要制作一个匿名箭头函数，那么问题就解决了。
现在如果你注意到这里我们没有通过抓取 DOM 的任何元素来手动更新 UI，这里我们只是告诉 React 我们想要什么，其余的 React 更新了 UI 本身。
现在，当我们给出 JS 示例时，我们在 JS 方面遇到的主要问题是——必须手动更新 UI。如果我们想再次使用该应用程序，我们就必须一次又一次地做同样的事情。
但是 React 解决了这两个问题。我们已经了解了 React 在无需手动更新 UI 的情况下如何工作，现在我们将了解如果我们需要在 2-3 个地方使用此应用程序，React 如何帮助我们。
看这里，我只是<>在此，我调用增量函数两次，工作完成。现在最有趣的是，您可以单独运行 2 个应用程序，这意味着它们将单独管理状态。我的意思是你明白，如果你愿意，你可以在整个网站的任何地方使用它，但不同的地方也会有所不同，这意味着一个地方与另一个地方没有关系。这就是Reactjs的力量。
基本上，你告诉 React 你的功能是什么，React 会相应地自动更新 UI。这就是 ReactJS 的美妙之处。
那么我们在谈论 React 什么呢？我们为什么使用 React？现在我完全明白 React 来解决什么问题了。这样的问题再也不会阻碍你在面试中的表现了。兄弟，要这么耐心地读完，可不是一件容易的事。你已经做到了，祝你好运。编码快乐！
以上是什么是 React 以及它是如何工作的？的详细内容。更多信息请关注PHP中文网其他相关文章！
