6、React 入门：从基础到实践

于 2025-07-05 12:06:07 发布
阅读量38 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/work3/article/details/150134846

React 入门：从基础到实践

1. React 的发展历程

React 的发展并非一帆风顺。起初，它的发展似乎有所倒退，但随着人们对它有了更深入的了解和实践，势头很快发生了转变。到 2013 年底，React 的情况明显好转。

2014 年，一些事件推动了 React 的发展：
- React Developer Tools 作为 Chrome 开发者工具的扩展发布，为开发者提供了强大的开发和调试工具。
- 举办了大量的会议和聚会，增加了 React 的曝光度。
- 许多编辑器和 IDE 开始引入对 React 的原生支持。

2015 年和 2016 年，React 真正开始走向主流。Flipboard、Netflix 和 Airbnb 等公司对 React 的使用起到了很大的推动作用。更多的会议以及更强大的 React 工具的发布也进一步促进了其发展。

自 2017 年底以来，React 持续增长，如今已成为构建客户端 Web 应用程序最受欢迎的库之一。需要注意的是，虽然这里主要强调 React 的客户端性质，但它也可以在服务器端渲染内容，即 Server - Side Rendering（SSR）。

2. 什么是 React

React 是一个用于构建网站的库。它的核心目的是让开发者在任何时刻都能轻松推断界面的结构，这通过组件来实现。组件可以看作是界面中独立的部分，将多个组件组合在一起就形成了用户界面。

从更详细但尽可能简单的角度来看，React 主要提供以下四个方面：
- 组件 ：一种构建界面的方法。
- Props ：用于在组件之间传递信息。
- State ：后续会详细探讨。
- Style ：虽然有人认为这不属于 React 本身，但包含进来是合理的。

此外，还有一个对 React 至关重要的概念——虚拟 DOM。虚拟 DOM 是内存中位于真实 DOM 之上的一个概念性的二级 DOM。当页面发生变化时，直接操作真实 DOM 会导致浏览器进行大量的重绘和回流工作，影响性能。而 React 使用虚拟 DOM，先更新虚拟 DOM，然后通过差异算法智能地确定需要对真实 DOM 进行的最少操作，将真实 DOM 的更改批量处理，从而提高性能。

3. 组件：React 的核心

下面通过一个简单的例子来介绍如何使用 React 组件。

首先，创建一个基本的 HTML 文档： 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF - 8" />
    <title>Intro To React</title>
  </head>
  <body>
  </body>
</html>

然后，在 <head> 标签中添加 React 代码： 

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

这里使用 CDN 下载 React 主代码和 react - dom 包，react - dom 是 React 与浏览器 DOM 之间的桥梁。

接下来，引入 React 代码： 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF - 8" />
    <title>Intro To React</title>
    <script crossorigin src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
    <script>
      function start() {
        const topMostComponent =
          React.createElement("div", { },
            React.createElement("h1", { }, "Bookmarks"),
            React.createElement("ul", { },
              React.createElement("li", { },
                React.createElement("h2", { }, "Etherient"),
                React.createElement("a", { href : "https://www.etherient.com" }, "The home page of Etherient")
              ),
              React.createElement("li", { },
                React.createElement("h2", { }, "Frank's Home"),
                React.createElement("a", { href: "https://www.zammetti.com" }, "The web home page of Frank Zammetti")
              )
            )
          );
        const root = ReactDOM.createRoot(document.getElementById("mainContainer"));
        root.render(topMostComponent);
      }
    </script>
  </head>
  <body onLoad="start();">
    <div id="mainContainer"></div>
  </body>
</html>

在这个例子中， start 函数在页面加载时被调用。 React.createElement 方法用于创建 React 元素，它是 React 应用视觉界面的最小构建块。这些元素是普通的 JavaScript 对象，创建成本低且速度快。

React.createElement 方法的签名如下： 

React.createElement(type, {props}, ...children);

其中， type 可以是标签名、React 组件类型或 React 片段。创建好元素树后，通过 ReactDOM.createRoot 创建根组件，并将其插入到 mainContainer 中，最后调用 render 方法将虚拟 DOM 树渲染到真实 DOM 上。

需要注意的是，在使用 CDN 加载 React 文件时，可能会遇到 CORS（跨源资源共享）问题。如果遇到此问题，可以将文件下载到本地，并修改 <script> 标签引用本地文件，同时移除 crossorigin 属性。

这个例子可能会让你觉得 React 代码冗长且编写麻烦，但实际上，人们通常使用 JSX 来编写 React 应用，它会使代码更易于编写。不过，理解这种底层实现方式对于在现有应用中插入 React 组件很有帮助。

下面是使用组件的改进代码： 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF - 8" />
    <title>Intro To React</title>
    <script crossorigin src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
    <script>
      function start() {
        class Bookmark extends React.Component {
          render() {
            return (
              React.createElement("li", { },
                React.createElement("h2", { }, this.props.title),
                React.createElement("a", { href : this.props.href }, this.props.description)
              )
            );
          }
        }
        const topMostComponent =
          React.createElement("div", { },
            React.createElement("h1", { }, "Bookmarks"),
            React.createElement("ul", { },
              React.createElement(
                Bookmark, { title : "Etherient", href : "https://www.etherient.com", description : "The home page of Etherient" }
              ),
              React.createElement(
                Bookmark, { title : "Frank's Site", href : "https://www.zammetti.com", description : "The web home of Frank W. Zammetti" }
              )
            )
          );
        const root = ReactDOM.createRoot(document.getElementById("mainContainer"));
        root.render(topMostComponent);
      }
    </script>
  </head>
  <body onLoad="start();">
    <div id="mainContainer"></div>
  </body>
</html>

在这个例子中，定义了一个 Bookmark 类作为 React 组件，它继承自 React.Component 类。组件必须包含一个 render 方法，该方法负责返回以下几种类型之一：
- 另一个 React 组件
- 一个 React 元素
- 上述两者的数组
- 一个片段
- 一个门户（本书不涉及）
- 一个字符串或数字（在 DOM 中渲染为纯文本节点）
- 布尔值或 null（不渲染任何内容）

通常，返回单个组件或元素是比较常见的做法。通过组件化的方式，可以避免大量重复的 React.createElement 调用，提高代码的可复用性。

4. Props：组件间的信息传递

Props 是 properties 的缩写，用于在组件之间传递信息。对于简单的 HTML 元素，props 可以是我们熟悉的元素属性，如链接的 href 或 <h2> 元素内的文本。对于自定义组件，可以定义所需的任何 props，例如在 Bookmark 组件中，定义了 title 、 href 和 description 三个 props。

关于 props，需要注意以下三点：
- 传递方向 ：总是从父组件传递到子组件。
- 传递时机 ：仅在子组件创建时传递。
- 不可变性 ：一旦设置，props 不能被更改。

当组件需要更新时，React 会重新渲染部分 DOM 树。如果状态的变化影响到了 props 的值，React 会重新创建组件并传递新的 props。

综上所述，React 通过组件化和虚拟 DOM 等机制，为开发者提供了一种高效、灵活的方式来构建 Web 应用程序。组件和 props 是 React 开发中非常重要的概念，理解它们的使用方法对于掌握 React 至关重要。后续还会进一步探讨 React 的其他方面，如 State 等。

下面是一个简单的 mermaid 流程图，展示了 React 应用的基本构建流程： 

graph LR
    A[创建 HTML 文档] --> B[引入 React 代码]
    B --> C[定义组件和 Props]
    C --> D[构建虚拟 DOM 树]
    D --> E[渲染到真实 DOM]

通过这个流程图，可以更清晰地看到 React 应用从创建到渲染的整个过程。在实际开发中，还可以根据需求进一步扩展和优化这个流程。

React 入门：从基础到实践

5. 状态管理：State

在 React 中，除了组件和 props 之外，状态（State）也是一个核心概念。状态用于存储组件的数据，并且当状态发生变化时，React 会自动重新渲染组件以反映这些变化。

下面通过一个简单的计数器示例来介绍状态的使用： 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF - 8" />
    <title>React State Example</title>
    <script crossorigin src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
    <script>
      class Counter extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            count: 0
          };
          this.increment = this.increment.bind(this);
        }

        increment() {
          this.setState({
            count: this.state.count + 1
          });
        }

        render() {
          return (
            <div>
              <p>Count: {this.state.count}</p>
              <button onClick={this.increment}>Increment</button>
            </div>
          );
        }
      }

      const root = ReactDOM.createRoot(document.getElementById('root'));
      root.render(<Counter />);
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

在这个示例中，定义了一个 Counter 组件。在 constructor 中初始化了状态 count 为 0。 increment 方法用于增加计数器的值，通过 this.setState 方法更新状态。当点击按钮时， increment 方法被调用，状态更新，React 会自动重新渲染组件，显示新的计数器值。

状态管理的要点如下：
- 初始化 ：在 constructor 中使用 this.state 初始化状态。
- 更新 ：使用 this.setState 方法更新状态，不要直接修改 this.state 。
- 响应式更新 ：状态更新会触发组件的重新渲染。

6. 样式处理

在 React 中，有多种方式可以处理样式。下面介绍几种常见的方法：

6.1 内联样式

内联样式是直接在 JSX 中使用 style 属性设置样式，示例如下： 

function App() {
  const divStyle = {
    color: 'blue',
    fontSize: '20px'
  };
  return (
    <div style={divStyle}>
      This is a styled div.
    </div>
  );
}
6.2 CSS 类名

可以通过 className 属性为组件添加 CSS 类名，示例如下： 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF - 8" />
    <title>React CSS Class Example</title>
    <style>
      .myDiv {
        color: red;
        font - size: 18px;
      }
    </style>
    <script crossorigin src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
    <script>
      function App() {
        return (
          <div className="myDiv">
            This div uses a CSS class.
          </div>
        );
      }

      const root = ReactDOM.createRoot(document.getElementById('root'));
      root.render(<App />);
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
6.3 CSS 模块

CSS 模块可以避免全局样式冲突，示例如下： 

import styles from './App.module.css';

function App() {
  return (
    <div className={styles.myDiv}>
      This div uses a CSS module.
    </div>
  );
}

不同样式处理方式的比较如下表所示：
| 样式处理方式 | 优点 | 缺点 |
| — | — | — |
| 内联样式 | 简单直接，动态样式方便 | 样式代码和 JSX 混合，难以维护 |
| CSS 类名 | 样式和 JSX 分离，易于维护 | 可能存在全局样式冲突 |
| CSS 模块 | 避免全局样式冲突，适合大型项目 | 配置相对复杂 |

7. React 开发工具

在 React 开发过程中，有一些实用的开发工具可以提高开发效率。

7.1 React Developer Tools

React Developer Tools 是 Chrome 浏览器的一个扩展，它可以帮助开发者调试 React 应用。通过该工具，开发者可以查看组件树、检查组件的 props 和 state 等信息。

安装步骤如下：
1. 打开 Chrome 浏览器，访问 Chrome 应用商店。
2. 搜索 “React Developer Tools” 并安装。
3. 在开发 React 应用时，打开开发者工具，会看到 React 标签页。

7.2 ESLint 和 Prettier

ESLint 用于检查代码中的语法错误和潜在问题，Prettier 用于格式化代码，使代码风格一致。

配置步骤如下：
1. 安装 ESLint 和 Prettier： 

npm install eslint prettier --save - dev
  1. 初始化 ESLint 配置： 
npx eslint --init
  1. 配置 Prettier，创建 .prettierrc 文件，示例配置如下： 
{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true
}
  1. 在 package.json 中添加脚本： 
{
  "scripts": {
    "lint": "eslint src",
    "format": "prettier --write src"
  }
}
8. 总结与展望

React 作为一个强大的 JavaScript 库，通过组件化、虚拟 DOM、状态管理等机制，为开发者提供了高效、灵活的 Web 应用开发方式。组件、props、状态和样式处理是 React 开发的核心内容，掌握它们的使用方法对于构建复杂的 React 应用至关重要。

下面是一个 mermaid 流程图，展示了 React 开发的整体流程： 

graph LR
    A[项目初始化] --> B[组件设计]
    B --> C[状态管理]
    C --> D[样式处理]
    D --> E[开发工具调试]
    E --> F[部署上线]

在未来的 React 开发中，还可以进一步探索更多高级特性，如 Hooks、Context API 等，以应对更复杂的业务需求。同时，结合其他前端技术和框架，如 Redux、React Router 等，可以构建出功能更强大、体验更流畅的 Web 应用。希望通过本文的介绍，能帮助你快速入门 React 开发，开启精彩的前端之旅。

关注
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值