React——来自初学者的好的、复杂的和技巧。
React——来自初学者的好的、复杂的和技巧。
我从 14 岁开始就一直在使用 vanilla JavaScript（最简单的 JavaScript 版本）来编写网站。构建相对复杂的页面就足够了。每当我遇到诸如 React 或 Vue 之类的名字时，我都会对学习新的 JavaScript (JS) 库的想法嗤之以鼻。也许是因为 vanilla 足以满足我的需求，或者是因为我匆忙完成项目而没有花时间思考更有效的代码编写方法。
当我报名参加 Flatiron School 全栈 Web 开发课程时，情况发生了变化。作为第 2 阶段的要求（Flatiron 教学大纲分为“阶段”），我必须学习 React 库。现在，当我想起过去花费在调试和解码 HTML 结构上的所有时间时，我后悔没有早点学习 React。
在这篇博客中，我想概述一下我对 React 的早期印象、它的好处和它的复杂性。我希望这个博客能激励更多的初学者学习 React。
什么是反应？
React 是一个 JavaScript 库（经常使用框架这个词，但更合适的词是库）。它具有三个主要特点：
- 它是声明性的。
- 它是基于组件的
- 它用 一次学习，随处编写的方法。
声明式
首先，要了解什么 声明性的 意味着必须理解为什么 vanilla JS 被描述为 至关重要的 .要了解差异，请考虑如何制作一个在单击时显示红色方块的按钮：
我们的代码很可能有以下步骤：
- 创建一个 div 元素并将其分配给常量。
- 利用 查询选择器 去寻找 身体 并将其分配给一个常数。
- 追加 div 到 身体 .
- 设置一个 班级 的 红色的 到 div .
How we would solve the problem using vanilla JS.
这就是为什么 vanilla JS 被称为势在必行的原因。我们告诉JS 如何 处理解决方案的每一步。
现在，让我们考虑如何在 React 中解决这个问题：
- 我们会使用 使用状态 设置初始状态的钩子 真的 .并添加一个事件监听器，每次按下按钮时都会改变状态
- 接下来，我们使用条件语句告诉 react 仅在 是颜色 等于 错误的 .
How we would solve the problem using React
这就是为什么 React 是声明式的。我们告诉 React 什么 需要被完成。但是它是如何做的（它如何到达 DOM 中的元素并改变它的属性）是由 React 自己处理的。
困惑为什么JS中间有HTML？这是因为 React 使用了一个名为 JSX（JavaScript eXtensible Markup Language）的 JS 扩展，它允许在代码中编写类似 HTML 的语法。
基于组件
对我来说，这个特点是一个很大的特点。您是否曾经仅使用 HTML 和 JS 编写过网站/Web 应用程序？您可能会发现，随着页面复杂性的增加，文件会变得非常大。调整、重新设计和调试各个部分变成了一场噩梦——你错过了一个结束标签，整个地方的布局都被打乱了。
这就是为什么 React 是基于组件的。 React 鼓励你将布局和功能的不同部分分离到不同的组件文件中。
想象一下，当您在一个由三名开发人员组成的团队中开发像 Yelp 这样的页面时，这将变得多么有用。您可以指定创建组件的任务。由于单个代码编写在一个小得多的文件中，因此调整组件变得高效。您的任何团队成员都可以在任何他希望的地方重用您创建的组件。
Splitting Yelp into cleaner React components
一次学习，随处书写
最后一个好处是在学习 React 之后，您可以更轻松地找到其他库，例如 React Native、Next.js 和 Gatsby。
复杂的
作为初学者，你很可能会发现设置状态是 React 最复杂的方面。状态允许我们在发生某些事情时更新常量的值。在上面的示例中，我们看到了更改存储在状态中的值如何导致应用程序重新渲染，从而重新检查新值是否符合我们显示红色方块的标准。换句话说，它使我们的应用程序动态地响应用户的交互。
使用状态并不太复杂。但是改变状态的价值可能会很痛苦。当将新值传递给具有与当前值相同的外部特征的状态（例如，与状态的当前值匹配的数组，对其元素之一稍作修改）时，状态将不会被更新。例如，如果我们尝试更新设置为我们状态的数组中的单个元素，我们将不得不遍历数组，将每个值传播到一个新数组中，最终将其设置为新状态。 （听起来很复杂吧？！）
提示
- 先学香草JS。
你可以在学习 React 的同时学习 JS 语法。事实上，因为 React 是声明式的，所以很多工作都发生在幕后，并且不需要专门的 JS 知识。然而，知道如何解决 vanilla JS 中的问题对于理解为什么在某些时候你的代码会出错非常有帮助。了解 React 的底层功能也可以让你的代码更有意识，并消除猜测工作。
- 使用组件
许多初学者并没有完全理解将应用程序拆分为更小的组件的强大功能。他们将整个应用程序写在一个文件中。
使用组件！这将使您的代码更易于阅读、理解和重用。
就个人而言，习惯 React 需要时间。有时感觉很沮丧。然而，最终，痛苦是值得的——现在我在调试上节省了几个小时，仅仅是因为我的代码更干净、更独立。
祝你好运！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
