头部背景图片
小畅的学习笔记 |
小畅的学习笔记 |

React学习笔记2（官网学习）

2021-03-28
#React

一、概述

1. 在网站中添加React

（1）添加一个DOM容器到HTML中

首先，打开你想要编辑的 HTML 页面。添加一个空的 <div> 标签作为标记你想要用 React 显示内容的位置。例如：

<!-- ... 其它 HTML ... -->
<div id="like_button_container"></div>
<!-- ... 其它 HTML ... -->

我们给这个 <div> 加上唯一的 id HTML 属性。这将允许我们稍后用 JavaScript 代码找到它，并在其中显示一个 React 组件。

（2）添加Script标签

接下来，在 </body> 结束标签之前，向 HTML 页面中添加三个 <script> 标签： 

<!-- ... 其它 HTML ... -->
<!-- 加载 React。-->
<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->  
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>  
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- 加载我们的 React 组件。-->  
<script src="like_button.js"></script>
</body>

前两个标签加载 React。第三个将加载你的组件代码。

（3）创建一个React组件

在 HTML 页面文件的同级目录下创建一个名为 like_button.js 的文件，将这段代码粘贴到 like_button.js 文件中。

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
constructor(props) {
    super(props);
    this.state = { liked: false };
}

render() {
    if (this.state.liked) {
    return 'You liked this.';
    }

    return e(
    'button',
    { onClick: () => this.setState({ liked: true }) },
    'Like'
    );
}
}

在 like_button.js 的底部，在模板代码之后，加入以下两行代码。

// ... 此前粘贴的代码 ...
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

这两行代码会找到我们在步骤 1 中添加到 HTML 里的 <div>，然后在它内部显示我们的 React 组件 “Like” 按钮。
最终，两个文件代码编辑如下：
index.html：

<!--index.html-->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>
    <!-- We will put our React component inside this div. -->
    <div id="like_button_container"></div>
    <!-- 加载 React。-->
    <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <!-- 加载我们的 React 组件。-->
    <script src="like_button.js"></script>
  </body>
</html>

like_button.js：

//like_button.js
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }
  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }
    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

至此，我们已经成功将一个React组件添加到网站中
Image1.png

（4）知识扩展：重用一个组件通常

你可能希望在 HTML 页面的多个位置展示 React 组件。下面是一个示例，它显示了三次 “Like” 按钮，并向各自传入了一些数据：
完整代码如下：
index.html：

<!--index.html-->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>
    <p>
      This is the first comment.
      <!-- We will put our React component inside this div. -->
      <div class="like_button_container" data-commentid="1"></div>
    </p>
    <p>
      This is the second comment.
      <!-- We will put our React component inside this div. -->
      <div class="like_button_container" data-commentid="2"></div>
    </p>
    <p>
      This is the third comment.
      <!-- We will put our React component inside this div. -->
      <div class="like_button_container" data-commentid="3"></div>
    </p>
    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <!-- Load our React component. -->
    <script src="like_button.js"></script>
  </body>
</html>

like_button.js

// like_button.js

'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }
  render() {
    if (this.state.liked) {
      return 'You liked comment number ' + this.props.commentID;
    }
    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}
// Find all DOM containers, and render Like buttons into them.
document.querySelectorAll('.like_button_container')
  .forEach(domContainer => {
    // Read the comment ID from a data-* attribute.
    const commentID = parseInt(domContainer.dataset.commentid, 10);
    ReactDOM.render(
      e(LikeButton, { commentID: commentID }),
      domContainer
    );
  });

至此，我们已经成功将三个React组件添加到网站中
Image2.png

（5）使用 React 和 JSX

在上面的示例中，我们只依赖了浏览器原生支持的特性。这就是为什么我们使用了 JavaScript 函数调用来告诉 React 要显示什么：

const e = React.createElement;
// 显示一个 "Like" <button>return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);

然而，React 还提供了一种使用 JSX 编写界面的方式：

// 显示一个 "Like" <button>return (
<button onClick={() => this.setState({ liked: true })}>
    Like
</button>
);

这两段代码是等价的。虽然 JSX 完全是可选的，但是多数人觉得这样编写 UI 代码更方便 —— 无论是使用 React 还是其它库。

（6）快速尝试 JSX

在项目中尝试 JSX 最快的方法是在页面中添加这个 <script> 标签：

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

现在，你可以在任何 <script> 标签内使用 JSX，方法是在为其添加 type="text/babel" 属性。

这种方式适合于学习和创建简单的示例。然而，它会使你的网站变慢，并且不适用于生产环境。 当你准备好更进一步时，删除你添加的这个新的 <script> 标签以及type=”text/babel” 属性。取而代之的，在下一小节中，你将设置一个 JSX 预处理器来自动转换所有 <script> 标签的内容。

1) 将JSX添加到项目中

将 JSX 添加到项目中并不需要诸如打包工具或开发服务器那样复杂的工具。本质上，添加 JSX 就像添加 CSS 预处理器一样。唯一的要求是你在计算机上安装了 Node.js。
在终端上跳转到你的项目文件夹，然后粘贴这两个命令：

  • 步骤 1： 执行 npm init -y

Image3.png

运行成功后，文件夹中会增加一个 package.json 的文件

  • 步骤 2： 执行 npm install babel-cli@6 babel-preset-react-app@3

Image4.png

运行成功后，文件夹中会增加一个 package-lock.json 的文件和node_modules文件夹

提示我们在这里使用 npm 只是用来安装 JSX 预处理器，之后你不再需要它。React 和应用程序代码都可以继续使用 <script> 标签而不做任何更改。
恭喜！你刚刚为你的项目加入了一个生产就绪（production-ready）的 JSX 配置环境。

2) 运行 JSX 预处理器

创建一个名为 src 的文件夹并执行这个终端命令：

npx babel --watch src --out-dir . --presets react-app/prod

Image5.png

注意：

  • npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。

  • 如果你看到一个错误消息显示为：“You have mistakenly installed the babel package”，你可能错过了上一步(将JSX添加到项目中)。在同一个文件夹中执行它，然后重试。

  • 不要等待它运行结束 —— 这个命令启动了一个对 JSX 的自动监听器。

  • 如果此时你用这段 JSX 入门代码创建一个 src/like_button.js 文件，监听器会创建一个预处理过的 like_button.js 文件，它包含了适用于浏览器的普通 JavaScript 代码。当你编辑带有 JSX 的源文件时，转换过程将自动重新执行。

2. React 工具链

Create React App

Create React App 是一个用于学习 React 的舒适环境，也是用 React 创建新的单页应用的最佳方式。

它会配置你的开发环境，以便使你能够使用最新的 JavaScript 特性，提供良好的开发体验，并为生产环境优化你的应用程序。你需要在你的机器上安装 Node >= 10.16 和 npm >= 5.6。要创建项目，请执行：

npx create-react-app my-app
cd my-app
npm start

注意第一行的 npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。

Create React App 不会处理后端逻辑或操纵数据库；它只是创建一个前端构建流水线（build pipeline），所以你可以使用它来配合任何你想使用的后端。它在内部使用 Babel 和 webpack，但你无需了解它们的任何细节。

当你准备好部署到生产环境时，执行 npm run build 会在 build 文件夹内生成你应用的优化版本。你能从它的 README 和用户指南了解 Create React App 的更多信息。

一组 JavaScript 构建工具链通常由这些组成：

  • 一个 package 管理器，比如 Yarn 或 npm。它能让你充分利用庞大的第三方 package 的生态系统，并且轻松地安装或更新它们。
  • 一个打包器，比如 webpack 或 Parcel。它能让你编写模块化代码，并将它们组合在一起成为小的 package，以优化加载时间。
  • 一个编译器，例如 Babel。它能让你编写的新版本 JavaScript 代码，在旧版浏览器中依然能够工作。

3.CDN链接

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

上述版本仅用于开发环境，不适合用于生产环境。 压缩优化后可用于生产的 React 版本可通过如下方式引用：

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

如果需要加载指定版本的 react 和 react-dom，可以把 17 替换成所需加载的版本号。

为什么要使用crossorigin属性?

如果你通过 CDN 的方式引入 React，我们建议你设置crossorigin属性：

<script crossorigin src="..."></script>

我们同时建议你验证使用的 CDN 是否设置了Access-Control-Allow-Origin: * HTTP 请求头：

Image6.png

这样能在 React 16 及以上的版本中有更好的错误处理体验。

二、基础知识

1. JSX是什么？

JSX是一个 JavaScript 的语法扩展，可以很好地描述 UI 应该呈现出它应有交互的本质形式。

为什么使用 JSX？

  • React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。
  • React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。我们将在后面章节中深入学习组件。如果你还没有适应在 JS 中使用标记语言，这个会议讨论应该可以说服你。
  • React 不强制要求使用 JSX，但是大多数人发现，在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。

在 JSX 中嵌入表达式

在下面的例子中，我们声明了一个名为 name 的变量，然后在 JSX 中使用它，并将它包裹在大括号中：

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);

在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。

JSX 特定属性

  • （1）使用引号来将属性值指定为字符串字面量：
const element = <div tabIndex="0"></div>;
  • （2）使用大括号来在属性值中插入一个 JavaScript 表达式：
const element = <img src={user.avatarUrl}></img>;

注意：（1）在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。
（2）React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。

Lililich's Blog
66Article 38Tags 13Categories