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

2024年1月7日 173次阅读 来源: 二月红

本文转载自：众成翻译
译者：iOSDevLog
链接：http://www.zcfy.cc/article/3765
原文：https://www.fullstackreact.com/30-days-of-react/day-1/

本日，我们从一最先就最先。让我们看看React是什么，是什么让React运转起来。我们将议论为何要运用它。

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

我们的30天冒险中的每一天都将建立在前一天的材料上，所以在系列完毕以后，您不仅可以相识框架怎样事情的术语，观点和基本，而且可以在您的 下一个Web运用程序

让我们最先吧。 我们将从在零最先由于它是一个异常好的最先的处所。

什么是React？

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

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

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

比方，拿到一个表单。表单可以包含很多界面元素，比方输入字段，标签或按钮。窗体中的每一个元素都可以写为React组件。然后我们写一个更高等的组件，情势组件自身。表单组件将指定表单的构造，并在个中包含每一个这些接口元素。

主要的是，React运用程序中的每一个组件都恪守严厉的数据管理准绳。庞杂的交互式用户界面一般触及庞杂的数据和运用程序状况。React的外表地区是有限的，目标是给我们供应东西，以便可以展望我们的运用程序在给定的情况下的表面。我们在后面的课程中讨论这些准绳。

好吧，那末我们怎样运用呢？

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并编写我们的第一个真正组件意味着什么。

    原文作者：二月红
    原文地址: https://segmentfault.com/a/1190000010465140
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞