什么是反应？ 定义、功能和应用

什么是反应？

React 是一个开源的 JavaScript 集合，以构建高度响应和动态的用户界面而闻名。 因此，ReactJS 以其经典的基于组件的设计成为创建可扩展移动应用程序和前端 Web 的非常有效的解决方案。 你甚至可以使用 React 构建可重用的 UI 组件。

Jordan Walke 在 Facebook 担任软件工程师时开发了 React。 它于 2011 年在 Facebook 和 2012 年晚些时候在 Instagram 上出现在公众视野中。 React 主要专注于构建交互式、有吸引力和自然的应用程序。 此外，它只需基本编码即可为您提供最佳渲染性能。

React 允许开发人员创建一个扩展的 Web 应用程序，该应用程序可以在不重新加载页面的情况下转换数据。 您可以在 MVC 模板中查看它，并且可以通过结合其他 JavaScript 框架来使用。 Airbnb、Netflix、纽约时报和 Instagram 等许多顶级公司都使用了 React。 它还有助于 Angular.js 等框架。

React 有一些非凡的特性，比如服务器端渲染、实时更新等等。 幸运的是，这个 JavaScript 库并没有给任何人留下深刻印象。

如果您是 React 框架的新手或者只是更新您的核心概念，我们在这里为您提供 React 库的所有基础知识。 要了解更多，您可能想进一步阅读！

React 的主要特点

React JavaScript 凭借其强大的功能在开发人员社区中拥有庞大的粉丝群。 它的一些显着特点是：

1.虚拟DOM

这是 React 的核心特性，因为它促进了灵活和快速的应用程序开发。 此外，它使 React 能够使用其内存协调算法在其虚拟内存中复制网页。 因此，表示的是一个虚拟 DOM，而不是原始 DOM。

虚拟 DOM 会随着应用程序中的每次修改重新呈现完整的用户界面。 需要注意的是，仅更新了更改的组件，其余组件在虚拟表示中保持不变。

因此，React 有助于使开发人员的开发过程具有成本效益和快速。

2.JavaScript XML

JavaScript XML 通常被称为 JSX。 它是一种与 HTML 非常相似的语法。 它主要用于描述应用程序 UI 的外观。 它是 ReactJS 为开发人员提供的关键特性之一。 它在网页中注入与 HTML 相同的组件来创建语法。

这有助于轻松编写 ReactJS 的构建块。 它还允许开发人员最容易地创建语法。

3.单向数据绑定

React 提供单向数据流，这是其易于工作管理的主要原因之一。 ReactJS 中使用单向数据绑定，这意味着开发人员不能直接编辑任何组件。 但是，它们必须通过回调函数进行操作才能进行任何更改。 因此，它的工作过程称为单向数据绑定。

ReactJS 使用 Flux（一个 JavaScript 应用程序）从中心点执行数据控制。 因此，开发人员可以轻松管理移动应用程序和 Web。 此外，它提高了效率并使应用程序更加灵活。

4. 反应原生

React Native 被定制为使用原生组件而不是 Web 组件。 此外，它为 ReactJS 呈现 react-native 格式。 因此，对 ReactJS 的概念要非常准确和准确，才能获得对 React Native 的理解和原理。 这些包括道具、状态、jsx 和组件。

React Native 更改了 react 代码以使其与 iOS 和 Android 平台兼容。 它还旨在为开发人员提供对该平台本机功能的访问。

5. 声明式 UI

声明性 Ul 是一种功能，可生成应用程序的简单视图并帮助创建引人入胜的移动应用程序。 它为 Web 和移动应用程序启用交互式用户界面。 ReactJS 借助此功能充分更新正确的组件，以进行适当的数据修改。

此功能使代码更具可读性，同时还简化了调试。

6. 基于组件的架构

从上面突出的特性可以看出，ReactJS 的架构是一个基于组件的平台。 它分为多个组件，其中每个组件都有其独特的能力和特定的逻辑。

基于组件的架构宣称 React 是用 JavaScript 编写的，而不是使用模板编写的。 因此，开发人员可以在不影响 DOM 的情况下遍历应用程序。

组件、道具和状态

1. 组件

组件被认为是任何 ReactJS 应用程序的基本创建块。 准确地说，单个应用程序通常由多个组件组成。 它是用户界面中最关键的部分。 它有助于将 UI 分成可快速处理的可重用和独立部分。

组件分为两个主要领域，如下所示：

• 功能组件

功能组件简单地由表示功能表示。 该函数接受 props 并更改 React 元素以将其呈现到页面。 大多数情况下，只要有可能，最好使用功能组件，因为它们是可预测的和简洁的。 此外，由于它纯粹是展示性的，因此输出始终与道具相同。

功能组件也被称为无状态的、展示的和哑的。 所有这些名称都是从功能组件所具有的性质中获得的：

• 无状态，因为它们不持有或管理状态。
• 展示性，作为 UI 元素的所有输出。
• 功能性，因为它们是基本功能，仅此而已。

功能组件示例：

const Greeting = () => <h1>嗨，我是个笨蛋！</h1>;

• 类组件

类组件是使用 ES6 类语法构建的。 此外，它们还具有包含逻辑、本地状态和其他一些功能的能力。 这些组件被认为是一个容器或有状态和智能：

• 类，因为它们基本上分为类别。
• 有状态的，因为它们可以保存和管理本地状态。
• 聪明，因为它们包含逻辑。
• 容器，因为它们包含或容纳许多其他组件。

类组件具有很大的标记，与功能组件相反。 如果超出要求使用它们会影响代码的可测试性和可读性的性能。

最简单的类组件形式：

类问候扩展 React.Component {

使成为（）{

return <h1>你好，我是智能组件！</h1>;

}

2.道具

道具使 ReactJS 的组件能够动态且易于定制。 它们是从一台计算机向另一台计算机提供数据的方式——这是一种单向数据流。 组件可以根据收到的 props 接受和返回 props 自定义的 React 元素。

道具是只读的，组件永远不能修改传递给它的道具。 因此，例如，应该给出相同的组件作为输出和输入。

3. 状态

状态是一个完整的 React 元素，它使用包含有关组件的信息或数据。 随着时间的推移，组件的状态可以改变； 每当它发生变化时，都会导致组件的渲染。

由于用户操作的响应或系统生成的事件，可能会发生更改。 这些更改定义了组件及其呈现方式。

包起来

React 通过简化开发过程为开发人员提供了很大的灵活性。 感谢 React Native，你可以“学习一次，随处编写”。 因此，一旦您了解了 React 的基本架构和原理，您就可以设计功能齐全的 Web 和移动应用程序。 React 拥有一个活跃的支持社区这一事实使其成为对开发人员更具吸引力的选择——您总能找到有人带领您应对应用程序开发挑战。

如果您想掌握 React 和其他此类趋势行业工具的精髓，您绝对应该查看upGrad 的软件技术课程。 upGrad 承诺在全球超过 40,000 名学生的学习者基础上通过点对点学习推动整体发展。 除了结构良好的课程外，学习者还可以享受与顶级讲师和行业专家的互动式现场课程。