React前端框架:现代网页开发的基石(附带构建简单任务管理应用案例代码)

📝个人主页🌹:一ge科研小菜鸡-CSDN博客
🌹🌹期待您的关注 🌹🌹

React 是由 Facebook 开发并开源的前端框架,用于构建用户界面。它通过虚拟DOM、高效的渲染机制和组件化的开发模式,使开发者能够创建可扩展和高性能的应用程序。本文将详细探讨 React 的核心概念、实际案例代码以及在开发过程中的最佳实践。

1. React 简介与核心优势

1.1 什么是 React?

React 是一个用于构建用户界面的 JavaScript 库,专注于实现视图层。React 的主要目的是简化用户界面的开发,通过引入组件化和声明式编程,使代码结构更清晰、可维护性更高。

1.2 React 的核心优势

  • 组件化开发:React 允许开发者将 UI 拆分成独立的组件,这样每个组件都可以单独维护和复用。
  • 虚拟 DOM:React 使用虚拟 DOM 以提升性能。更新时,它会计算出实际 DOM 的差异,并只应用必要的更改。
  • 单向数据流:数据在 React 中以单向的方式流动,有助于更好的数据管理和调试。
  • 强大的社区支持:React 拥有丰富的资源、教程和开源项目。

2. React 核心概念详解

2.1 JSX 语法

JSX 是一种类似 HTML 的 JavaScript 语法扩展,允许在 JavaScript 中编写 HTML 结构。React 的组件通常通过 JSX 编写,保持了 JavaScript 逻辑和 UI 的紧密结合。

示例代码

function Welcome() {return <h1>Hello, React!</h1>;
}

JSX 语法会在编译时转换为 React.createElement 调用。

2.2 组件化开发

React 的组件可以是函数组件或类组件。函数组件较为简洁,推荐用于大多数开发场景,而类组件通常用于更复杂的逻辑(如需要状态管理)。

函数组件示例

function Greeting(props) {return <h2>Welcome, {props.name}!</h2>;
}

类组件示例

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

2.3 State 和 Props

  • Props(属性):父组件传递给子组件的数据,是不可变的。
  • State(状态):组件内部可变的数据,可以通过 setState 方法更新。

示例代码

class Counter extends React.Component {constructor(props) {super(props);this.state = { count: 0 };}increment = () => {this.setState({ count: this.state.count + 1 });};render() {return (<div><p>Count: {this.state.count}</p><button onClick={this.increment}>Increment</button></div>);}
}

3. 创建和管理 React 应用

3.1 使用 Create React App

Create React App 是官方提供的脚手架工具,用于快速搭建 React 应用。它自动配置了开发环境,支持 Webpack 和 Babel。

安装和启动

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

3.2 项目结构概览

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

my-app/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── index.js
│   └── components/
│       └── MyComponent.js
└── package.json

index.js 是应用的入口文件,App.js 是根组件,其他自定义组件放在 components 文件夹。

3.3 React Hooks 简介

React Hooks 是 React 16.8 引入的新特性,它允许在函数组件中使用 state 和其他 React 特性,如 useStateuseEffect

useState 示例

import React, { useState } from 'react';function Counter() {const [count, setCount] = useState(0);return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
}

useEffect 示例

import React, { useState, useEffect } from 'react';function Timer() {const [time, setTime] = useState(0);useEffect(() => {const interval = setInterval(() => {setTime(time + 1);}, 1000);return () => clearInterval(interval);}, [time]);return <p>Time: {time}</p>;
}

4. 项目案例:构建简单的任务管理应用

4.1 功能概述

我们将实现一个简单的任务管理应用,用户可以添加任务、标记任务完成、删除任务。

4.2 组件设计

  • App:根组件,包含所有子组件。
  • TaskInput:用于输入新任务。
  • TaskList:显示任务列表。
  • TaskItem:单个任务项,包含任务名、完成按钮和删除按钮。

4.3 实现代码

App.js

import React, { useState } from 'react';
import TaskInput from './components/TaskInput';
import TaskList from './components/TaskList';function App() {const [tasks, setTasks] = useState([]);const addTask = (task) => {setTasks([...tasks, { id: Date.now(), name: task, completed: false }]);};const toggleComplete = (id) => {setTasks(tasks.map(task => task.id === id ? { ...task, completed: !task.completed } : task));};const deleteTask = (id) => {setTasks(tasks.filter(task => task.id !== id));};return (<div><h1>Task Manager</h1><TaskInput addTask={addTask} /><TaskList tasks={tasks} toggleComplete={toggleComplete} deleteTask={deleteTask} /></div>);
}export default App;

TaskInput.js

import React, { useState } from 'react';function TaskInput({ addTask }) {const [input, setInput] = useState('');const handleSubmit = (e) => {e.preventDefault();if (input.trim()) {addTask(input);setInput('');}};return (<form onSubmit={handleSubmit}><input type="text" value={input} onChange={(e) => setInput(e.target.value)} placeholder="Add a new task"/><button type="submit">Add</button></form>);
}export default TaskInput;

TaskList.js

import React from 'react';
import TaskItem from './TaskItem';function TaskList({ tasks, toggleComplete, deleteTask }) {return (<ul>{tasks.map(task => (<TaskItem key={task.id} task={task} toggleComplete={toggleComplete} deleteTask={deleteTask} />))}</ul>);
}export default TaskList;

TaskItem.js

import React from 'react';function TaskItem({ task, toggleComplete, deleteTask }) {return (<li><span style={{ textDecoration: task.completed ? 'line-through' : 'none' }}onClick={() => toggleComplete(task.id)}>{task.name}</span><button onClick={() => deleteTask(task.id)}>Delete</button></li>);
}export default TaskItem;

5. React 项目的优化与部署

5.1 代码优化技巧

  • 使用 React.memo:避免不必要的重新渲染。
  • 使用 useCallbackuseMemo:优化函数和复杂计算。
  • 代码拆分与懒加载:使用 React.lazy()Suspense 进行组件懒加载,减少初始加载时间。

5.2 部署到生产环境

React 应用可以使用 npm run build 打包,生成的文件可部署到任何静态文件服务器,如 Netlify、Vercel 或 GitHub Pages。

总结

React 是现代网页开发中不可或缺的工具,通过其组件化和声明式编程风格,开发者能够快速构建出可扩展和高效的应用。掌握 React 的核心概念和最佳实践可以帮助开发者提高开发效率并打造高质量的前端项目。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在Zetero中调用腾讯云API的输入密钥的问题

也是使用了Translate插件了&#xff0c;但是需要调用腾讯云翻译&#xff0c;一直没成功。 第一步就是&#xff0c;按照这上面方法做&#xff1a;百度、阿里、腾讯、有道各平台翻译API申请教程 之后就是&#xff1a;Zotero PDF translat翻译&#xff1a;申请腾讯翻译接口 主要是…

kelp protocol

道阻且长,行而不辍,未来可期 有很长一段时间我都在互联网到处拾金,but,东拼西凑的,总感觉不踏实,最近在老老实实的看官方文档 & 阅读白皮书 &看合约,挑拣一些重要的部分配上官方的证据,和过路公主or王子分享一下,愿我们早日追赶上公司里那些可望不可及大佬们。…

如何以开源加速AI企业落地,红帽带来新解法

CSDN 看到&#xff0c;生成式 AI 的火爆正在引发计算、开发、交互三大范式全面的升级和转换&#xff0c;全行业或将迎来一次全新的科技变革周期&#xff0c;可能比移动与云计算变革更加剧烈。不过 AI 经历了追求千亿模型效果和芯片、集群硬件的军备竞赛后&#xff0c;如何真正落…

vue的组件使用

1.安装element plus组件库 npm install element-plus --save 2. 3.在页面使用

人保财险(外包)面试分享

前言&#xff1a; 这是本月面的第三家公司&#xff0c;太难了兄弟们&#xff0c;外包都不好找了&#xff0c;临近年底&#xff0c;金九银十已经错过了&#xff0c;金三银四虽然存在&#xff0c;但按照这几年的行情&#xff0c;金九银十和金三银四其实已经是不复存在了&#xf…

Hive 查询各类型专利 top10 申请人及专利申请数

Hive 查询各类型专利 top10 申请人及专利申请数 一、背景 在专利数据处理中&#xff0c;我们常常需要分析不同类型专利下申请人的活跃度。例如&#xff0c;给定一个专利明细表 t_patent_detail&#xff0c;其中包含专利号、专利名称、专利类型、申请时间、授权时间和申请人等…

C++ STL标准模板库详解:深入探索算法、容器与迭代器

C的STL&#xff08;Standard Template Library&#xff0c;即标准模板库&#xff09;是C最重要的组成部分之一&#xff0c;它为开发者提供了一组高效的算法和数据结构&#xff0c;极大地简化了代码的开发。STL主要由三大部分构成&#xff1a;算法、容器和迭代器。以下&#xff…

pytest插件精选:提升测试效率与质量

pytest作为Python生态系统中备受推崇的测试框架&#xff0c;以其简洁、灵活和可扩展性赢得了广泛的认可。通过合理使用pytest的各种插件&#xff0c;可以显著提升测试效率、增强测试的可读性和可维护性。 pytest-sugar&#xff1a;提升测试体验 pytest-sugar是一款增强版的py…

低代码环境中的领域与根实体解析

在现代软件开发中&#xff0c;低代码平台的兴起使得开发者能够更快速地构建应用程序。在这一过程中&#xff0c;理解领域&#xff08;Domain&#xff09;和根实体&#xff08;Root Entity&#xff09;的概念变得尤为重要。这些概念不仅帮助开发者组织和管理复杂系统中的数据和业…

Linux-c TCP服务模型

1、TCP模型&#xff0c;服务端与客户端的搭建时序图 2、TCP模型&#xff0c;在创建阶段和通信阶段&#xff0c;对套接字的理解 2.1、tcp连接阶段 2.2、tcp通信状态 一个服务端与多个客户端的通信状态 TCP与UDP的对比 &#xff08;下图是笔者理解所画&#xff0c;可能也许有错…

卡码网KamaCoder 127. 骑士的攻击

题目来源&#xff1a;127. 骑士的攻击 C题解&#xff08;来源A * 算法精讲 &#xff08;A star算法&#xff09; | 代码随想录&#xff09;&#xff1a;Astar Astar 是一种 广搜的改良版。 有的是 Astar是 dijkstra 的改良版。 其实只是场景不同而已 我们在搜索最短路的时候&…

浅谈语言模型推理框架 vLLM 0.6.0性能优化

在此前的大模型技术实践中&#xff0c;我们介绍了加速并行框架Accelerate、DeepSpeed及Megatron-LM。得益于这些框架的助力&#xff0c;大模型的分布式训练得以化繁为简。 然而&#xff0c;企业又该如何将训练完成的模型实际应用部署&#xff0c;持续优化服务吞吐性能&#xf…

软著补正有哪些类型

软著补正是指在软著申请过程中&#xff0c;版权局在审核软著申请材料时&#xff0c;发现一些部分不符合规定的内容&#xff0c;从而对申请材料提出补正要求&#xff0c;要求申请人修改或补充申请材料。软著补正通常涉及以下几种类型&#xff1a; 一、申请材料填写有误 软件名称…

闯关leetcode——3222. Find the Winning Player in Coin Game

大纲 题目地址内容 解题代码地址 题目 地址 https://leetcode.com/problems/find-the-winning-player-in-coin-game/description/ 内容 You are given two positive integers x and y, denoting the number of coins with values 75 and 10 respectively. Alice and Bob a…

GitLab 中文发行版最新版重点功能解读

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 学习极狐GitLab 的相关资料&#xff1a; 极狐GitLab 官网极狐…

大数据数据存储层MemSQL, HBase与HDFS

以下是对 MemSQL、HBase 和 HDFS 的详细介绍,这些工具在分布式数据存储和处理领域有着重要作用。 1. MemSQL MemSQL(现称为 SingleStore)是一种分布式内存数据库,兼具事务处理(OLTP)和分析处理(OLAP)的能力,专为高性能实时数据处理设计。 1.1 核心特点 内存优先存储…

斗破QT编程入门系列之二:GUI应用程序设计基础:UI文件(四星斗师)

斗破Qt目录&#xff1a; 斗破Qt编程入门系列之前言&#xff1a;认识Qt&#xff1a;Qt的获取与安装&#xff08;四星斗师&#xff09; 斗破QT编程入门系列之一&#xff1a;认识Qt&#xff1a;初步使用&#xff08;四星斗师&#xff09; 斗破QT编程入门系列之二&#xff1a;认识…

《二分查找算法:在有序数组中搜索目标值》

目录 一、问题分析 二、二分查找算法原理 三、代码实现 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target&#xff0c;我们要写一个函数来搜索 nums 中的 target&#xff0c;如果目标值存在就返回它的下标&#xff0c;否则返回 -1。 …

【Qt】QTreeView 和 QStandardItemModel的关系

QTreeView 和 QAbstractItemModel&#xff08;通常是其子类&#xff0c;如 QStandardItemModel 或自定义模型&#xff09;是 Qt 框架中的两个关键组件&#xff0c;它们之间存在密切的关系。 关系概述 QTreeView&#xff1a; QTreeView 是一个用于显示和编辑层次数据的视图小部…

高级 HarmonyOS主题课—— 帮助快速构建各种文本识别应用的课后习题

天地不仁&#xff0c;以万物为刍狗&#xff1b; 圣人不仁&#xff0c;以百姓为刍狗。 天地之间&#xff0c;其犹橐龠乎&#xff1f; 虚而不屈&#xff0c;动而俞出。 多闻数穷&#xff0c;不若守于中。 本文内容主要来自 <HarmonyOS主题课>帮助快速构建各种文本识别应用 …