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

react js 笔记 3

article 2025/1/24 17:40:06

起因，目的:

专注。学习 react js 的时候，就专注这一方面，其他都不要碰。
- 比如， python, C语言， R, 都不看。只看 js.
- 专注，减少来回切换。
重复。自己写的笔记，需要反复多看几遍，每天都翻翻，适当的地方进行修改，很熟悉的地方就删掉。
记录。笔记写的有点乱，没关系的。写下来就行。

1. js 问号操作符

这个语法，js 和 ts 都有。

<h1>{data?.title} </h2>
语法是: object?.property
如果 object 是 null 或 undefined，那么表达式会立即返回 undefined, 而不报错。

2. useState()

使用上，我的理解是

const [stateName, setStateFunction] = useState(defaultValue)
const [状态名称，, 设置状态函数] = useState(默认的状态值)
useState(这里也可以传入一个函数！用于初始化，只会执行一次！)

3. react 存储数据到本地存储， 2种写法

// 使用 useEffect
import { useState, useEffect } from "react";

// 第一种写法， 存储数据
function persistData(newList) {
  localStorage.setItem("todos", JSON.stringify({ todos: newList }));
}

// 第2种写法， 存储数据
// 每当 [todos] 发生变化时， useEffect 都会执行， 存储 todos 到本地
useEffect(() => {
  localStorage.setItem("Items", JSON.stringify(todos));
}, [todos]);

4. react 读取本地存储数据

// 读取本地存储数据
import { useState, useEffect } from "react";

const [todos, setTodos] = useState(() => {
  const localValue = localStorage.getItem("todos");
  if (localValue == null) return [];
  return JSON.parse(localValue).todos;
});