切换主题
字数
1496 字
阅读时间
7 分钟
https://17.reactjs.org/tutorial/tutorial.html#what-is-react### What Is React?
React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.
正如我们所知, 所有这些数据都需要与用户界面以及其他数据保持同步,
63 00:05:23,160 --> 00:05:26,700 因为它们都是相互关联的｡
64 00:05:26,700 --> 00:05:29,700 例如, 当我们更改有关位置或日期的数据时,
65 00:05:29,700 --> 00:05:37,710 UI需要显示这些新日期, 并且公寓列表也需要更新｡
66 00:05:37,710 --> 00:05:42,630 或者另一个例子, 地图需要显示公寓的位置｡
67 00:05:42,630 --> 00:05:44,970 因此, 当公寓改变时,
68 00:05:44,970 --> 00:05:47,100 地图也必须改变｡
69 00:05:47,100 --> 00:05:49,710 同样的事情应该反过来发生｡
70 00:05:49,710 --> 00:05:52,560 因此, 当地图被移动时,
71 00:05:52,560 --> 00:05:59,940 公寓列表也应该改变, 但只有当用户之前点击了绿色复选框时｡
72 00:05:59,940 --> 00:06:03,540 所以这些数据之间的联系更加紧密,
73 00:06:03,540 --> 00:06:06,120 可能会变得一团糟｡
74 00:06:06,120 --> 00:06:09,510 现在, 顺便说一下, 在现实世界的应用程序中,
75 00:06:09,510 --> 00:06:14,280 我们将这些数据中的每一个称为状态｡
76 00:06:14,280 --> 00:06:16,980 因此, 基于我向您展示的这些示例,
77 00:06:16,980 --> 00:06:19,410 我可以说, 如果没有框架,
78 00:06:19,410 --> 00:06:27,050 几乎不可能将如此大量的数据与这个超级复杂的UI保持同步｡
79 00:06:27,480 --> 00:06:30,600 但是, 你可能想知道, 为什么？
80 00:06:30,600 --> 00:06:35,133 为什么用Vanilla JavaScript构建这样的东西会如此困难？
81 00:06:36,840 --> 00:06:40,620 嗯, 这归结为两个大的方面｡
82 00:06:40,620 --> 00:06:50,460 第一个问题是, 仅使用普通JavaScript构建复杂的前端需要进行大量的直接DOM遍历和操作｡
83 00:06:50,460 --> 00:06:53,010 就像在这里的代码中, 我们有手动元素选择,
84 00:06:53,010 --> 00:06:57,870 类切换, DOM遍历, 甚至文本和CSS样式的操作,
85 00:06:57,870 --> 00:07:08,280 这在像Airbnb这样的复杂应用程序中肯定会成为一场绝对的噩梦, 因为我们的代码将非常复杂,
86 00:07:08,280 --> 00:07:19,053 非常难以理解, 我们可能最终会得到一大堆纠缠在一起的意大利面条代码｡
87 00:07:19,890 --> 00:07:22,830 所以这是第一个问题｡
88 00:07:22,830 --> 00:07:24,210 第二个大问题是,
89 00:07:24,210 --> 00:07:27,300 在典型的Vanilla JavaScript应用程序中,
90 00:07:27,300 --> 00:07:34,410 诸如简单文本或数字之类的状态通常只是简单地存储在DOM中｡
91 00:07:34,410 --> 00:07:37,620 所以就在HTML元素本身,
92 00:07:37,620 --> 00:07:41,280 而不是在应用程序的中心位置｡
93 00:07:41,280 --> 00:07:48,240 结果是, 我们最终会让应用程序的许多部分直接访问和更改DOM状态,
94 00:07:48,240 --> 00:07:51,900 这使得意大利面条代码更难理解｡
95 00:07:51,900 --> 00:07:57,753 更糟糕的是, 它肯定会在我们的应用程序中引入许多bug｡
96 00:07:58,963 --> 00:08:01,053 没人想要虫子对吧
97 00:08:02,070 --> 00:08:05,040 当然, 现在你可以尝试自己解决这些问题,
98 00:08:05,040 --> 00:08:08,100 但是你最终只会创建自己的框架,
99 00:08:08,100 --> 00:08:16,590 这很可能比所有已经存在的成熟框架更糟糕｡
100 00:08:16,590 --> 00:08:22,860 所以在这一点上, 你还不如使用像React这样经过战斗测试的框架｡
101 00:08:22,860 --> 00:08:29,790 现在, 好了, 现在我们知道为什么只用JavaScript编写单页应用程序如此困难,
102 00:08:29,790 --> 00:08:34,740 我们可以回答我们在开始时提出的基本问题｡
103 00:08:34,740 --> 00:08:39,240 那么, 为什么前端框架会存在呢？
104 00:08:39,240 --> 00:08:44,700 我们在这节课上已经回答了这个问题｡
105 00:08:44,700 --> 00:08:54,300 所以这些框架存在的最根本的原因是因为保持用户界面与数据同步真的很难,
106 00:08:54,300 --> 00:08:56,640 而且工作量很大｡
107 00:08:56,640 --> 00:09:08,220 因此, 基本上像Angular､ React或View这样的框架将数据与用户界面同步的这项艰巨工作从我们开发人员手中夺走｡
108 00:09:08,220 --> 00:09:10,770 所以他们解决了这个非常困难的问题,
109 00:09:10,770 --> 00:09:18,060 这样我们开发人员就可以专注于数据和构建我们自己的用户界面｡
110 00:09:18,060 --> 00:09:20,640 现在, 不同的框架有不同的方法来做到这一点,
111 00:09:20,640 --> 00:09:27,750 但它们都是相似的, 因为它们会随着时间的推移保持UI和数据的同步｡
112 00:09:27,750 --> 00:09:31,020 现在, 框架给我们的另一个非常有价值的东西是,
113 00:09:31,020 --> 00:09:38,880 它们基本上强制执行了一种正确的结构和编写代码的方式｡
114 00:09:38,880 --> 00:09:46,500 所以本质上, 这些框架的作者都提出了一种构建应用程序的好方法,
115 00:09:46,500 --> 00:09:49,260 这样其他开发人员也可以遵循这些约定,
116 00:09:49,260 --> 00:09:56,760 用更少的意大利面条代码构建更好的应用程序｡
117 00:09:56,760 --> 00:10:04,680 最后, 框架为开发人员, 特别是团队提供了构建Web应用程序的一致方法｡
118 00:10:04,680 --> 00:10:12,000 这样, 团队中的每个人都将以与其他人相同的风格构建自己的应用程序部分,
119 00:10:12,000 --> 00:10:17,370 最终将创建一个更一致的代码库和产品｡
120 00:10:17,370 --> 00:10:23,583 这就是为什么现代Web开发都是关于JavaScript框架的｡
贡献者
sunchengzhi