React 前端框架操作指南

🕗 发布于 2024-10-13 04:49 前端框架

在现代前端开发中，React 由于其灵活性和高效性，成为了最受欢迎的 JavaScript 库之一。它使开发者能够创建复杂的用户界面，利用组件复用的特性，把 UI 切分成可管理和可重用的小部分。这篇指南旨在深入浅出地介绍 React 的基本概念、环境配置和实际操作案例，以助力读者掌握这一强大的工具。

1. React 简介

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发和维护。它使用组件化的方式来开发，允许开发者将 UI 拆分成独立、可重用的部分，并在每个部分之间管理状态和行为。

1.1 组件化

在 React 中，组件是构建 UI 的基本单元。每个组件都有自己的状态和生命周期，负责渲染和更新相应的 UI。

1.2 虚拟 DOM

React 使用虚拟 DOM 来优化性能。每当组件的状态或属性发生变化时，React 首先在内存中更新一个虚拟 DOM，然后将其与真实 DOM 进行比较，最后只对实际需要更新的部分进行修改，从而提升性能。

2. 环境配置

在开始实际编写 React 应用之前，我们需要配置开发环境。

2.1 安装 Node.js

首先，你需要确保你的机器上已安装 Node.js。可以通过以下命令来检查 Node.js 是否安装成功：

node -v

2.2 创建 React 应用

创建 React 应用最简单的方法是使用 create-react-app，这是一个官方支持的脚手架工具，能够快速搭建一个现代化的 React 开发环境。

打开终端，运行以下命令：

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

上述命令会创建一个名为 my-react-app 的新文件夹，并在其中生成一个基本的 React 应用。npm start 会启动开发服务器，打开浏览器查看效果。

3. 了解项目结构

在创建的 my-react-app 项目中，主要关注以下几个文件和文件夹：

public/：包含静态文件，比如 HTML、图标等。
src/：存放所有 React 组件、样式及其他 JavaScript 文件的地方。
src/index.js：应用的入口文件。
src/App.js：主应用组件。
package.json：管理项目依赖和配置的文件。

4. 创建一个简单的计数器应用

4.1 创建组件

接下来，我们将创建一个简单的计数器应用，其中包括增加和减少计数的功能。

在 src/ 文件夹下，新建一个 Counter.js 文件，创建计数器组件。

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0); // 初始化 state

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h1>计数器</h1>
      <p>当前计数: {count}</p>
      <button onClick={increment}>增加</button>
      <button onClick={decrement}>减少</button>
    </div>
  );
};

export default Counter;

4.2 将组件引入主应用中

打开 src/App.js，将 Counter 组件引入并使用它：

import React from 'react';
import Counter from './Counter'; // 引入组件

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

export default App;

4.3 查看效果

在终端中确保开发服务器正在运行，打开浏览器地址 http://localhost:3000，你将看到计数器组件。点击“增加”和“减少”按钮，观察数字变化。

5. 使用 Props 传递数据

进入下一步，我们将修改计数器，使其可以接收初始化的计数值作为 Prop（属性）。

5.1 修改 Counter 组件

首先，在 Counter.js 中修改组件以接收初始计数，并使用 props 赋值：

import React, { useState } from 'react';

const Counter = ({ initialCount = 0 }) => { // 接收初始计数
  const [count, setCount] = useState(initialCount);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h1>计数器</h1>
      <p>当前计数: {count}</p>
      <button onClick={increment}>增加</button>
      <button onClick={decrement}>减少</button>
    </div>
  );
};

export default Counter;

5.2 在主应用中传递 Prop

在 App.js 中传递 props：

import React from 'react';
import Counter from './Counter'; // 引入组件

function App() {
  return (
    <div className="App">
      <Counter initialCount={5} /> {/* 传递初始计数 */}
    </div>
  );
}

export default App;

6. 处理事件

React 的事件处理模型与原生 DOM 事件相比稍有不同。在 React 中，事件是通过属性的形式传递的。

6.1 修改按钮样式

可以为按钮添加一些样式，提升用户体验。首先在 Counter.js 中使用内联样式：

const buttonStyle = {
  margin: '5px',
  padding: '10px 20px',
  fontSize: '16px',
};

return (
  <div>
    <h1>计数器</h1>
    <p>当前计数: {count}</p>
    <button style={buttonStyle} onClick={increment}>增加</button>
    <button style={buttonStyle} onClick={decrement}>减少</button>
  </div>
);

6.2 处理复杂事件

React 支持的事件处理比较灵活，经常在回调中传递参数。我们可以制作一个重置功能，重置计数到初始值。

在 Counter.js 中添加重置功能：

const reset = () => {
  setCount(initialCount);
};

<button style={buttonStyle} onClick={reset}>重置</button>

7. 组件的生命周期

React 组件有一个生命周期，可以通过生命周期方法来执行特定的操作。对于使用函数组件的开发者，推荐使用 React Hooks 来处理状态和副作用。

7.1 使用 effect 钩子

假设我们希望在组件首次渲染时发送请求（伪代码），我们可以使用 useEffect 钩子：

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

const Counter = ({ initialCount = 0 }) => {
  const [count, setCount] = useState(initialCount);

  useEffect(() => {
    console.log(`当前计数: ${count}`);
    // 通常在这里进行数据请求等副作用处理...
  }, [count]); // 依赖项为 count，当 count 改变时会执行

  // 其余组件代码...
};

8. 组件的 CSS 样式

为了使应用更美观，我们可以为组件添加样式。React 支持多种方式来进行样式的管理，以下是几种常见方式。

8.1 CSS Modules

使用 CSS Modules 为组件增强样式。在 src 文件夹中创建一个名为 Counter.module.css 的文件：

.counter {
  text-align: center;
}

.button {
  margin: 5px;
  padding: 10px 20px;
  font-size: 16px;
}

在 Counter.js 中引入样式：

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

return (
  <div className={styles.counter}>
    <h1>计数器</h1>
    <p>当前计数: {count}</p>
    <button className={styles.button} onClick={increment}>增加</button>
    <button className={styles.button} onClick={decrement}>减少</button>
    <button className={styles.button} onClick={reset}>重置</button>
  </div>
);

8.2 styled-components

如果希望使用 CSS-in-JS，styled-components 是一个流行的库。在项目中执行以下命令安装之：

npm install styled-components

然后你可以在 Counter.js 中这样使用：

import styled from 'styled-components';

const Button = styled.button`
  margin: 5px;
  padding: 10px 20px;
  font-size: 16px;
`;

return (
  <div>
    <h1>计数器</h1>
    <p>当前计数: {count}</p>
    <Button onClick={increment}>增加</Button>
    <Button onClick={decrement}>减少</Button>
    <Button onClick={reset}>重置</Button>
  </div>
);

9. 并发模式

React 的并发模式（Concurrent Mode）是一个正在开发中的特性，旨在提高应用的响应性。虽然目前仍在实验阶段，但它将会让我们能同时为多个 UI 更新进行优化。

9.1 简要介绍

并发模式允许 React 中断和恢复渲染以保持流畅的用户体验。利用该功能，您可以让 React 针对用户与应用的交互优先处理重要更新。

目前大多数功能仍在开发中，建议关注后续文档以获得最新信息。

10. 路由管理

对单页面应用（SPA）来说，路由管理是必不可少的。使用 react-router-dom 可以轻松实现路由功能。

10.1 安装 React Router

在项目中加入 React Router：

npm install react-router-dom

10.2 配置路由

将 src/App.js 修改为使用路由：

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Counter from './Counter';

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">首页</Link>
        <Link to="/counter">计数器</Link>
      </nav>
      <Switch>
        <Route path="/counter">
          <Counter initialCount={5} />
        </Route>
        <Route path="/">
          <h1>欢迎使用 React 应用</h1>
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

10.3 访问路由

启动应用后，访问首页和计数器页面，查看路由切换的效果。

11. 代码拆分与懒加载

大型应用中可能会有很多组件，为提升性能，我们可以使用代码拆分和懒加载。

11.1 使用 React.lazy 和 Suspense

在 App.js 中将计数器组件懒加载：

import React, { Suspense, lazy } from 'react';
const Counter = lazy(() => import('./Counter'));

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">首页</Link>
        <Link to="/counter">计数器</Link>
      </nav>
      <Suspense fallback={<div>加载中...</div>}>
        <Switch>
          <Route path="/counter">
            <Counter initialCount={5} />
          </Route>
          <Route path="/">
            <h1>欢迎使用 React 应用</h1>
          </Route>
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

12. 与后端的交互

最后，我们还需要学习如何与后端 API 交互，以便获取和发送数据。

12.1 使用 Fetch API

我们可以在 Counter.js 组件中增加对外部数据的请求。例如，假设我们要获取初始计数的数据：

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

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

  useEffect(() => {
    fetch('https://api.example.com/initial-count')
      .then((response) => response.json())
      .then((data) => {
        setCount(data.count); // 假设 API 返回一个 count 字段
      });
  }, []);

  return (
    <div>
      <h1>计数器</h1>
      <p>当前计数: {count}</p>
      {/* 其他代码 */}
    </div>
  );
};

export default Counter;

12.2 处理状态与错误

在实际开发中，处理数据的加载状态和错误是非常重要的。可以引入状态管理来控制加载状态：

const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
  fetch('https://api.example.com/initial-count')
    .then((response) => {
      if (!response.ok) {
        throw new Error('网络错误');
      }
      return response.json();
    })
    .then((data) => {
      setCount(data.count);
    })
    .catch((error) => {
      setError(error);
    })
    .finally(() => {
      setLoading(false);
    });
}, []);

return (
  <div>
    {loading && <p>加载中...</p>}
    {error && <p>发生错误: {error.message}</p>}
    <h1>计数器</h1>
    <p>当前计数: {count}</p>
    {/* 其他代码 */}
  </div>
);

通过本指南，我们对 React 前端框架进行了深入的探讨，从组件的创建到路由的管理，再到 API 的交互，逐步展示了 React 的便捷与强大。React 的学习之旅并没有结束，随着新特性的不断推出，持续学习和实践是开发者保持竞争力的关键。希望你能在 React 的世界中不断探索，创造出更多优秀的项目！

原文地址：https://blog.csdn.net/vvvae1234/article/details/142873843

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：【深度学习】经典的深度学习模型-02 ImageNet夺冠之作: 神经网络AlexNet
下一篇：ZYNQ使用XGPIO驱动外设模块(前半部分)

qiankun 主项目和子项目都是 vue2，部署在同一台服务器上，nginx 配置
在部署主应用和子应用时，遇到主应用转发到子应用时，静态资源无法访问的问题，重点是查看子应用publicPath这个配置，这个是静态文件的访问前缀，如果部署到服务器上，子应用的静态资源无法访问到，可以看
阅读更多2024-10-14
Android中Fragment的使用场景与生命周期
此外，还有一些特殊情况下会调用的生命周期方法，如onSaveInstanceState(Bundle outState)，它用于保存Fragment的状态，以便在Activity重新创建时恢复Frag
阅读更多2024-10-14
深度学习 shape 属性
在 MXNet 的ndarray中，shape属性用于获取数组的维度信息。它返回一个表示数组各维度大小的元组，可以帮助了解数据的结构和形状。
阅读更多2024-10-14
Java 一维数组作为函数参数
/同理五个数据只是偶然，可能会更多。printf("第%d个你输入的值%d\n", i + 1, a[i]);printf("第%d个你输入的值%d\n",i+
阅读更多2024-10-14
MySQL 之事务隔离级别
不同的事务隔离级别在数据一致性和并发性能之间进行了不同的权衡。如果需要保证一定的数据一致性，可以选择可重复读；如果对数据一致性要求极高，可以选择串行化，但要注意其对并发性能的影响。同时，还可以通过合理
阅读更多2024-10-14
Gin框架简易搭建(4)--项目开发
很快将对投票验证信息以及录入活动和参赛者的功能将在后续实现。
阅读更多2024-10-14
【数据结构与算法】9. 二叉树的基本操作
🙏小杨水平有限，欢迎各位大佬指点，相互学习进步！小杨近些在学习人工智能方面的知识,发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。。
阅读更多2024-10-14
数据结构：红黑树
前面我们介绍了AVL树来解决搜索二叉树不平衡的问题，今天我们带来一种新的解决方案，同时，这种解决方案在实践中比AVL树更常用，这种数据结构就是红黑树。
阅读更多2024-10-14
如何使用Pandas库处理大型数据集？
在使用Pandas处理大型数据集时，合理利用内存和计算资源是关键。通过使用分块加载、减少不必要的数据列、优化数据类型以及结合并行化处理等技术，你可以有效地处理更大的数据集而不耗尽系统资源。
阅读更多2024-10-14
《PyTorch深度学习快速入门教程》学习笔记（第16周）
本周报的目的在于汇报《PyTorch深度学习快速入门教程》课程第二周的学习成果，主要聚焦于Tensorboard的使用以及其相关内容。在这本周的学习中，课程内容主要涵盖了Tensorboard使用，包
阅读更多2024-10-14