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

React自学：如何使用localStorage，以及如何实现删除笔记操作

news 来源：原创 2025/6/14 14:18:23

1. 初始化notes

以下这段代码完成了这些操作：

调用 localStorage.getItem("notes") 从浏览器的本地存储中获取名为 “notes” 的数据。
使用 JSON.parse 将获取到的字符串解析成数组。
如果本地存储中没有 “notes” 数据（返回值为 null），则默认将 notes 设置为空数组 []。

const [notes, setNotes] = React.useState(JSON.parse(localStorage.getItem("notes")) || [])

useState钩子

useState 是 React 的一个钩子，用于在函数组件中引入状态。
它返回一个数组，有两个元素：

当前状态值（这里是 notes）。
更新状态的函数（这里是 setNotes）。

localStorage

localStorage 是浏览器提供的 API，用于在本地存储键值对数据。
localStorage.getItem("notes") 从 localStorage 中获取键为 “notes” 的数据，返回的结果是一个字符串。

JSON.parse

localStorage 中存储的所有数据都是字符串。
JSON.parse 将字符串解析为 JavaScript 对象。

如果存储的数据是一个 JSON 字符串，例如：“[1, 2, 3]”，调用 JSON.parse 后会得到 [1, 2, 3]。

|| 运算符

|| 是逻辑或运算符，用来提供一个默认值。
如果 localStorage.getItem("notes") 返回 null（即没有找到 “notes” 键），JSON.parse(localStorage.getItem("notes")) 的结果会是 null。
在这种情况下，表达式的右侧（[]）会被返回，表示 notes 的初始值是一个空数组。

2. 每次notes发生改变时，将notes保存到localStorage

  React.useEffect(() => {localStorage.setItem("notes", JSON.stringify(notes))}, [notes])

useEffect 是 React 的一个钩子，用于在函数组件中处理副作用。

副作用通常指与组件渲染逻辑无关的行为，例如：数据获取、订阅、手动 DOM 操作、或者日志记录等。

它的语法如下：

React.useEffect(effectFunction, dependencies);

effectFunction 是一个函数，在特定条件下运行。
dependencies 是一个数组，控制 effectFunction 的运行时机。

localStorage.setItem 是浏览器提供的 API，用于向 localStorage 中存储键值对。
它接受两个参数：

键：存储数据的名称（这里是 “notes”）。
值：存储的具体数据，必须是字符串。

JSON.stringify(notes)：

将 notes 转换为 JSON 格式的字符串，因为 localStorage 只能存储字符串数据。

当组件渲染后并且 notes 发生变化时：

useEffect 会被触发。
localStorage.setItem(“notes”, JSON.stringify(notes)) 将最新的 notes 数组保存到本地存储中。

如果 notes 没有变化：

即使组件重新渲染，useEffect 不会运行，因为 notes 的值没有改变。

3. 什么是 Lazy State Initialization?

通常情况下，useState 的初始值是直接计算出来的：

const [state, setState] = React.useState(computeInitialState());

这里 computeInitialState() 会在组件每次渲染时立即执行，即使结果只需要在初次渲染时使用。
如果 computeInitialState 是一个复杂的计算函数，就会浪费性能。

为了解决这个问题，React 提供了一种惰性初始化的方法：通过向 useState 传递一个函数，而不是直接传递计算结果。这种函数只会在组件第一次渲染时执行，之后不会再次调用。

惰性初始化

const [state, setState] = React.useState(() => computeInitialState());

当传递一个函数给 useState 时，React 只会在组件初次渲染时调用这个函数来计算初始状态。
后续的状态更新不再调用此函数。

4. 在React中实现删除笔记的操作

<button className="delete-btn"onClick={(event) => props.deleteNote(event, note.id)}
><i className="gg-trash trash-icon"></i>
</button>

<button> 元素

HTML 的按钮标签，用于定义一个可点击的交互元素。
在 React 中，可以绑定事件和自定义属性，并触发相关的事件处理程序。

回调函数中的 (event) => props.deleteNote(event, note.id) 是一个箭头函数，执行时调用 props.deleteNote 方法，并将两个参数传递给它：

event：原生的点击事件对象，提供有关点击的信息（如目标元素、鼠标位置等）。
note.id：当前笔记的唯一标识符，用于指定要删除的具体笔记。

<i> 是 HTML 的行内元素，通常用作图标的占位符。

  function deleteNote(event, noteId){event.stopPropagation()setNotes(oldNotes => oldNotes.filter(note => note.id !== noteId))}

event.stopPropagation()
作用：

阻止事件从当前元素传播到父元素或其他祖先元素（即阻止事件冒泡）。
防止删除按钮的点击事件触发父组件的其他事件处理逻辑（如整个笔记项的点击事件）。

场景举例:
假设笔记项的外层组件有一个点击事件绑定：

<div onClick={() => console.log("Note clicked!")}><button onClick={(event) => deleteNote(event, noteId)}>Delete</button>
</div>

如果没有 event.stopPropagation()：

点击删除按钮时，既会触发 deleteNote，又会触发外层 div 的 onClick。

有了 event.stopPropagation()：

点击删除按钮时，只会触发 deleteNote。

箭头函数 oldNotes => oldNotes.filter(...)
setNotes 接收一个更新函数，该函数的参数是当前的状态值 oldNotes。
filter 方法：

返回一个新数组，其中包含满足条件的所有元素。
条件：保留 id 不等于 noteId 的笔记，即删除 noteId 对应的笔记。

完整逻辑
通过 filter 遍历 oldNotes 数组：

如果 note.id !== noteId，该笔记被保留。
如果 note.id === noteId，该笔记被过滤掉。

返回的新数组赋值给 notes，并触发组件重新渲染。

5. 删除按钮的CSS实现

.delete-btn {display: none;background: none;border: none;
}

作用

定义删除按钮的初始样式，默认情况下按钮是隐藏的。

属性解释

display: none;：
隐藏元素，按钮不占据布局空间，不可见。
background: none;：
移除按钮的默认背景样式。
border: none;：
移除按钮的默认边框。

.title:hover > .delete-btn {display: block;
}

作用

当用户将鼠标悬停在 .title 元素上时，其子元素 .delete-btn 显示出来。

属性解释
display: block;：

让 .delete-btn 可见，并以块级元素形式显示。

> .delete-btn：

表示只选择直接子元素 .delete-btn，避免影响其他嵌套更深的 .delete-btn。

实现逻辑

通过伪类 :hover，动态切换按钮的显示状态，提供更好的用户交互体验。

.trash-icon {cursor: pointer;
}

作用

定义垃圾桶图标的样式，使其在用户鼠标悬停时具有点击效果。

属性解释
cursor: pointer;：

鼠标悬停时显示手型指针，表示该元素可点击。

.gg-trash {box-sizing: border-box;position: relative;display: block;transform: scale(var(--ggs,1));width: 10px;height: 12px;border: 2px solid transparent;box-shadow:0 0 0 2px,inset -2px 0 0,inset 2px 0 0;border-bottom-left-radius: 1px;border-bottom-right-radius: 1px;margin-top: 4px;
}

作用

定义垃圾桶图标的外观，包括大小、形状和整体样式。

属性解释
box-sizing: border-box;：

控制元素的宽高计算方式，包含内边距和边框。

position: relative;：

定义元素为相对定位，用于配合子元素的绝对定位。

transform: scale(var(--ggs,1));：

使用 CSS 变量 --ggs 控制缩放比例，默认为 1。

width: 10px; height: 12px;：

定义垃圾桶的宽度和高度。

border: 2px solid transparent;：

设置透明的边框。

box-shadow：
为垃圾桶形状添加外边框和内部边框：

0 0 0 2px：外部边框，2px 宽。
inset -2px 0 0 和 inset 2px 0 0：内部分隔线。

border-bottom-left-radius 和 border-bottom-right-radius：

为垃圾桶底部的两个角添加圆角。

margin-top: 4px;：

在顶部增加间距。

.gg-trash::after {background: currentColor;border-radius: 3px;width: 16px;height: 2px;top: -4px;left: -5px;
}

作用

添加垃圾桶的横梁部分（通常表示垃圾桶的盖子）。

属性解释
background: currentColor;：

使用当前文本颜色作为背景颜色。

border-radius: 3px;：

添加圆角，使盖子边缘更平滑。

width: 16px; height: 2px;：

定义横梁的大小。

top: -4px; left: -5px;：

使用绝对定位将横梁放置在垃圾桶顶部的位置。

.gg-trash::before {width: 10px;height: 4px;border: 2px solid;border-bottom: transparent;border-top-left-radius: 2px;border-top-right-radius: 2px;top: -7px;left: -2px;
}

作用

添加垃圾桶的盖子部分（弯曲的顶部结构）。

属性解释
width: 10px; height: 4px;：

定义盖子的宽度和高度。

border: 2px solid;：

设置盖子的边框。

border-bottom: transparent;：

移除盖子底部的边框，使其开口朝下。

border-top-left-radius 和 border-top-right-radius：

设置盖子顶部的两个角为圆角。

top: -7px; left: -2px;：

使用绝对定位将盖子放置在垃圾桶顶部。

总结：垃圾桶图标的整体实现

.gg-trash 是垃圾桶的主体，包括边框、阴影等基础结构。
::after 添加横梁（垃圾桶盖的下部分）。
::before 添加盖子顶部的弯曲结构。

结合这些样式，实现了一个完整的垃圾桶图标。

交互效果总结

.delete-btn 默认隐藏，用户鼠标悬停在 .title 上时显示。
鼠标悬停时，垃圾桶图标变为可点击状态，通过样式 cursor: pointer 提供视觉提示。

6. 查找当前笔记id

const [currentNoteId, setCurrentNoteId] = React.useState((notes[0]?.id) || "")
const currentNote = notes.find(note => note.id === currentNoteId) || notes[0]

React.useState：

定义一个状态变量 currentNoteId 和其对应的更新函数 setCurrentNoteId。

notes[0]?.id：

通过可选链操作符 (?.)，尝试访问数组 notes 中第一项的 id。
如果 notes 数组为空或者 notes[0] 为 undefined，notes[0]?.id 返回 undefined 而不会报错。

|| ""：
如果 notes[0]?.id 为 undefined，currentNoteId 的初始值设置为空字符串 ""。

效果

如果 notes 数组非空，currentNoteId 的初始值是第一项笔记的 id。
如果 notes 数组为空，currentNoteId 的初始值是 “”。

notes.find(note => note.id === currentNoteId)：

使用 Array.prototype.find() 方法在 notes 数组中查找 id 等于 currentNoteId 的笔记。
find 方法返回第一个满足条件的元素。如果没有找到匹配的元素，返回 undefined。

|| notes[0]：
如果没有找到匹配的笔记（即 find 返回 undefined），使用 || 提供默认值，返回 notes[0]（数组的第一项）。

React自学：如何使用localStorage，以及如何实现删除笔记操作

1. 初始化notes 以下这段代码完成了这些操作： 调用 localStorage.getItem("notes") 从浏览器的本地存储中获取名为 “notes” 的数据。使用 JSON.parse 将获取到的字符串解析成数组。如果本地存储中没有 “notes” 数据（返回值为 null&#…...

编程日记 2025/5/31 10:39:01

【CSS in Depth 2 精译_079】第 13 章：渐变、阴影与混合模式概述 + 13.1：CSS 渐变效果（上）——使用多个颜色节点

当前内容所在位置（可进入专栏查看其他译好的章节内容） 第四部分视觉增强技术 ✔️【第 13 章渐变、阴影与混合模式】 ✔️ 13.1 渐变 ✔️ 13.1.1 使用多个颜色节点（上） ✔️13.1.2 颜色插值方法（中）13.1…...

编程日记 2025/6/2 0:51:11

汽车供应链 “剧变”开始，“智能感知潜在龙头”诞生

智能汽车产业链“剧变”已经开启，智能感知软硬件能力的权重正在不断被放大。比如满足高阶泊车的第二代AK2超声波传感器、满足人机共驾场景需求的电子外后视镜（CMS）、iTOF 3D成像视觉感知（用于舱内监控）等新产品&…...

编程日记 2025/6/2 18:31:07

3大Excel免费功能

推荐几个免费excel图表绘制工具 Power Map Power Map是Excel的内置功能 Power Map可在Windows用户的Excel 2013或者Excel 2016或者Office 365中使用，如下图，看案例动态地图1 动态地图2...

编程日记 2025/5/29 10:52:20

linux centos 7 安装 mongodb7

MongoDB 是一个基于文档的 NoSQL 数据库。 MongoDB 是一个文档型数据库，数据以类似 JSON 的文档形式存储。 MongoDB 的设计理念是为了应对大数据量、高性能和灵活性需求。 MongoDB使用集合（Collections）来组织文档（Documents&a…...

编程日记 2025/6/4 14:22:12

## 拉取 MongoDB 镜像docker pull mongo:latest## 挂载文件目录：mkdir -p /usr/local/mongo/configmkdir -p /usr/local/mongo/datamkdir -p /usr/local/mongo/logstouch /usr/local/mongo/config/mongod.confchmod 777 /usr/local/mongo## 配置文件##vim …...

编程日记 2025/6/1 22:10:59

问题记录：CH592 PB6/PB10中断输入，无法从掉电模式唤醒

问题描述： PB6上拉输入，连接按键 PB10上拉输入，连接外部充电芯片状态管脚。不充电时开漏输出，充电时低电平配置PB6和PB10为上拉输入，下降沿触发中断，然后进入掉电模式理论上： PB6按键触发…...

编程日记 2025/6/1 17:05:47

搭建分布式Spark集群

title: 搭建分布式Spark集群 date: 2024-11-29 12:00:00 categories: - 服务器 tags: - Spark - 大数据搭建分布式Spark集群本次实验环境：Centos 7-2009、Hadoop-3.1.4、JDK 8、Zookeeper-3.6.3、scala-2.11.5、Spark-3.2.1 功能规划 MasterSlave1Slave2主节点…...

编程日记 2025/6/1 20:27:55

BTP Integration Suite CPI Apache Camel

官网文档： https://help.sap.com/docs/integration-suite/sap-integration-suite/what-is-sap-integration-suite CPI 云集成(CPI)有以下几个特性： SAP Cloud Integration通过消息交换支持端到端流程集成。它基于Apache软件基金会的开源框架Camel。 …...

编程日记 2025/6/1 12:42:47

Vue-Form-Making：Star5.5k，一款强大的Vue表单设计器,适用于低代码平台、自定义表单

嗨，大家好，我是小华同学，关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法 Vue-Form-Making是一个开源的Vue表单设计器，它允许用户通过拖拽方式快速生成表单，支持多种表单组件和布局。核心功能 1. 拖拽…...

编程日记 2025/6/1 13:41:05

使用 Vite 和 Redux Toolkit 创建 React 项目

文章目录 1. 创建 React 项目2. 安装依赖3. 创建状态仓库user.js创建 shopSlice 4. 在状态仓库中合并切片5. 在入口文件中导入并使用 store6. 获取切片中的数据7. 修改数据结尾在本教程中，我们将通过使用 Vite 创建一个 React 项目，并结合 Redux Toolki…...

编程日记 2025/6/3 0:46:31

jmeter连接mysql

查询mysql数据库版本 SELECT VERSION(); 下载jmeter mysql 驱动jar包，版本低于mysql版本，放在jmeter的lib 路径下 MySQL :: Download MySQL Connector/J (Archived Versions) 添加JDBC Connection Configuration 填写 variable name 及数据库信息注意…...

编程日记 2025/5/30 3:12:13

sql中case when若条件重复执行的顺序

sql case when若条件重复执行的顺序在 SQL 中，如果你在 CASE 表达式中定义了多个 WHEN 子句，并且这些条件有重叠，那么 CASE 表达式的执行顺序遵循以下规则： （1）从上到下：SQL 引擎会按照 CASE …...

编程日记 2025/6/1 5:35:09

代码随想录算法训练营第五十天 | 图 | 并查集

Day 50 总结自己实现中遇到哪些困难今日收获，记录一下自己的学习时间 15:00 - 16:0018:00 - 19:45 图论深度收缩 & 广度搜索 BFS, DFS, visited数组, 四个方向并查集数组代表链表, 用集合中的一个元素代表集合的根最小生成树拓扑排序最短路径算法图论基…...

编程日记 2025/6/2 15:02:33

tryhackme——Pre Security(安检前)-Offensive Security（进攻性安全）

这里我用的edge的插件闪击翻译。这里我英语不好，所以用这个可以顺便学习下英语。任务一：What is Offensive Security?（什么是进攻性安全?） 很简单啊，通过阅读，知道以下哪个选项更能代表您模拟黑客操作…...

编程日记 2025/6/2 19:32:10

vue iframe进行父子页面通信并切换URL

使用通义千问提问后得到一个很好的示例。需求是2个项目需要使用同一个面包屑进行跳转，其中一个是iframe所在的项目，另一个需要通过地址访问。通过 window.parent.postMessage ，帮助 <iframe> 内嵌入的子页面和其父页面之间进行跨域通…...

编程日记 2025/6/4 12:23:51

Cesium 无人机航线规划（区域航线）

区域航线，即划定一片区域一键巡查这里选择点几个点，形成的区域内计算规划航线...

编程日记 2025/5/28 5:29:53

[NOIP2016 普及组] 海港 -STL-队列queue

[NOIP2016 普及组] 海港题目背景 NOIP2016 普及组 T3 题目描述小 K 是一个海港的海关工作人员，每天都有许多船只到达海港，船上通常有很多来自不同国家的乘客。小 K 对这些到达海港的船只非常感兴趣，他按照时间记录下了到达海港的每一…...

编程日记 2025/6/2 14:58:21

前端页面导出word

html-docx-js bug: vite使用html-docx.js会报错，点击下载上方文件替换即可正文 npm install html-docx-js -S npm install file-saver -S<template><div id"managerReport">word内容......</div> </template><script>&l…...

编程日记 2025/6/1 21:01:57

C++中的深拷贝和浅拷贝

浅拷贝浅拷贝：就是简单的赋值操作。浅拷贝问题：如果有指针指向堆区内存时，不同对象的指针成员指向同一块堆区内存，当对象释放时，该堆区内存会被释放两次。当一个对象修改堆区内存是，另一个对象也随之变…...

编程日记 2025/6/3 21:57:37

MobileLLM开发安卓AI的体验（一）

MobileLLM是一个在安卓端跑的大语言模型，关键它还有调动api的能力 https://github.com/facebookresearch/MobileLLM 项目地址是这个。看了下，似乎还是中国人团队 article{liu2024mobilellm, title{MobileLLM: Optimizing Sub-billion Parameter Langua…...

编程日记 2025/5/31 22:23:35

MySQL的并发控制与MVCC机制深度解析

目录 1. MySQL中的并发问题2. 数据库的隔离级别3. MVCC（多版本并发控制）机制3.1 MVCC的实现原理3.2 Read View详解3.3 当前读与快照读 4. MVCC在不同隔离级别下的工作方式5. MVCC解决幻读问题6. MVCC的优缺点优点：缺点： 7. MVCC在…...

编程日记 2025/6/4 17:26:20

搭建Tomcat（六）---Response的实现

目录引入一、前端项目容器的搭建重建项目: 1.创建一个新的项目： 2.创建HTML文件 3.将先前编写的所有tomcatJava文件挪过来二、配置java文件 1.重启一下MyTomcat 2.配置两个工具包 ①FileUtil ②ResponseUtil（响应头） 三、处理…...

编程日记 2025/5/31 1:06:39

深度学习物体检测之YOLOV5源码解读

V5比前面版本偏工程化,项目化,更贴合实战一.V5版本项目配置 (1)整体项目概述首先github直接查找yolov5，下载下来即可。在训练时，数据是怎么处理的？网络模型架构是怎么设计的(如各层的设计)？yolov5要求是大于python3.8与大于等…...

编程日记 2025/6/2 11:26:32

Ubuntu22.04配置3D gaussian splatting

这篇博客提供了3D gaussian splatting在新安装Ubuntu上的配置过程。 1.拉仓库 2.安装显卡驱动和cuda版本 3.安装Pytorch 4.安装Pycharm和配置Python 5.安装附加依赖项（方法一） 6.安装Anaconda（方法二） 7.测试 1.拉仓库 # HT…...

编程日记 2025/6/2 17:49:38

【Python知识】python基础-关于异常处理

python的异常处理知识概览基本用法自定义异常捕获特定异常信息异常抛出概览在Python中，异常处理是通过try、except和finally等关键字来实现的。这些关键字允许你捕获和处理在程序运行时可能出现的错误和异常情况，从而避免程序崩溃，并允许…...

编程日记 2025/6/3 4:02:04

golang 使用gzip对json例子

package main import ( "bytes" "compress/gzip" "encoding/json" "fmt" "io" "log" ) // User 结构体定义 type User struct { ID int json:"id" Name string json:"name" Age in…...

编程日记 2025/5/31 10:53:56

qt-C++笔记之自定义类继承自 `QObject` 与 `QWidget` 及开发方式详解

qt-C笔记之自定义类继承自 QObject 与 QWidget 及开发方式详解 code review! 参考笔记 1.qt-C笔记之父类窗口、父类控件、对象树的关系 2.qt-C笔记之继承自 QWidget和继承自QObject 并通过 getWidget() 显示窗口或控件时的区别和原理 3.qt-C笔记之自定义类继承自 QObject 与 QW…...

编程日记 2025/6/1 23:16:32

利用git上传项目到GitHub

GitHub是基于git实现的代码托管。git是目前最好用的版本控制系统了，非常受欢迎，比之svn更好。 GitHub可以免费使用，并且快速稳定。利用GitHub，你可以将项目存档，与其他人分享交流，并让其他开发者帮助你一…...

编程日记 2025/6/4 13:54:58

机器学习预处理-表格数据的空值处理

机器学习预处理-表格数据的空值处理机器学习预处理-表格数据的分析与可视化中详细介绍了表格数据的python可视化，可视化能够帮助我们了解数据的构成和分布，是我们进行机器学习的必备步骤。上文中也提及，原始的数据存在部分的缺失&#xff0…...

编程日记 2025/6/2 20:05:12

python学opencv|读取图像（十二）BGR图像转HSV图像

【1】引言前述已经学习了opencv中图像BGR相关知识，文章链接包括且不限于下述： python学opencv|读取图像（六）读取图像像素RGB值_opencv读取灰度图-CSDN博客 python学opencv|读取图像（七）抓取像素数据顺利…...

编程日记 2025/5/31 4:58:08

【C语言】库函数常见的陷阱与缺陷(六)：输入输出函数

目录一、printf 函数 1.1. 功能与用法 1.2. 陷阱与缺陷 1.3. 安全使用建议 1.4. 代码示例二、scanf 函数 2.1. 功能与用法 2.2. 陷阱与缺陷 2.3. 安全使用建议 2.4. 代码示例三、gets 函数 3.1. 功能与用法 3.2. 陷阱与缺陷 3.3. 安全使用建议 3.4. 代码示例…...

编程日记 2025/5/28 23:28:37

sunset: midnight

https://www.vulnhub.com/entry/sunset-midnight,517/ 主机发现端口扫描探测存活主机，8是靶机 nmap -sP 192.168.56.0/24 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-12-05 16:49 CST Nmap scan report for 192.168.56.1 …...

编程日记 2025/5/30 7:33:55

CSS Backgrounds(背景)

CSS Backgrounds(背景) Introduction(介绍) CSS backgrounds play a crucial role in web design, allowing developers to apply colors, images, and other decorative elements to the background of HTML elements. This enhances the visual appeal of web pages and he…...

编程日记 2025/6/3 7:51:14