React（三）—— 组件

最新推荐文章于 2024-10-02 05:39:15 发布

weixin_30265171

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量80

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5d1b8a6af265da1b934e1ce4

版权

前言

本系列的前两篇文章主要注重讨论。本篇文章让我们深入研究一些代码并编写我们的第一个 React 应用程序。

回顾一下我们前篇文章介绍的 “Hello world” 应用程序。写法略有不同，如下所示：

<!DOCTYPE html>
<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">
    var app = <h1>Hello world</h1>
    var mountComponent = document.querySelector('#app');
    ReactDOM.render(app, mountComponent);
  </script>
</body>
</html>
复制代码

Hello world

加载 React 库

我们将 React 源代码作为<script> 标记包含在页面的<head> 元素中。在我们开始编写 React 应用程序之前放置<script> 加载标记很重要，否则React 和ReactDOM 变量将无法及时定义以供我们使用它们。

另外，head 内部还有另一个script 标记，它引用了babel-core库。但什么是 babel-core?

Babel

上篇文章中，我们讨论了 ES5 和 ES6。我们提到对 ES6 的支持仍然参差不齐。为了使用 ES6，我们最好将 ES6 代码转换为 ES5 以支持更多的浏览器。

Babel是一个将 ES6 转换为 ES5 的库。

在 body 中，我们有一个脚本。在脚本内部，我们定义了第一个 React 应用程序。注意脚本标记有一种 text/babel类型。

<script type="text/babel">
复制代码

这向 Babel 发出信号，我们希望它在这个脚本中处理 JavaScript 的执行。这样我们就可以使用 ES6 来编写 React 应用程序，并确保 Babel会在只支持 ES5 的浏览器中实时转换其执行。

控制台警告?

当使用babel-standalone包时，我们会在控制台中得到警告。这很好，也在预料之中。我们将在几篇文章内切换到预编译步骤。

为了便于使用，我们在这里包含了 <script />标记。

React 应用程序

在 Babel 脚本主体中，我们定义了第一个 React 应用程序。它由单个元素组成，<h1>Hello world</h1>。对ReactDOM.reander()的调用实际上将我们的微小的应用程序放到了页面上。如果没调用ReactDOM.render()，DOM 中就不会呈现任何内容。ReactDOM.render()第一个参数是渲染的内容，第二个参数是渲染的位置。

ReactDOM.render(<what>, <where>)
复制代码

我们已经写了一个 React 应用程序。我们的“app” 是一个表示h1标签的 React 元素。但这并不有趣。富 web 应用程序接受用户输入，根据用户交互更改它们的形状，并与 web 服务器通信。让我们从构建我们的第一个 React 组件来开始接触这种功能。

组件和更多

我们在本系列文章的开头提到，所有 React 应用程序的核心是组件。理解 React 组件的最佳方法是编写它们。我们将把 React 组件编写成 ES6 类。

让我们看一下我们称之为 App的组件。与所有其他 React 组件一样，此 ES6 类将从 React 包中继承React.component类：

class App extends React.Component {
  render() {
    return <h1>Hello from our app</h1>
  }
}
复制代码

所有 React 组件都至少需要一个 render()方法。render()方法的作用是返回浏览器 DOM 元素的虚拟 DOM 表示。

在我们的 index.html中，让我们用新的 App组件替换之前的 JavaScript：

<!DOCTYPE html>
<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">
    class App extends React.Component {
      render() {
        return <h1>Hello from our app</h1>
      }
    }
  </script>
</body>
</html>
复制代码

可是，屏幕上不会显示任何东西。你还记得为什么吗？

我们还没有告诉 React 我们想要在屏幕上渲染任何东西或在哪里渲染它。我们需要再次使用ReactDOM.render()方法来告诉 React 我们想要渲染的内容和位置。

添加ReactDOM.render()方法将在屏幕上呈现我们的应用程序：

var mount = document.querySelector('#app');
ReactDOM.render(<App />, mount);
复制代码

Hello from our app

请注意，我们可以使用App类来呈现我们的 React 应用程序，就像它是内置的 DOM 组件类型一样（比如 <h1/>和`

标签）。

这里我们使用它，就好像它是一个尖括号中的元素：<App />。

React 组件就像页面上的任何其他元素一样，我们可以构建一个组件树，就像创建一个本地浏览器树一样（译者注：这里应该就是指 DOM 树）。

虽然我们现在正在渲染 React 组件，但我们的应用程序仍然缺少丰富性或交互性。很快，我们将会看到如何使 React 组件数据驱动和动态。

但首先，在本系列下一部分中，我们将探讨如何对组件进行分层。嵌套组件是富 React web 应用程序的基础。

参考

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

原文链接： 30-days-of-react/day-3

转载于:https://juejin.im/post/5d1b8a6af265da1b934e1ce4

weixin_30265171

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫