react js 笔记 3

起因， 目的:

1. 专注。 学习 react js 的时候， 就专注这一方面 ，其他都不要碰。

   • 比如， python, C语言， R, 都不看。 只看 js.
   • 专注，减少来回切换。

2. 重复。 自己写的笔记，需要反复多看几遍， 每天都翻翻， 适当的地方进行修改， 很熟悉的地方就删掉。

3. 记录。笔记写的有点乱，没关系的。 写下来就行。

1. js 问号操作符

这个语法，js 和 ts 都有。

<h1>{data?.title} </h2>

语法是: object?.property

如果 object 是 null 或 undefined，那么表达式会立即返回 undefined, 而不报错。

2. useState()

1. 使用上，我的理解是

   const [stateName, setStateFunction] = useState(defaultValue)

   const [状态名称，, 设置状态函数] = useState(默认的状态值)

2. 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;
});

走过路过，支持一下啊。