当前位置: 首页 > news >正文

深入了解 React:从入门到高级应用

深入了解 React:从入门到高级应用

React 是由 Facebook 开发并维护的一个开源 JavaScript 库,用于构建用户界面。自2013年发布以来,React 在前端开发领域迅速崛起,成为最受欢迎的 UI 构建工具之一。无论是小型的单页应用(SPA)还是复杂的大型企业级应用,React 都能提供高效、灵活的解决方案。本文将全面、详细地介绍 React,包括其核心概念、工作原理、最佳实践以及生态系统。

目录:

  • 深入了解 React:从入门到高级应用
    • React 简介
      • React 的特点:
    • React 核心概念
      • 组件(Component)
        • 函数组件
        • 类组件
      • JSX
      • Props 和 State
        • Props
        • State
      • 生命周期
      • Hooks
    • React 渲染机制
      • 虚拟 DOM
      • React Fiber
    • React 生态系统
      • React Router
      • Redux
      • React Query
    • React 性能优化
    • React 测试
    • React 与其他框架的对比
      • React vs Angular
      • React vs Vue
    • React 进阶话题
      • Context API
      • Suspense 和 Concurrent Mode
      • 服务端渲染(SSR)
    • 总结

React 简介

React 是一个用于构建用户界面的 JavaScript 库。它通过组件化的思想将 UI 拆分成独立、可复用的模块,提升了开发效率并增强了应用的可维护性。React 不仅仅是一个视图层的框架,它还通过 React DOM 和 React Native 提供了跨平台的开发能力。

React 的特点:

  • 组件化:React 强调 UI 的组件化,组件是构建 React 应用的核心。每个组件管理自己的一部分 UI 和状态,可以在多个地方复用。
  • 声明式 UI:React 通过声明式的编程方式让 UI 随状态变化而自动更新。开发者不需要手动操作 DOM,React 会自动高效地更新视图。
  • 单向数据流:React 提供单向数据流的模式,数据从父组件流向子组件,避免了双向数据绑定可能引发的复杂性和性能问题。

React 核心概念

组件(Component)

React 的基本构建块是组件,组件可以是函数组件或类组件。函数组件是 React 中推荐的写法,使用起来更加简洁、灵活,并且可以通过 Hooks 实现更多功能。

函数组件
import React from 'react';const Greeting = ({ name }) => {return <h1>Hello, {name}!</h1>;
};export default Greeting;
类组件

虽然函数组件已经成为主流,但类组件依然被广泛使用,尤其是在处理生命周期或某些旧的 React 项目中。

import React, { Component } from 'react';class Greeting extends Component {render() {return <h1>Hello, {this.props.name}!</h1>;}
}export default Greeting;

JSX

JSX(JavaScript XML)是 React 推荐使用的语法扩展,它允许在 JavaScript 中直接书写类似 HTML 的标记。JSX 并不是一个新的语言,它只是 JavaScript 的语法糖。通过 Babel 等工具,JSX 最终会被转换为 React.createElement 函数调用。

const element = <h1>Hello, world!</h1>;

Props 和 State

Props

Props 是“属性”的缩写,表示组件外部传递给组件的数据。Props 是只读的,不能在组件内部修改。Props 的作用类似于函数的参数。

const Welcome = ({ name }) => {return <h1>Hello, {name}!</h1>;
};<Welcome name="React" />;
State

State 是组件内部的数据,通常用于保存用户交互或生命周期变化的结果。State 是可变的,改变 State 会触发组件重新渲染。

import React, { useState } from 'react';const Counter = () => {const [count, setCount] = useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
};

生命周期

React 类组件有生命周期方法,分别在组件挂载、更新和卸载时调用。在函数组件中,通过 useEffect Hook 来模拟生命周期行为。

class MyComponent extends React.Component {componentDidMount() {console.log('Component mounted');}componentDidUpdate() {console.log('Component updated');}componentWillUnmount() {console.log('Component will unmount');}render() {return <div>My Component</div>;}
}

对于函数组件,可以使用 useEffect 来模拟生命周期方法:

import React, { useEffect } from 'react';const MyComponent = () => {useEffect(() => {console.log('Component mounted');return () => {console.log('Component will unmount');};}, []); // 空数组表示只在挂载和卸载时执行return <div>My Component</div>;
};

Hooks

React 16.8 引入了 Hooks,函数组件可以通过 Hooks 实现更多的功能,最常用的 Hooks 包括:

  • useState:用于管理组件状态
  • useEffect:用于处理副作用(如数据获取、DOM 操作等)
  • useContext:用于访问上下文(Context)
  • useReducer:用于更复杂的状态管理
  • useMemouseCallback:用于性能优化
import React, { useState, useEffect } from 'react';const Example = () => {const [count, setCount] = useState(0);useEffect(() => {document.title = `You clicked ${count} times`;}, [count]);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
};

React 渲染机制

虚拟 DOM

React 使用虚拟 DOM 来提高性能。虚拟 DOM 是 React 对真实 DOM 的一种抽象,它在内存中模拟了 UI 的结构。当组件的 state 或 props 改变时,React 会首先在虚拟 DOM 中计算出变化,然后将最小的差异更新到真实 DOM。这样可以避免不必要的 DOM 操作,从而提高性能。

React Fiber

React Fiber 是 React 16 引入的一种新的渲染引擎,主要用于优化 React 渲染的性能,尤其是大规模应用中的渲染过程。它将渲染任务切割成小块,分批次处理,这样可以提高 UI 响应速度,避免长时间的 UI 卡顿。


React 生态系统

React Router

React Router 是 React 的官方路由库,用于处理 SPA(单页应用)的路由。通过 React Router,可以在应用中创建不同的页面组件,并根据 URL 的变化来切换不同的视图。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';const App = () => (<Router><Switch><Route path="/" exact component={Home} /><Route path="/about" component={About} /></Switch></Router>
);

Redux

Redux 是一个流行的状态管理库,适用于需要跨多个组件共享状态的应用。它通过统一的 store 管理全局状态,并通过 dispatch 分发 action 来改变状态。

// Redux 示例代码
const initialState = { count: 0 };const reducer = (state = initialState, action) => {switch (action.type) {case 'INCREMENT':return { count: state.count + 1 };default:return state;}
};const store = createStore(reducer);

React Query

React Query 是一个强大的数据获取库,专门用于处理与服务器的数据交互,它支持缓存、自动重试、分页等功能。

import { useQuery } from 'react-query';const fetchData = async () => {const response = await fetch('https://api.example.com/data');return response.json();
};const DataFetchingComponent = () => {const { data, isLoading } = useQuery('data', fetchData);if (isLoading) return <div>Loading...</div>;return <div>Data: {JSON.stringify(data)}</div>;
};

React 性能优化

  1. PureComponentReact.PureComponentReact.Component 的一个优化版,它通过浅比较 props 和 state 来决定是否需要重新渲染加载组件,从而减少不必要的渲染。
import React, { PureComponent } from 'react';class MyComponent extends PureComponent {render() {return <div>{this.props.name}</div>;}
}
  1. React.memo:对于函数组件,可以使用 React.memo 来实现类似于 PureComponent 的效果,即通过浅比较 props 来优化性能。
const MyComponent = React.memo(({ name }) => {return <div>{name}</div>;
});
  1. useMemo 和 useCallback:这两个 Hook 可以用来优化性能,避免不必要的计算和函数重建。
  • useMemo 用于缓存计算结果,避免每次渲染时都进行昂贵的计算。
import React, { useMemo } from 'react';const MyComponent = ({ data }) => {const expensiveCalculation = useMemo(() => {return data.reduce((acc, item) => acc + item, 0);}, [data]);return <div>{expensiveCalculation}</div>;
};
  • useCallback 用于缓存函数,避免每次渲染时都创建新的函数引用,适用于传递给子组件的回调函数。
import React, { useCallback } from 'react';const MyComponent = ({ onClick }) => {const handleClick = useCallback(() => {console.log('Button clicked');onClick();}, [onClick]);return <button onClick={handleClick}>Click me</button>;
};
  1. Lazy Loading(懒加载):使用 React.lazySuspense 可以实现组件的懒加载,只有当组件需要渲染时才加载相关代码,减少初始加载时间。
import React, { Suspense, lazy } from 'react';const MyComponent = lazy(() => import('./MyComponent'));const App = () => {return (<Suspense fallback={<div>Loading...</div>}><MyComponent /></Suspense>);
};

React 测试

React 提供了多种测试工具和方法,用于保证代码的质量和稳定性。

  1. Jest:Jest 是 React 推荐的测试框架,支持单元测试、集成测试和快照测试等功能。
// Counter.js
import React, { useState } from 'react';const Counter = () => {const [count, setCount] = useState(0);return (<div><p>{count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
};export default Counter;
// Counter.test.js
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Counter from './Counter';test('increments counter', () => {const { getByText } = render(<Counter />);const button = getByText(/Increment/i);fireEvent.click(button);getByText('1');
});
  1. React Testing Library:React Testing Library 是一个专门用于 React 组件测试的库,强调从用户交互的角度进行测试,避免关注实现细节。
import { render, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';test('button click updates state', () => {const { getByText } = render(<MyComponent />);fireEvent.click(getByText('Click me'));getByText('You clicked 1 times');
});

React 与其他框架的对比

React vs Angular

  • 学习曲线:Angular 是一个完整的前端框架,内置了很多功能(如路由、表单验证、HTTP 请求等),学习曲线较陡。而 React 是一个库,专注于 UI 构建,学习起来相对简单。
  • 架构:Angular 使用 MVVM(Model-View-ViewModel)架构,适合大型应用开发。React 使用组件化的方式,开发者可以根据需求自由选择工具,如路由、状态管理等。
  • 双向数据绑定:Angular 提供了双向数据绑定,而 React 则是单向数据流,数据从父组件流向子组件,这使得 React 更易于调试和维护。

React vs Vue

  • 学习曲线:Vue 的学习曲线通常被认为比 React 更平缓,特别是对于初学者。Vue 结合了模板和组件的思想,适合渐进式开发。
  • 灵活性:React 提供了更多的灵活性和自由度,开发者可以根据需求选择合适的工具链,而 Vue 提供了更多的默认约定,使得开发过程更加简洁。
  • 生态系统:React 拥有更庞大的社区和生态系统,支持更多的第三方库。Vue 的生态也在迅速发展,但总体上相对较小。

React 进阶话题

Context API

React Context 提供了一种方式,能够让我们在组件树中传递数据,而不需要通过 props 层层传递。它特别适用于全局状态(如主题、语言等)管理。

import React, { createContext, useContext } from 'react';const ThemeContext = createContext();const ThemedComponent = () => {const theme = useContext(ThemeContext);return <div style={{ background: theme.background }}>Hello, World!</div>;
};const App = () => {const theme = { background: 'lightblue' };return (<ThemeContext.Provider value={theme}><ThemedComponent /></ThemeContext.Provider>);
};

Suspense 和 Concurrent Mode

React 16.6 引入了 Suspense,它允许你将异步加载的组件包装起来,React 会在组件加载时显示一个备用内容。Concurrent Mode 是 React 在 18 中的实验性特性,它通过并发渲染来提升 React 应用的响应速度和用户体验。

import React, { Suspense, lazy } from 'react';const LazyComponent = lazy(() => import('./LazyComponent'));const App = () => (<Suspense fallback={<div>Loading...</div>}><LazyComponent /></Suspense>
);

服务端渲染(SSR)

React 支持服务端渲染(SSR),即在服务器端生成 HTML 页面,然后将其发送到客户端,这样可以提高页面加载速度和 SEO(搜索引擎优化)。Next.js 是一个基于 React 的流行框架,它提供了开箱即用的 SSR 支持。

import React from 'react';const HomePage = () => <div>Hello from SSR!</div>;export default HomePage;

在 Next.js 中,您只需要将页面文件放在 pages 目录下,框架会自动为您处理 SSR 和路由。


总结

React 是一个功能强大且灵活的前端库,它通过组件化的方式帮助开发者高效地构建用户界面。随着 React 生态系统的不断发展,它已成为现代前端开发的主流选择。通过掌握 React 的核心概念、生命周期、Hooks、性能优化等技术,开发者能够构建出高效、可维护的前端应用。同时,借助 React 的生态工具(如 React Router、Redux、React Query 等),开发者能够更轻松地处理路由、状态管理和数据请求等任务。

希望本文能帮助您更好地理解和掌握 React,为您未来的开发之路提供支持!

相关文章:

深入了解 React:从入门到高级应用

深入了解 React&#xff1a;从入门到高级应用 React 是由 Facebook 开发并维护的一个开源 JavaScript 库&#xff0c;用于构建用户界面。自2013年发布以来&#xff0c;React 在前端开发领域迅速崛起&#xff0c;成为最受欢迎的 UI 构建工具之一。无论是小型的单页应用&#xf…...

Cglib代理简单案例

Cglib代理简单案例 前言&#xff1a; 1&#xff0c;实现对目标类的增强 2&#xff0c;源码后期补齐 步骤 1&#xff0c;添加cglib依赖 2&#xff0c;编写目标类&#xff0c;书写里面的方法 3&#xff0c;实现MethodInterceptor 接口&#xff0c;重写intercept方法 4&#xff…...

FreeMarker语法

1. 查找转移 <#function getSubSlot x > <#return (x) ? switch( "1", "L", "2", "R", "" )> </#function> 2. 转换数字 ?number ${mergedMap[placement.sequence].material.subs…...

DP动态规划(装箱问题)

# [NOIP2001 普及组] 装箱问题 ## 题目描述 有一个箱子容量为 $V$&#xff0c;同时有 $n$ 个物品&#xff0c;每个物品有一个体积。 现在从 $n$ 个物品中&#xff0c;任取若干个装入箱内&#xff08;也可以不取&#xff09;&#xff0c;使箱子的剩余空间最小。输出这个最小值。…...

内网IP段介绍与汇总

IPV4内网段 IP地址段地址范围地址数量用途描述0.0.0.0/80.0.0.0–0.255.255.25516777216SoftwareCurrent network (only valid as source address).10.0.0.0/810.0.0.0–10.255.255.25516777216Private networkUsed for local communications within a private network.100.64…...

三、ubuntu18.04安装docker

1.使用默认ubuntu存储库安装docker 更新软件存储库 更新本地软件数据库确保可以访问最新版本。打开终端输入&#xff1a;sudo apt-get update 卸载旧版本的docker 建议继续之前卸载任何旧的docker软件。打开终端输入&#xff1a;sudo apt-get remove docker docker-engine …...

数据库与表空间

背景知识概述 数据库&模式 “实例/集簇”金仓是一个单实例管多库&#xff0c;把多库的集合叫做集簇&#xff0c;他们共用一个集簇目录&#xff0c;比如data目录下面里的子目录的数据文件。数据库里面有模式&#xff0c;在金仓里面模式是&#xff1a;据逻辑相关性对象的集…...

【CSS in Depth 2 精译_091】15.4:让 CSS 高度值过渡到自动高度 + 15.5:自定义属性的过渡设置(全新)+ 15.6:本章小结

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第五部分 添加动效 ✔️【第 15 章 过渡】 ✔️ 15.1 状态间的由此及彼15.2 定时函数 15.2.1 定制贝塞尔曲线15.2.2 阶跃 15.3 非动画属性 15.3.1 不可添加动画效果的属性15.3.2 淡入与淡出 15.4 过…...

Oracle中间件 SOA之 OSB 12C服务器环境搭建

环境信息 服务器基本信息 如下表&#xff0c;本次安装总共使用1台服务器&#xff0c;具体信息如下&#xff1a; App1服务器 归类 APP服务器 Ip Address 172.xx.30.xx HostName appdev01. xxxxx.com Alias appdev01 OSB1服务器 归类 OSB服务器 Ip Address 172.xx3…...

Java设计模式 —— 【结构型模式】外观模式详解

文章目录 概述结构案例实现优缺点 概述 外观模式又名门面模式&#xff0c;是一种通过为多个复杂的子系统提供一个一致的接口&#xff0c;而使这些子系统更加容易被访问的模式。该模式对外有一个统一接口&#xff0c;外部应用程序不用关心内部子系统的具体的细节&#xff0c;这…...

线性表实验

实验目的与要求 实验目的&#xff1a; 线性表的逻辑结构特点和线性表抽象数据类型的描述方法线性表的两类存储结构设计方法以及各自的优缺点掌握线性表的基本知识深入理解、掌握并灵活运用线性表。熟练掌握线性表的存储结构及主要运算的实现掌握栈的定义、栈的逻辑结构特性和…...

003无重复字符的最长子串

(https://i-blog.csdnimg.cn/direct/352cc4217764458f9a1510c62f89a91e.png)(https://i-blog.csdnimg.cn/direct/14239305bb5a4d068f323de7afc14086.png)...

记录--uniapp 安卓端实现录音功能,保存为amr/mp3文件

&#x1f9d1;‍&#x1f4bb; 写在开头 点赞 收藏 学会&#x1f923;&#x1f923;&#x1f923; 功能实现需要用到MediaRecorder、navigator.mediaDevices.getUserMedia、Blob等API&#xff0c;uniapp App端不支持&#xff0c;需要借助renderjs来实现 实现逻辑 通过naviga…...

前端生成docx文档、excel表格、图片、pdf文件

一、前端将页面某区域内容下载为word文档&#xff1a;html-to-docx、file-saver插件组合使用 import HTMLtoDOCX from html-to-docx; import { saveAs } from file-saver;const exportTest async () > {const fileBuffer await HTMLtoDOCX(<h2>文件标题</h2>&…...

c++---------流类

格式化输入&#xff08;cin的格式化&#xff09; 基本用法与控制符 在C中&#xff0c;std::cin用于从标准输入&#xff08;通常是键盘&#xff09;读取数据。它默认以空白字符&#xff08;空格、制表符、换行符&#xff09;为分隔符来读取不同的数据。例如&#xff0c;读取两个…...

3、基本复用原理和复用单元

基本复用原理 字节间插复用&#xff1a; SDH 采用字节间插复用方式来构建更高等级的信号。这是一种将低速率信号按字节为单位依次插入到高速率信号帧结构中的复用方法。例如&#xff0c;将多个 STM - 1 信号复用成 STM - 4 信号时&#xff0c;是把 4 个 STM - 1 信号的字节依次…...

Vue与React:前端框架的巅峰对决

文章目录 一、引言&#xff08;一&#xff09;前端框架发展现状简述 二、Vue 与 React 框架概述&#xff08;一&#xff09;Vue.js 简介&#xff08;二&#xff09;React.js 简介 三、开发效率对比&#xff08;一&#xff09;Vue 开发效率分析&#xff08;二&#xff09;React …...

Java 中的面向对象编程 (OOP) 概念

引言 面向对象编程&#xff08;Object-Oriented Programming, OOP&#xff09;是一种编程范式&#xff0c;它通过将数据和操作封装在一起&#xff0c;形成一个称为“对象”的实体来组织代码。Java 是一种完全支持 OOP 的语言&#xff0c;广泛应用于企业级应用开发。本文将深入…...

十二月第20讲:Python中指数概率分布函数的绘图详解

一、指数分布的理论概述 1. 定义与公式 指数分布是一种描述随机变量在一个固定底数上的对数值的分布情况&#xff0c;或者在概率理论和统计学中&#xff0c;用于描述泊松过程中事件之间的时间间隔的概率分布。具体来说&#xff0c;它表示事件以恒定平均速率连续且独立地发生的…...

汽车IVI中控开发入门及进阶(44):杰发科智能座舱芯片

概述: 杰发科技自成立以来,一直专注于汽车电子芯片及相关系统的研发与设计。 产品布局: 合作伙伴: 杰发科技不断提升产品设计能力和产品工艺,确保产品达 到更高的质量标准。目前杰发科技已通过ISO9001质 量管理体系与CMMIL3认证。 杰发科技长期合作的供应商(芯片代工厂、…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

在 Spring Boot 项目里,MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...