React 详解【 JSX + 组件 + prop、state、ref + 事件 + 生命周期 + React Ajax + React Router路由 + Redux】

最新推荐文章于 2025-04-06 22:05:32 发布

0oIronhide

最新推荐文章于 2025-04-06 22:05:32 发布

阅读量1.1k

点赞数 2

文章标签： react javascript

本文链接：https://blog.youkuaiyun.com/qq_38599840/article/details/107915640

版权

本文深入讲解React库的核心概念，包括组件、状态管理、虚拟DOM、生命周期及路由等，辅以实例解析，帮助开发者掌握React应用构建技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

React 是什么
安装 React
- 安装步骤：
React 中的元素渲染
React JSX
- 使用 JSX 的好处：
- 使用 React JSX
React 组件
- 渲染组件
- 复合组件
- 组件的三大属性（state、props、refs）
组件内的事件
- 事件函数的使用
组件的生命周期
- 组件三个生命周期状态
- 生命周期方法与流程
- 重要的生命周期方法
虚拟DOM 与 DOM Diff 算法
React Ajax
- 说明
- 常用的 Ajax 请求库
- - 在 Reate 中使用 Ajax
- Fetch
组件间的通信
- 消息订阅发布机制
- 使用
React-router
- 介绍
- SPA 应用的理解
- 对路由的理解
- - 路由是什么？
  - 路由分类（前台路由、后台路由）
- 前台路由实现
- React-router 相关 API
- 组件
- 路由基本使用
- 嵌套路由的使用
- 向路由组件中传递参数
Redux
- Redux 是什么
- Redux 工作流程
- 什么情况下需要使用 redux
- 对 state 进行增减的案例代码：
react-redux

React 是什么

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

安装 React

在安装 React 之前需要安装 nodejs，之后使用 node 中的 npm 命令来搭建 Reate 运行环境

安装步骤：

安装 nodejs
安装淘宝定制的 cnpm 命令，使用 cnpm 代替 npm，速度会快很多：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org
使用 $ cnpm install [name] 来安装你想要的模块
使用 create-react-app 快速构建 React 开发环境：
$ cnpm install -g create-react-app

$ create-react-app my-app 创建 create 项目
$ cd my-app/
$ npm start

访问 http://localhost:3000/ 即可看到效果

React 中的元素渲染

例如：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>

<div id="example"></div>

<script type="text/babel">
    const element = <h1>Hello, world!</h1>;

    ReactDOM.render(
        element,
        document.getElementById('example')
    );
</script>
</body>

</html>

React 通过方法ReactDOM.render()将元素 element 渲染到 id 为 example 的标签内，当然也可同时定义多个 div 进行多次渲染，例如：

<div id="example" style="width: 100px; height: 100px; background-color: antiquewhite;"></div>
<div id="example2" style="width: 100px; height: 100px; background-color:aqua"></div>
<div id="example3" style="width: 100px; height: 100px; background-color:aquamarine"></div>

<script type="text/babel">
    const element = <h1>Hello, world!</h1>;
    const element2 = <h2>Hello, world!</h2>;
    const element3 = <h3>Hello, world!</h3>;

    ReactDOM.render(
        element,
        document.getElementById('example')
    );
    ReactDOM.render(
        element2,
        document.getElementById('example2')
    );
    ReactDOM.render(
        element3,
        document.getElementById('example3')
    );
</script>

React JSX

在 React 中使用 JSX 来替代常规的 JavaScript，例如代码const element = <h1>Hello, world!</h1>;就是 JSX 语言，像是传统 js 与 html 的结合，JSX 的作用就是声明 React 当中的元素，例如用变量 element 指向声明的元素，之后要使用该元素的话，直接用 element 就好了。

JSX 是 JavaScript 的语法扩展。推荐在 React 中使用 JSX 来描述用户界面。
JSX 是在 JavaScript 内部实现的。
JSX 定义的元素是普通的对象，React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致。

使用 JSX 的好处：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

注意：由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性，这是因为 class 和 for 是 JavaScript 的保留字。

使用 React JSX

JSX 中可定义多个元素，例如：

const element = (
  <div>
    <h1>Hello</h1>
    <h2>Good to see you</h2>
  </div>
);

在 JSX 中嵌入 {} 表达式，可在大括号 {} 内放置任何有效的 js 表达式，例如算式、user.userName等等

<body>
<div id="example"></div>

<script type="text/babel">
    const user = {
    userName: "张三", age: "18" };
    const element = <h1>Hello, {
   user.userName}</h1>;

    ReactDOM.render(
        element,
        document.getElementById('example')
    );
</script>
</body>

效果为：
在这里插入图片描述

React 组件

Reate 的组件相当于 js 中的函数

定义方式1：看下面代码块，React 定义了一个组件，该组件接收一个prarm参数，返回一个元素。这类组件被称为“函数组件”，因为它本质上就是 js函数。

function ReturnMessage(prarm) {
   
    return <h3>hello, {
   prarm.name}</h3>;
}

定义方式2：下面代码块使用 ES6 的 class 来定义组件，使用 class 来定义组件会有额外特性，之后介绍。

class Welcome extends React.Component {
   
  render() {
   
    return <h1>Hello, {
   this.props.name}</h1>;
  }
}

渲染组件

React 元素也可以是用户自定义的组件：const element3 = <ReturnMessage name="张三" />;，看以下代码块：

<body>
<div id="example3"></div>

<script type="text/babel">
    function ReturnMessage(props) {
    
    	return <h3>hello, {
    props.name}</h3>;
	}

    const element3 = <ReturnMessage name="张三" />;

    ReactDOM.render(
        element3,
        document.getElementById('example3')
    );
</script>
</body>

当 React 元素（JSX）为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。这段代码会在页面上渲染 hello, 张三。

注意，原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 ReturnMessage不能写成 returnMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。

复合组件

看以下代码，复合组件就像层层方法调用，在 App() 中调用了 Name() 与 Age() 组件，在 ReactDOM.render() 中调用 App() 组件。

<body>
<div id="example2" style="width: 100px; height: 100px; background-color:aqua"></div>

<script type="text/babel">
    const element2 = <h2>Hello, world!</h2>;
    
    ReactDOM.render(
        <App />,
        document.getElementById('example2'

最低0.47元/天解锁文章