React入门- 为什么要使用React？

1 年 ago
科, 雅
2 minutes

首先

我在接触React已经大约一年时间了，React本身也有了很大的变化。这次，我希望让大家了解React的优点，所以我决定写这篇文章。
另外，第二个目标是重新整理我自己对React的知识。我希望能够分几次将制作一个应用程序的过程总结成一篇文章。

我的状态如下所示

    • React・Next.jsを使って簡単なアプリを作ったことがある

 

    アルバイトでSpringを使ったwebアプリの開発をしている（フロントはjQueryゴリゴリ）

在我遇到React并开始使用它的过程中

大致意思: 由于在使用 jQuery 时经历了困难，所以我转向了 React 寻求解救。

我之前主要使用jQuery，基本上没有什么问题，但随着页面项目的增多和动画效果变得更丰富，我开始感到实现的困难和维护性的局限。然后我偶然发现了React。然而，即使我进行了调查，也不明白它是什么东西，比如“作为MVC中的视图框架”、“虚拟DOM”等等，都让我感到摸不着头脑。但实际使用之后，我发现它是一个非常简单的框架/库，它解决了我的烦恼。由于我本来就喜欢JavaScript，所以它非常容易上手。

“React” 是什么？

公式文档中如下介绍。

一个用于构建用户界面的JavaScript库。

因为仅凭这些并无法理解，所以我打算通过介绍主要功能的说明和实例来进行介绍。

为什么使用React有哪些优点？

从官方文件的首页也可以找到摘录。

    1. 宣言式视图

 

    基于组件的设计

还有一个选项是「一次学习，随处书写」，但我们可以暂时忽略这个。

声明性的视图

首先，“宣言性”是什么？我们在使用React进行实现时所实现的是“在某种状态下应该显示什么”。我们只需要简单地声明“在这个位置显示这个值”，“在这种情况下显示那个”，就可以了。

然后，需要按照该声明高效地更新UI（操作DOM）。
在这种情况下，虚拟DOM出现了。虚拟DOM采用与常规DOM相同的树状结构。
当虚拟DOM重新构建时，只有差异被应用于实际的DOM，类似这样。

v-dom.png

用服务器端渲染(SSR)和模板引擎生成HTML的方式，构建虚拟DOM非常类似。在使用SSR进行渲染时，没有记忆到过出现界面数值不一致的情况，因此没有办法不使用虚拟DOM来采用接近这种方式。

此外，由于只对需要更新的DOM进行更新，所以性能比一些普通的纯JS要提升。

基于组件的 (Component-Based)

使用React时，我们通过将UI的状态、外观和动画分解为组件来进行处理。从简单的输入框到整个页面，我们将所有内容都视为组件。通过组合组件来构建UI。
通过分解，我们可以实现可重用性，并产生整体外观的一致性。

组件会管理自身的状态，并定义其外观和行为。因此，不再将状态放置在DOM中。DOM中的值可以从任何地方进行更改，但组件的状态具有有限的访问范围，因此状态转换更容易追踪。

我试着写一下React。

我们在思考一个显示九九乘法表的应用程序。

    1. 请输入您想要显示的九九乘法表的乘法段数。

 

    显示已输入的乘法段的九九乘法表。

如果是使用jQuery的情况下

在使用React之前，我会先展示使用jQuery的实现作为比较。

查看CodePen上nabekou（@nabekou29）的kuku_jQuery笔记。

在data属性中存储值，并在输入值时，动态修改带有data属性的td标签的文本。

如果是React的情况

这是使用React实现的。为了更容易解释，我用了TypeScript来编写。

请到 CodePen 上查看 nabekou 的 kuku_React 代码。

说明

const App: React.FunctionComponent<{defaultValue: number}> = ({defaultValue}) => {...}

这个函数是一个组件。(也可以用Class来定义。)
可以接收属性作为参数。

const [num1, setNum1] = React.useState(defaultValue);

通过使用React.useState，可以在此组件中存储状态。
num1是状态，setNum1是用于更新num1的函数。通过使用setNum1来更新值，向React通知值已经发生变化。

return (
  <div>
    <input type="number" value={num1} onChange={handleNum1Change} />の段
    <table>
      <tbody>
        <tr><th>1</th><td>{1 * num1}</td></tr>
        {/* 省略... */}
      </tbody>
    </table>
  </div>
);

在函数组件中，我们通过返回React元素来构建组件。可以使用JSX来创建React元素。编译后会将函数转换为创建React元素的代码（可以在CodePen的“View Compiled”按钮上查看）。
这种类似HTML的写法就是JSX。尽管它只是看起来像HTML，但实际上存在一些本来不存在的属性或部分属性名称发生了变化。在JSX中可以使用{}来包裹JavaScript代码。当然，在这个JavaScript代码中也可以写JSX。

const handleNum1Change = (event: React.ChangeEvent<HTMLInputElement>) => { 
  setNum1(Number(event.target.value));
}

当输入值时，将更新num1。通过使用setNum1进行更新，表中的值将被更新。

ReactDOM.render(
  <App defaultValue={1}/>,
  document.getElementById('app')
);

正在将React元素渲染到#app中。

顺便提一下

<table>
  <tbody>
    <tr><th>1</th><td>{1 * num1}</td></tr>
    <tr><th>2</th><td>{2 * num1}</td></tr>
    <tr><th>3</th><td>{3 * num1}</td></tr>
    ...
    <tr><th>9</th><td>{9 * num1}</td></tr>
  </tbody>
</table>

虽然我是以HTML的形式编写的，但可以使用数组以如下方式进行编写。

<table>
  <tbody>
    {
      [1, 2, 3, 4, 5, 6, 7, 8, 9].map(num2 => (
        <tr key={num2}><th>{num2}</th><td>{num1 * num2}</td></tr>
      ))
    }
  </tbody>
</table>

试一试比较

    1. 声明型视图

 

    基于组件的

我打算意识到上述两点并开始比较。

在表明的角度来看？

我认为特别是

{num1 * num2}

这一部分变得非常易懂。这使得表格中所显示的内容更加明确。
此外，更新变得非常简便。在使用jQuery时，需要访问每个td元素进行计算和更新，而在React中，只需要更新num1，表格的值就会自动更新。

从组件角度来看？

通过外观和动作的统一，我们能够立即看出状态的变化是如何进行的，以及它们所产生的作用。不再需要在JS和HTML之间来回切换。此外，我们也不再需要写奇怪的选择器了。如果要进行紧密耦合，我认为这种方式更容易理解。

结束

我觉得React被认为是学习成本很高的，但实际上需要记住的东西非常少。只是对JavaScript的知识要求相对较高，可能这是困难所在。随着Hooks的出现，编写React也变得更加简单了，所以我希望继续在周围宣传它。接下来，我计划谈一些更多关于实现的内容。

请参阅

为什么使用React后不再需要jQuery？
选择React还是Vue？
应对前端组件设计问题。

✖
广告
将在 10 秒后关闭
bannerAds