React（三）—— 组件

时间 2019-12-06

标签 react 组件栏目 React 繁體版

原文原文链接

前言

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

回顾一下咱们前篇文章介绍的 “Hello world” 应用程序。写法略有不一样，以下所示：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"> 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 变量将没法及时定义以供咱们使用它们。html

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

Babel

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

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

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

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

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

控制台警告?

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

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

React 应用程序

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

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