React前端框架

一、React概述

1. 什么是React?

React是由Facebook开发并维护的一个用于构建用户界面的JavaScript库。它采用组件化开发模式,允许开发者将UI拆分为独立且可复用的组件。自2013年发布以来,React迅速成为了前端开发中最受欢迎的库之一。

2. React的核心理念

React基于以下几个核心理念:

  • 组件化:UI可以由各个独立的、可复用的组件组合而成。
  • 虚拟DOM:通过虚拟DOM提高渲染性能,减少直接操作真实DOM的次数。
  • 单向数据流:数据从父组件向子组件单向流动,使得应用更易于理解和维护。
  • JSX:一种扩展的JavaScript语法,用于描述UI结构,使代码更具可读性。

3. React的生态系统

React拥有丰富的生态系统,包括React Router(路由管理)、Redux(状态管理)、Next.js(服务器端渲染和静态网站生成)等工具和库,这些工具极大地扩展了React的功能,使其能够应对各种复杂的开发需求。

二、React的核心特性

1. 组件化开发

组件化开发是React的核心概念之一。每个组件都是一个独立且可复用的单元,具有自己的状态和逻辑。通过组合小的、简单的组件,可以构建出复杂而强大的应用程序。

a. 函数组件 vs 类组件
  • 函数组件:使用函数定义,更加简洁,推荐用于没有复杂生命周期逻辑的组件。
  • 类组件:继承自React.Component,更适合需要复杂逻辑和生命周期方法的组件。
b. 组件的复用

组件的复用性是React的一大优势。例如,网站的导航栏、表单输入框等都可以作为独立组件来开发和使用,从而提高开发效率。

2. 虚拟DOM

React引入了虚拟DOM(Virtual DOM)的概念,通过在内存中创建一个轻量级的虚拟DOM树来优化页面更新性能。当组件状态发生变化时,React会先在虚拟DOM中进行计算,找出最小更新路径,然后才更新实际的DOM。

a. 性能优化

虚拟DOM减少了对真实DOM的频繁操作,从而提高了性能。这对于大型应用尤为重要,因为它能显著减少浏览器的重绘和重排次数。

3. 单向数据流

React采用单向数据流的设计,数据从父组件传递到子组件,不允许反向流动。这种设计使得数据流动更加清晰,便于调试和维护。

a. 父子组件间的数据传递

父组件通过props将数据传递给子组件,子组件可以通过回调函数或其他方式通知父组件进行数据更新。

4. JSX

JSX是一种扩展的JavaScript语法,用于描述UI结构。它在JavaScript代码中书写HTML标签,使得代码更加直观和易于维护。

a. JSX的作用与优势

JSX提高了代码的可读性和可维护性,同时也减少了模板和逻辑之间的耦合度。此外,JSX编译器会将JSX转换为React.createElement()函数调用,确保了兼容性和性能优化。

三、React技术要点详解

1. 组件生命周期

React组件具有生命周期方法,这些方法在不同的阶段被调用,允许开发者在特定的时间点执行代码。常见的生命周期方法包括:

  • componentDidMount: 组件挂载后调用,适合进行数据获取等操作。
  • componentDidUpdate: 组件更新后调用,适合根据属性变化进行操作。
  • componentWillUnmount: 组件卸载前调用,适合进行清理工作。

2. 状态管理

React组件可以有内部状态(state),状态的变化会触发组件重新渲染。使用useState hook(对于函数组件)或setState方法(对于类组件)来管理状态。

a. useState hook

useState hook 是React函数组件中使用的钩子,用于添加状态。它返回当前状态和一个修改状态的方法。

b. setState方法

setState方法用于类组件中,它会合并当前状态和传入的新状态,然后重新渲染组件。

3. 上下文(Context)

Context提供了一种在组件树中共享数据的方法,避免了逐层传递props的麻烦。特别适用于需要全局状态的场景,如主题切换、用户登录信息等。

a. 创建上下文

使用React.createContext()创建一个上下文对象。

b. 使用上下文

在组件中使用useContext() hook获取上下文数据,或在类组件中使用static contextType静态属性获取。

4. 路由管理

React Router是一个用于管理应用路由的库,它允许开发者声明式的配置路由,实现单页应用(SPA)的页面跳转和嵌套路由。

a. 基本路由配置

使用BrowserRouterRoutesRoute等组件配置基本路由。

b. 动态路由与路由参数

React Router支持动态路由和路由参数,可以根据URL中的参数动态渲染不同的组件。

5. 与Redux集成

Redux是一个用于管理全局状态的库,常与React一起使用。它采用单向数据流的理念,结合Reducer函数管理应用状态。

a. Redux的基本概念

包括action、reducer、store等核心概念。Action是描述事件发生的对象,Reducer是根据Action来修改状态的纯函数,Store是保存应用状态的容器。

b. 在React中使用Redux

通过Provider组件将Store注入到React应用中,并使用useDispatchuseSelector hook在组件中分发和选择状态。

6. 性能优化技巧

  • React.memouseMemo:用于防止不必要的重新渲染。
  • lazy和Suspense:用于按需加载组件,提升初次加载性能。
  • shouldComponentUpdate:控制组件是否应重新渲染。

四、React项目结构与目录规划

1. 项目目录结构

一个典型的React项目目录结构如下:

/my-react-app/node_modules/publicindex.html/src/componentsNavbar.jsFooter.js/pagesHome.jsAbout.jsApp.jsindex.jspackage.json.gitignoreREADME.md

2. 公共目录与私有目录

  • public目录:存放静态资源,如HTML文件、图标等。
  • src目录:存放源代码,通常按照功能或组件类型组织代码。

3. 主要文件与文件夹的作用

  • index.js:入口文件,渲染根组件。
  • App.js:根组件,负责整体应用的布局和路由。
  • components文件夹:存放页面组件。
  • pages文件夹:存放页面级组件,如首页、关于页等。

五、实践案例:构建一个简单的React应用

1. 创建React项目

使用Create React App脚手架工具快速创建一个React项目:

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

2. 实现计数器组件

创建一个简单的计数器组件,展示如何使用函数组件、状态管理和事件处理。

import React, { useState } from 'react';function Counter() {const [count, setCount] = useState(0);return (<div><h1>Hello, world!</h1><p>The count is: {count}</p><button onClick={() => setCount(count + 1)}>+1</button></div>);
}export default Counter;

App.js中引入并使用该组件:

import React from 'react';
import Counter from './Counter';function App() {return (<div className="App"><Counter /></div>);
}export default App;

3. 使用React Router添加路由

安装React Router:

npm install react-router-dom

App.js中配置路由:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';function App() {return (<Router><Switch><Route path="/" exact component={Home} /><Route path="/about" component={About} /></Switch></Router>);
}export default App;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/8323.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

《JavaEE进阶》----20.<基于Spring图书管理系统(登录+添加图书)>

PS&#xff1a;关于接口定义 接口定义&#xff0c;通常由服务器提供方来定义。 1.路径&#xff1a;自己定义 2.参数&#xff1a;根据需求考虑&#xff0c;我们这个接口功能完成需要哪些信息。 3.返回结果&#xff1a;考虑我们能为对方提供什么。站在对方角度考虑。 我们使用到的…

Sigrity Power SI 3D-EM Full Wave Extraction模式如何进行S参数提取和观测3D电磁场和远场操作指导(一)

Sigrity Power SI 3D-EM Full Wave Extraction模式如何进行S参数提取和观测3D电磁场和远场操作指导(一) Sigrity Power SI的3D-EM Full Wave Extraction模式是Power SI的3D全波提取工具,相比于2D提取,3D全波提取的结果更为精确,且支持设置跨平面的port,也就是lump port,这…

用Python打造你的《天天酷跑》——从零开始的游戏开发之旅

前言 在快节奏的生活里&#xff0c;偶尔玩一款轻松有趣的小游戏可以很好地放松心情。《天天酷跑》作为一款经典的跑酷游戏&#xff0c;凭借其简单易上手的操作和丰富多彩的关卡设计&#xff0c;深受广大玩家的喜爱。如果你对游戏开发感兴趣&#xff0c;或者想要尝试自己动手制…

泷羽sec学习打卡-shodan扫描4

声明 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 关于shodan的那些事儿-4 一、shodan4如何查看公网ip&#xff1f;如何查看自己的ip&#xff1f;如何查看出…

深层次识别:书脊图像分割

书脊图像分割系统源码&#xff06;数据集分享 [yolov8-seg-C2f-DAttention&#xff06;yolov8-seg-EfficientHead等50全套改进创新点发刊_一键训练教程_Web前端展示] 1.研究背景与意义 项目参考ILSVRC ImageNet Large Scale Visual Recognition Challenge 项目来源AAAI Glo…

已有商标证的人注意,留存使用证据!

近日有个网友联系普推知产商标老杨&#xff0c;说商标被撤三已经答辩了一次&#xff0c;但是没有成功&#xff0c;无法证明在指定服务上使用&#xff0c;原商标注册证被作废。 现在好的商标资源有限&#xff0c;在许多申请注册时会通过撤三打掉在先权利&#xff0c;即连续三年不…

Oracle视频基础1.3.7练习

1.3.7 看oracle是否启动构造一个pfile:boobooke.ora看spfilewilson内容修改alert log file里拷贝的参数内容&#xff0c;创建一个pfile boobooke.ora用新创建的pfile启动数据库&#xff0c;并创建新的spfile:spfilebbk.ora启动数据库&#xff0c;监听&#xff0c;看新的进程解…

深度强化学习:从理论到应用

目录 1.引言 2.什么是强化学习&#xff1f; 3.深度学习和强化学习的结合 4.深度强化学习的主要方法 5.深度强化学习的应用领域 6.深度强化学习的挑战与未来 7.总结 1.引言 深度强化学习&#xff08;Deep Reinforcement Learning&#xff0c;DRL&#xff09;是近年来人工…

如何在算家云搭建Hunyuan-DiT(图像生成)

一、Hunyuan-DiT简介 Hunyuan-DiT 是由腾讯混元推出的文生图扩散模型&#xff0c;支持中文和英文双语输入&#xff0c;其他开源模型相比&#xff0c;Hunyuan-DiT 在中文到图像生成方面树立了新的水平。 要求&#xff1a; 所需的最小 GPU 内存为 11GB&#xff0c;建议使用具有…

2024版新鲜出炉:最新大厂 Java 面试八股文合集(附权威答案)

谈到 Java 面试&#xff0c;相信大家第一时间脑子里想到的词肯定是金三银四&#xff0c;金九银十。好像大家的潜意识里做 Java 开发的都得在这个时候才能出去面试&#xff0c;跳槽成功率才高&#xff01;但 LZ 不这么认为&#xff0c;LZ 觉得我们做技术的一生中会遇到很多大大小…

Latex之LNCS模板——使用bib添加参考文献

1、获取参考文献 从谷歌学术中获取bib格式的参考文献。 创建一个.bib文件&#xff0c;将参考文献复制进去。 2、添加参考文献 在文章最后引用.bib格式的参考文献。 \bibliographystyle{splncs04} % 格式 \bibliography{references.bib} % 文件名 LNCS模板中会包含该格式文件…

【考研数学 - 数二题型】考研数学必吃榜(数二)

数学二 suhan, 2024.10 文章目录 数学二一、函数❗1.极限1.1求常见极限1.2求数列极限1.2.1 n项和数列极限1.2.2 n项连乘数列极限1.2.3 递推关系定义的数列极限 1.3确定极限式中的参数1.4无穷小量阶的比较 2.连续2.1判断是否连续&#xff0c;不连续则判断间断点类型2.2证明题 二…

【HarmonyOS】鸿蒙应用低功耗蓝牙BLE的使用心得 (二)

【HarmonyOS】鸿蒙应用低功耗蓝牙BLE的使用心得 &#xff08;二&#xff09; 一、前言 目前鸿蒙应用的实现逻辑&#xff0c;基本都是参考和移植Android端来实现。针对BLE低功耗蓝牙来说&#xff0c;在鸿蒙化的实现过程中。我们发现了&#xff0c;鸿蒙独有的优秀点&#xff0c…

基于STM32的数字温度计教学

引言 数字温度计是许多电子项目中的常见应用&#xff0c;它可以实时监测周围环境的温度并显示。利用STM32微控制器实现数字温度计&#xff0c;可以帮助我们了解如何使用传感器进行模拟信号转换及数据传输。本教程将指导您使用STM32和DS18B20数字温度传感器实现一个简单的数字温…

go mod 依赖管理

什么是go mod go mod 是从 Go 1.11 版本开始引入的。Go Modules 是 Go 语言官方提供的一个版本管理工具&#xff0c;旨在解决依赖管理和版本控制的问题。从 Go 1.11 开始&#xff0c;Go Modules 被作为实验性功能引入&#xff0c;到了 Go 1.13 版本&#xff0c;Go Modules 成为…

洛谷解题日记||基础篇2

题目链接 0 剪刀&#xff0c;1 石头&#xff0c;2 布&#xff0c;3 蜥蜴人&#xff0c;4 斯波克我们可以根据题意&#xff0c;构建一个二维矩阵 result[5][5] 来表示每一种出拳的胜负情况。 #include <iostream> #include <vector> using namespace std;int m…

年会必备的抽奖小程序!

感觉一年一度的年会快来了&#xff0c;准备个小的抽奖小程序蛮陶冶情操的&#xff01; 正好今天有空整了一个&#xff0c;简单&#xff0c;简洁&#xff01;&#xff0c;大家也可以玩起来&#xff01; 技术栈&#xff1a; Flask 试玩的链接在这里,有意思的话也可以部署到自己的…

sqoop Oracle 导入到hive 日期时间消失

sqoop脚本&#xff1a; sqoop import -D mapred.job.queue.namehighway \ -D mapreduce.map.memory.mb4096 \ -D mapreduce.map.java.opts-Xmx3072m \ --connect "jdbc:oracle:thin://localhost:61521/LZY2" \ --username LZSHARE \ --password 123456 \ --query &q…

20241108通过iperf3确认中科创达的高通CM6125的WIFI的网速【失败】

20241108通过iperf3确认中科创达的高通CM6125的WIFI的网速【失败】 2024/11/8 15:43 由于以太网不能用&#xff0c;那就测试一下WIFI&#xff0c;iperf3链接/测试异常。 一般认为可能的原因有&#xff1a; 1、CM6125开发板的WIFI不带天线&#xff0c;影响性能。 2、CM6125的And…

Vue项目中点击按钮后浏览器屏幕变黑,再次点击恢复的解决方法

情况说明 点击按钮后出现以下情况&#xff0c;浏览器屏幕变暗&#xff0c;再次点击则恢复正常。 解决方法&#xff1a; 找到你的全局样式文件&#xff0c;我的是gloable.css&#xff0c;添加以下代码&#xff1a; .v-modal {display: none; }重启服务器即可解决。