My App

React的魔力

走吧!在这个基础模块中,我们将学习如何使用 JSX 创建我们的第一个组件,通过 props 在它们之间传递数据,并使用 CSS 为它们添加样式。旅程从这里开始。

在 2010 年代初,Facebook 开发者遇到了一个问题。成千上万的人抱怨“幻影消息”。

用户会在“消息”图标旁看到一个小的 1 通知徽章,表示他们有新消息。但当他们点击它时,会发现没有任何新消息,只是旧消息。

当时,用户界面有三个不同的位置来显示消息状态:

facebook-annotated-chat-ui

用户收到虚假消息,因为用户界面的这三个部分由不同的视图驱动,而这些视图不同步。

这可能看起来是个微不足道的问题,但 Facebook 是一个极其复杂的应用,有数百名开发人员来自数十个团队共同协作,添加新功能,快速推进并打破常规。每周,都会出现一些新的边缘案例,导致虚假消息。就像玩打地鼠一样;每次他们修复一个漏洞,就会冒出一个新的。

团队最终通过迁移到一个实验性的内部工具:React,解决了这个问题。这个问题以及许多其他问题随之消失。

如果您有兴趣听更详细的版本,这个故事由 Jing Chen 在 Facebook 的演讲Rethinking Web App Development at Facebook中讲述


关于 React 的真正神奇之处在于,我们不必担心将我们的状态(保存在 JavaScript 中)和我们的 UI(在 DOM 中,)保持同步。

使用 React,我们根据当前应用状态描述我们想要的用户界面。React 接受这些描述并将其变为现实。

我在 2015 年开始使用 React 进行开发。我有幸参与多个大型 React 代码库的工作,包括可汗学院,这是第一个从 Facebook 迁移到 React 的大型应用程序之一,以及 Unsplash,互联网250 个最受欢迎的网站之一*

我可以诚实地说,我再也不想用其他方式来构建动态 Web 应用程序。一旦你对 React 感到舒适,它就变成了一个如此强大的工具。

我很高兴能与你分享 React 的乐趣。让我们开始吧!