用 React 划分你的应用程序
用 React 划分你的应用程序
React 是一个用于构建接口的 JavaScript 库。如果你有 Node.js，它可以安装在你的本地系统上。我建议一起去 https://www.npmjs.com/ 作为包管理器，因为它们非常易于使用。
为什么反应？
React 作为 SPA（单页应用程序）在客户端上运行，非常适合导航您自己的工作以及与服务器和数据库进行通信。由于它是一个 JavaScript 库，因此对于已经熟悉 JavaScript 的人来说也很容易上手。它还被设计成在其结构上具有非常模块化的感觉。这会带来多种其他好处，例如：
- 在 JSX 中编程，这基本上是一种 JS 标记混合体，类似于如果您可以将 html 直接写入您的 JS 代码
- 能够同时构建应用程序的“外观”
- 处于自身状态的可重用组件
- 交互式用户界面
- 良好的性能和测试机制
- 并在行业内享有盛誉
什么是组件？
所以在我看来，React 最好的一点是使用组件和道具的能力。
组件基本上是前面提到的那些模块化部分，是 React 的核心功能。它本质上是将一个包含给定项目的 JavaScript 的片段或文件分解为多个文件或 ** 成分** 可以很容易地修改和移动。
当您在整个项目中重复一段代码时，这与 JS 中的想法相同。您可以将其转换为函数并在需要时随时调用该函数，而不是不断地重复它。组件是一样的，只是更大一些，更有活力。事实上组件本身就是函数！也许您有一组代码可以帮助在每次用户交互时在网页上呈现一个弹出窗口。使用纯 JS，您必须确保您有一个可以在全局范围内工作并且可以被调用的函数，同时确保 html 具有正确的框架以被 JS 识别和调用。它开始是很多部分，但使用 JSX，我们可以只调用组件“弹出”，react 只会与 DOM 本身交互并运行所需的代码。有了这个，任何时候我们需要运行弹出窗口，我们只需要进行调用，我们甚至可以编程动态方式来调用，而不仅仅是受用户输入的限制。
以下面的代码为例。我有一个应用程序，我想在其中呈现网页上的元素列表。为了做到这一点，我只需要返回一些 JSX，这些 JSX 将被插入到我的其余代码中。在这里，您会注意到我们导入了 React 和一个锻炼组件（稍后会详细介绍）并使用它们创建一个返回元素 div 的函数，然后将其导出到更大的图景中。正在呈现的列表本身使用单独的组件来制作每个元素。
这是前面代码中调用的锻炼组件。您可以看到它本身返回了一个 div，因此每次上面的 map 函数迭代“Workout”中的一个 div 时，都会被创建。
这是功能的来源。我们可以通过导入和导出这两个不同的文件来拉取和插入代码。通过允许程序员单独分析每个组件，它减少了混乱并允许更好的维护。
道具以及如何使用它们
在前面的示例中，您还会注意到组件函数正在传递用于返回信息的参数。这些参数称为道具。有多种使用它们的方法，但我通常坚持使用上面显示的方式，即所谓的解构道具。最初，它们是通过在对组件的调用中声明变量和值来调用的，然后由组件声明道具应该去哪里，如下所示。
传递 props 的推荐方法是在调用组件时直接调用有问题的 prop。
这里发生的是变量在上面声明。然后，当我尝试渲染一些元素时，我将一个组件传递给它。我告诉组件使用一个叫做 prop 的道具。该道具等于渲染时括号内的任何内容。
附带说明一下，在 React 的背景下，可以评估写在括号中的代码的任何值。这就是函数知道插入 prop 的任何值的方式。
因此，无论 prop 的值是“greeting”还是其他值，组件都知道，当它看到 prop 时，它需要查找并提取该值并将信息插入指定的位置。
这与组件因素相结合提供了更多用途。
- 信息可以跨组件和文件无缝传输。
- 组件可以呈现来自另一个组件的信息，即使该信息被更改，使用所述信息的组件也不需要更改它自己的代码。这就是动态规划。
- 变量的重用。声明一次并跨组件重用。
总体而言，React 是一个具有许多实际用途的出色库，并且对于有抱负的 JS 开发人员来说是更容易学习的库之一。我基本上只是概述了 React。还有更多主题需要讨论，例如 React 的另一个核心部分 state。我可能会在单独的博客中讨论这个主题。有关更多信息，我建议您访问 React 文档： https://reactjs.org .他们保持 React 维护良好，并拥有许多不同的资源来帮助用户熟悉它。祝你好运，编码愉快！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
