返回 登录
0

【全栈React】第1天:什么是React?

阅读2646

感谢“众成翻译”授权发布。
原文链接What is React?
译者: iOSDevLog
译文链接:【全栈React】第1天:什么是 React?
责编:陈秋歌,寻求报道或者投稿请发邮件至chenqg#csdn.net。

导读:《全栈React》系列包含30多篇文章,带你循序渐进的学习React。它从最基本知识开始,逐渐贯穿你需要了解的所有内容。如果你想学习React,不妨从这个系列开始学起。本文为系列的第一篇。


今天,我们从一开始就开始。让我们看看React是什么,是什么让React运转起来。我们将讨论为什么要使用它。

在接下来的30天内,您可以体验到React网页框架及其生态系统的各个部分。

我们的30天冒险中的每一天都将建立在前一天的材料上,所以在系列结束之后,您不仅可以了解框架如何工作的术语,概念和基础,而且可以用在您的下一个Web应用程序中。

让我们开始吧。 我们将从观看一段视频开始,因为它是一个非常好的开端。

什么是React?

React是一个用于构建用户界面的JavaScript库。它是Web应用程序的视图层。

所有React应用程序的核心是组件(components)。组件是一个自包含的模块,它提供一些输出。我们可以将类似按钮或输入字段的接口元素作为React组件。组件是可组合的。组件可以在其输出中包括一个或多个其他组件。

一般来说,为了编写React应用程序,我们编写了对应于各种接口元素的React组件。然后,我们将这些组件组织在定义应用程序结构的更高级组件中。

例如一个表单。表单可能包含许多界面元素,例如输入字段、标签或按钮。窗体中的每个元素都可以写为React组件。然后我们写一个更高级的组件——表单组件。表单组件将指定表单的结构,并在其中包括这些接口元素。

重要的是,React应用程序中的每个组件都遵守严格的数据管理原则。复杂的交互式用户界面通常涉及复杂的数据和应用程序状态。React的表面区域(surface area )是有限的,目的是给我们提供工具,以便能够预测我们的应用程序在给定的情况下的外观。我们在后面的课程中探讨这些原则。

好吧,那么我们如何使用呢?

React是一个JavaScript框架。使用框架就像在我们的HTML中包含一个JavaScript文件一样简单,并在我们JavaScript的应用程序中使用React 导出。

例如,React网站的Hello world示例可以如下简单:

<html>
<head>
  <meta charset="utf-8">
  <title>Hello world</title>
  <!-- Script tags including React -->
  ``<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js">``</script>
  ``<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js">``</script>
  ``<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js">``</script>

</head>
<body>
  <div id="app"></div>
  ``<script type="text/babel">``
    ReactDOM.render(
      <h1>Hello world</h1>,
      document.querySelector('#app')
    );
  </script>
</body>
</html>

它可能看起来有点可怕,简单的一行JavaScript代码就将Hello world动态地添加到页面。注意,我们只需要包括一些JavaScript文件,以使一切工作。

它是如何工作的?

与之前的很多框架不同,React不直接操作浏览器的文档对象模型(DOM),而是操作虚拟DOM(virtual DOM)。不是在数据改变之后,便操作浏览器文档(Document)(这可能很慢),而是在虚拟DOM中对数据做改变。当虚拟DOM一更新,React就能明确地对实际DOM做出修改。

虚拟DOM 完全存在于内存中,代表着浏览器DOM。因此,当我们写一个React组件时,不是直接写入DOM,而是写一个虚拟组件,React将会把它转换成DOM。

在下一篇文章中,我们将看看这对我们构建React组件和跳到JSX并编写我们的第一个真正组件意味着什么。

本教程系列的完整源代码可以在 GitHub repo上找到,其中包含所有样式和代码示例。

欢迎加入“CSDN前端开发者”群,与更多专家、技术同行进行热点、难点技术交流。请扫描以下二维码申请入群。
图片描述

评论