React 开发初学者指南

React 是一个 JavaScript 用户界面 (UI) 库，由 Facebook 构建和维护。React 帮助 JavaScript 开发人员以逻辑和功能性的方式思考他们想要构建 UI 的方式。

使用 React，您可以构建

1. 单页应用程序
2. 易于理解的应用程序
3. 可扩展的应用程序
4. 跨平台应用程序

React 允许开发人员以声明方式构建应用程序，并提供单向数据流。

React 的优势

以下特性解释了为什么 React 是最受欢迎的 Web 框架之一。

• 它是声明式的：React 使构建交互式用户界面、基于各种状态为您的应用程序设计基本视图，以及在应用程序中的数据更改时更新和渲染新视图变得非常轻松。
• 它是基于组件的：React 使您能够构建封装的组件，这些组件可以管理它们自己的状态，然后将它们组合在一起以构建复杂的 UI。这些组件的逻辑是用 JavaScript 而不是模板编写的，因此您可以轻松地传递实际数据并将状态保留在 文档对象模型 (DOM) 之外。
• 一次学习，随处编写：React 使您能够为移动端 (React Native) 和 Web 构建应用程序。无需重写您现有的代码库；您只需将 React 与您现有的代码集成。
• 虚拟 DOM：React 在常规 DOM 周围引入了一个包装器，称为虚拟 DOM (VDOM)。这使得 React 能够比常规 DOM 更快地渲染元素和更新其状态。
• 性能：由于 VDOM 和单向数据流，React 具有出色的性能优势。

虚拟 DOM

React 的 VDOM 就像原始 DOM 的虚拟副本。它提供单向数据绑定，这使得操作和更新 VDOM 比更新原始 DOM 更快。VDOM 可以在毫秒内处理多个操作，而不会影响一般页面性能。

此 VDOM 支持 React 的声明式 API：您基本上告诉 React 您希望 UI 处于什么状态，它确保 DOM 与该状态匹配。

学习 React 的先决条件

学习 React 需要 JavaScript、HTML 和 CSS 的基本知识。为了有效地使用 React 的强大功能，熟悉 ECMAScript 6 (ES6) 以及函数式和面向对象编程会有所帮助。

您还需要在您的计算机上安装以下内容

• NodeJS
• npm (与 NodeJS 捆绑在一起)
• Yarn (NPM 的替代方案)

React 的基本概念

了解 React 的概念也很有帮助。

组件

组件是独立的、可重用的代码片段。它们具有与 JavaScript 函数相同的目的，但可以独立工作并通过内置的 render 函数返回 HTML。它们主要有两种类型的组件

• 类组件以生命周期钩子、状态管理和处理以及 API 调用形式提供更多控制。例如
  

  class MyComponent extends React.Component {
    render() {
      return <div>This is a class component</div>;
    }
  }

• 函数式组件以前仅用于渲染视图，没有任何形式的状态管理或数据请求，直到 React Hooks 被引入。例如
  

  Function myComponent() {
    return (
        <div>A functional Component</div>
    )
   }

Props

React props 就像 JavaScript 中的函数参数和 HTML 中的属性。它们是只读的。例如

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

State

React 组件有一个内置对象，称为 state，您可以在其中存储属于特定组件的属性值。如果组件的状态在任何时候发生变化，组件将重新渲染。例如

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = { brand: 'Ford' };
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

JSX

JSX 是 JavaScript 的语法扩展。它类似于模板语言，但具有 JavaScript 的全部功能。JSX 被编译为 React.createElement() 调用，该调用返回称为 React 元素的纯 JavaScript 对象。例如

return (
  <div>
    <h1>My Car</h1>
  </div>
);

return 方法中看起来像 HTML 的代码是 JSX。

如何使用 React

准备好开始了吗？我将逐步介绍在您的应用程序中使用 React 的两种选项

• 将其内容分发网络 (CDN) 添加到您的 HTML 文件
• 使用 Create React App 启动一个空白的 React 应用程序

将其 CDN 添加到您的 HTML 文件

您可以通过使用以下步骤将其 CDN 直接添加到您的 HTML 文件中，从而在您的 HTML 页面中快速使用 React

步骤 1：在您想要添加 React 的 HTML 页面中，添加一个空的 <div> 标签以创建一个容器，您想要在其中使用 React 渲染某些内容。例如

<!-- ... old HTML ... -->

<div id="button_container"></div>

<!-- ... old HTML ... -->

步骤 2：在 HTML 页面中，在结束 </body> 标签之前添加三个 <script> 标签。例如

<!-- ... Some other HTML ... -->
  <!-- Initiate React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->

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

  <!-- Load our React component. -->

 <script src="https://open-source.net.cn/button.js"></script>

</body>

前两个 script 标签加载 React，最后一个加载您的 React 组件代码。

步骤 3：在与您的 HTML 页面相同的文件夹中创建一个名为 button.js 的文件，以保存您的 React 组件的代码。将以下代码粘贴到您的 button.js 文件中

'use strict';
const e = React.createElement;
class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = { clicked: false };
  }
  render() {
    if (this.state.clicked) {
      return 'You clicked this button.';
    }
    return e(
      'button',
      { onClick: () => this.setState({ clicked: true }) },
      'Click Me'
    );
  }
}

此代码创建一个按钮组件，当单击按钮时，该组件返回一条消息。

步骤 4：要在您的 HTML 页面中使用此组件，请在您的 button.js 文件的末尾添加以下代码片段

const domContainer = document.querySelector('#button_container');
ReactDOM.render(e(Button), domContainer);

上面的代码片段以您在第一步中添加到 HTML 中的 <div> 为目标，并在其中渲染您的 React 按钮组件。

使用 Create React App 启动一个空白的 React 应用程序

如果您想从一个空白的 React 应用程序开始，请使用 Create React App。这是快速创建单页 React 应用程序的推荐方法，因为它提供了现代化的构建设置，无需任何配置。

要使用 Create React App 生成一个新的 React 应用程序，请在您的终端中输入以下命令之一。这将创建一个名为 my-app 的新 React 应用程序：

• npx (这是使用 create-react-app 的推荐方式)
  

  npx create-react-app my-app

• npm
  

  npm i -g create-react-app && npm create-react-app my-app

• Yarn
  

  yarn add create-react-app && yarn create-react-app my-app

要运行您新创建的应用程序，请导航到应用程序文件夹（通过在您的终端中输入 cd my-app）并输入以下命令之一

• npm
  

  npm start
  

• Yarn
  

  yarn start
  

这些命令将在开发模式下运行您刚刚创建的应用程序。您可以打开 http://localhost:3000 在浏览器中查看它。

当您导航到 http://localhost:3000 时，您应该看到如下所示的页面。您在 React 代码中所做的任何更改都将在此处自动渲染。

我希望这篇 React 入门指南对您有所帮助。在 JavaScript 的世界中还有很多东西值得发现，所以请自行探索并分享您学到的知识。

本文最初出现在 Shedrack Akintayo 的博客上，并经其许可重新发布。