web开发：一文教你步进式、快速掌握React - 前端开发

本文链接：https://blog.youkuaiyun.com/minstbe/article/details/144302479

前端框架五花八门，前浪拍死后浪，大浪淘沙之后，基本上被React 和 VUE统治大半江山。在用了7年地VUE之后，今年开始用了下React ，然后我已不打算用将来使用VUE了。（仅个人感受）

今天我们一起来步进式了解并学东React ，虽然很多人认为React 地学习曲线比VUE陡峭，但是希望看了这篇文章，让你地学习曲线平缓许多。

首先我们需要了解 NPX

npx 是一个随 Node.js 安装的工具，通常与 npm 一起使用。它的主要作用是执行安装在本地或远程的 Node.js 包，而无需全局安装该包或使用完整的路径。简而言之，npx 允许你执行包中的命令，而不必显式安装它们或将它们作为全局依赖进行安装。

npx 是随 Node.js 和 npm 一起安装的，因此如果你已经安装了 Node.js，就已经自动安装了 npx。你可以通过以下命令检查是否已安装 npx：

npx --version

好了现在我们开始来进入React的世界。

关于React，少许介绍几句：

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook（现在的 Meta）开发并维护。它使得开发复杂的、动态的用户界面变得更加简单和高效，尤其适用于单页应用（SPA）。

React 的核心特点包括组件化开发、虚拟 DOM 和声明式编程等。React 提供了组件化的开发方式，使得开发更加模块化、可维护。

下面是一个由浅入深的 React 学习指南，带有代码演示，帮助你逐步理解 React 的核心概念。

1. 安装 React 环境

首先，需要在项目中安装 React。如果你还没有创建 React 项目，可以通过 create-react-app 工具来初始化项目。

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

上述命令创建了一个React项目，并自动进行了一些初始化的配置。下图可见，它安装了 react、react-dom 以及启动的script等等模块，这使得我们的前端web基本布局被自动完成了，一个字：爽呆了！

安装完毕后我们发现可以使用如下这些命令：

npm start

上面的命令是启动这个开发环境，以便我们可以开发、编辑这个项目

npm run  build

上面这个命令是在你开发完之后，将所有的页面、脚本、css 、静态资源进行打包，在项目根目录的/dist 下会生成整个项目的静态代码包，将这个包上传到一个webserver中就可以根据相应的目录访问你的网站了。

下面我们是以开发状态来介绍，也就是 npm start 后的开发状态。

运行 npm start 后，你就可以在浏览器中访问 http://localhost:3000 来看到一个简单的 React 页面。

就这么简单，你的react web项目启动了！

2. 创建一个简单的组件

在 React 中，最基本的概念是组件。组件是构建界面的核心。每个组件可以是一个函数或者类。

下面是一个简单的函数组件，它返回一个 "Hello, World!" 的标题：

因为前面我们安装了React 的app 模板页面，所以一切都配置好了，因此很难让我们理解其中的结构。

现在我们手动来编辑页面，找到src/App.js ,用下面的代码替换App.js内所有的代码：

import React from 'react';

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

export default HelloWorld;

解释：

import React from 'react'; 是导入 React 库。
HelloWorld 是一个函数组件，它返回一个 JSX（JavaScript XML）元素。JSX 语法看起来很像 HTML，但它是 JavaScript 的一种扩展语法。
export default HelloWorld; 使得这个组件可以在其他文件中被导入。

这个时候你就看到了 Hello，World！

然后---------------------尝试将App.js 里面的代码改成下面这样：

import React from 'react';
const text = "欢迎你来到这个世界"

function HelloWorld() {
  return <h1>{text}</h1>;
}

export default HelloWorld;

没错你看到下面这样：

注意到没有，我们用变量来绑定了html输出的文字。 text => 欢迎来到这个世界。这样你就理解了动态网页了吧？

3. 使用组件

React 组件可以在其他组件中被嵌套。默认情况下，create-react-app 会生成一个 App.js 文件，我们可以将 HelloWorld 组件放入 App.js 中。

我们在src目录下先创建一个HelloWorld.js 的文件：

import React from 'react';

function HelloWorld() {
  return <h1>这是一个模板文件</h1>;
}

export default HelloWorld;

上面的代码定义了一个HelloWorld 的组件，并使用export 进行来的导出。在下面的App.js中，导入这个模板：

import React from 'react';
import HelloWorld from './HelloWorld';  // 导入 HelloWorld 组件

function App() {
  return (
    <div>
      <HelloWorld />
    </div>
  );
}

export default App;

解释：

App 组件包含了 HelloWorld 组件，它会显示 HelloWorld 中的内容。

一般情况下我们会建立一个components的文件夹来放置模板文件。

4. 使用 State 来管理动态数据

React 的一个重要特性是 state，它允许组件管理动态数据。当数据发生变化时，React 会自动重新渲染界面。

下面是一个有按钮的组件，点击按钮时，文本内容会改变：

import React, { useState } from 'react';

function Counter() {
  // 使用 useState 来声明一个 state 变量和更新该变量的函数
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>当前计数: {count}</h1>
      <button onClick={() => setCount(count + 1)}>增加</button>
      <button onClick={() => setCount(count - 1)}>减少</button>
    </div>
  );
}

export default Counter;

解释：

useState(0) 是 React 的一个 Hook，它初始化 count 为 0，并返回一个包含当前值和更新该值的函数。
setCount(count + 1) 会更新 count 的值，从而触发组件的重新渲染。

5. 组件的生命周期

组件的生命周期指的是一个组件从创建到销毁的整个过程。React 类组件提供了生命周期方法，例如 componentDidMount、componentWillUnmount 等。而在函数组件中，可以使用 useEffect Hook 来模拟这些生命周期方法。

例如，我们可以使用 useEffect 来在组件加载时执行一些代码：

import React, { useState, useEffect } from 'react';

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setTime(time => time + 1); // 每秒更新计时器
    }, 1000);

    // 组件卸载时清除定时器
    return () => clearInterval(intervalId);
  }, []);

  return <h1>秒数: {time}</h1>;
}

export default Timer;

解释：

useEffect 在组件首次渲染后执行，模拟了 componentDidMount。
clearInterval(intervalId) 用来清除定时器，模拟 componentWillUnmount。

6. 事件处理

React 中的事件处理与原生 JavaScript 略有不同。React 采用的是小写的事件名称，并使用 camelCase（驼峰命名法）。

例如，下面是一个处理点击事件的例子：

import React, { useState } from 'react';

function ClickButton() {
  const [message, setMessage] = useState('');

  const handleClick = () => {
    setMessage('按钮已被点击！');
  };

  return (
    <div>
      <button onClick={handleClick}>点击我</button>
      <p>{message}</p>
    </div>
  );
}

export default ClickButton;

解释：

onClick 是事件处理函数。当按钮被点击时，handleClick 函数会被调用，setMessage 更新 message。

这里需要着重解释一下这一行：

const [count, setCount] = useState(0);

这行代码是 React 中的一个 React Hook，它使用了 useState 来创建一个状态变量，并初始化为 0。它的目的是在函数组件中管理状态。

我们来逐步解释这行代码的含义。

1. `useState(0)`

useState 是 React 提供的一个 Hook，用来在函数组件中添加状态。它的作用是声明一个状态变量，并返回该变量的当前值和一个更新该值的函数。

useState 接受一个参数，这个参数是初始值。这里，0 是 count 的初始值。
useState 返回一个数组，数组的第一个元素是当前的状态值，第二个元素是一个函数，用于更新该状态。

const [state, setState] = useState(initialValue);

2. 数组解构

useState 返回的是一个数组，数组的第一个元素是状态的当前值，第二个元素是更新该状态的函数。在这行代码中，使用了 数组解构赋值 来提取这两个值：

const [count, setCount] = useState(0);

count：当前状态值，初始化为 0。
setCount：更新 count 状态的函数。

3. 初始化值 `0`

useState(0) 中的 0 是状态的初始值。React 会在组件首次渲染时将 count 的初始值设为 0。之后，count 的值可以通过 setCount 来修改。

4. 如何更新状态

当你希望更新 count 的值时，可以调用 setCount 函数，并传入新的值。例如：

setCount(count + 1);  // 将 count 增加 1

这会触发组件重新渲染，并更新 UI 中显示的 count 值。

useState 是 React Hook，用来在函数组件中管理状态。
useState 返回两个值：当前的状态值和一个用于更新该状态的函数。
setCount 用来更新 count 的值，React 会自动重新渲染组件，反映新的状态。

7. 条件渲染

在 React 中，你可以根据条件渲染不同的内容。你可以使用 JavaScript 的条件语句来实现这一点。

例如，以下是一个根据用户登录状态显示不同内容的示例：

import React, { useState } from 'react';

function UserProfile() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? (
        <h1>欢迎回来，用户！</h1>
      ) : (
        <h1>请登录</h1>
      )}
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? '登出' : '登录'}
      </button>
    </div>
  );
}

export default UserProfile;

解释：

使用 JavaScript 的 ? : 三元运算符来根据 isLoggedIn 的值显示不同的内容。

8. 列表渲染

React 可以动态渲染列表。在 JSX 中，我们通常使用 map() 方法来渲染数组。

例如，下面的代码渲染一个数字列表：

import React from 'react';

function NumberList() {
  const numbers = [1, 2, 3, 4, 5];

  return (
    <ul>
      {numbers.map((number) => (
        <li key={number}>{number}</li>
      ))}
    </ul>
  );
}

export default NumberList;