React （一）—— React 是什么？

时间 2019-12-07

标签 react 什么栏目 React 繁體版

原文原文链接

前言

今天咱们将从头开始学习 React。咱们将了解到 React 是什么以及什么使它起做用。而后讨论为何要使用它。

在接下来的30天内，你将会对 React 框架及其生态系统的各个部分有一个良好认识。javascript

在咱们30天的冒险旅程中，天天都将之前一天的内容为基础，所以在本系列的最后，你不只将了解框架如何工做的术语、概念和基础，还将可以在下一个 web 应用程序中使用 React。html

React 是什么？

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

全部 React 应用程序的核心都是组件。组件是一个自包含模块，能够渲染一些输出。咱们能够将界面元素（如按钮或输入字段）写成 React 组件。组件是可组合的。组件可能在其输出中包含一个或多个其余组件。react

通常来讲，为了编写 React 应用程序，咱们编写与各类界面元素相对应的 React 组件。而后咱们将这些组件组织在高级组件中，这些高级组件定义了应用程序的结构。web

例如，一个表单。表单可能包含许多界面元素，如输入字段，标签或按钮。表单的每一个元素均可以被写成组件。而后咱们编写一个更高级的组件，表单组件自己。表单组件将指定表单的结构，并在其中包含每个界面元素。ajax

重要的是，React 应用程序的每一个组件都遵照严格的数据管理原则。复杂的交互用户界面一般涉及复杂的数据和应用程序状态。React 的表面区域是有限的，旨在为咱们提供工具，使咱们可以预测应用程序在给定状况下的外观。咱们将在课程后期深刻探讨这些原则。浏览器

Note : The surface area of React 直译为 React 的表面区域, 有更好的翻译请告知babel

如何使用 React ?

React 是一个 JavaScript 框架。使用该框架很是简单，只需在 HTML 包含 JavaScript 文件，并在应用程序的 JavaScript 中使用 React 的导出便可。app

例如，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://unpkg.com/babel-standalone@6/babel.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 是如何工做的？

与它的许多前辈不一样，React 不是直接在浏览器的文档对象模型（Document Object Model，DOM)上操做，而是在虚拟 DOM (Virtual DOM)上操做。也就是说，在对数据改变后，它不是在浏览器直接操做文档（可能很是慢），而是在构建的 DOM 上解析更改并彻底在内存中运行。虚拟DOM 更新后，React 会智能地决定对实际浏览器的 DOM 进行更改。

React 的虚拟DOM 彻底存在于内存中，是 web 浏览器 DOM 的表示。所以，当编写组件时，咱们不是直接写入 DOM，而是编写一个虚拟组件，React 将其转换为 DOM。

在下一篇文章中，咱们将介绍 JSX 并编写咱们第一个真正的组件。

参考

这是国外关于 React 的一系列文章，为了学习将其翻译成中文。翻译如有不正确的地方请指正。

原文连接： 30-days-of-react