React使用中hook的使用

针对项目开发过程中使用到的useEffect、useState钩子函数进行记录。

useState

useEffect

 问题引入：

使用到useState是在一个小项目中，考虑到项目存储数据量并不多，没有去进行redux的引入。（后续证明还是redux好用，哎）

需求是存储一个本地数据（刷新不会丢失），每次按钮提交时进行数据更新。

想到的实现方案是：数据存储在localStorage中，然后每次提交时都使用useState进行数据更新，即采用useEffect钩子+LocalStorage每次页面初渲染时进行读取，更改时动态更新。

找到一篇非常棒的文章：使用 localStorage 与 React Hooks - 掘金

大佬写的非常通俗易懂，而且思路清晰，在此膜拜！

小小分析一下带佬的代码

import { useState, useEffect } from "react";

function getStorageValue(key, defaultValue) {
  // getting stored value
  const saved = localStorage.getItem(key);
  const initial = JSON.parse(saved);
  return initial || defaultValue;
}

export const useLocalStorage = (key, defaultValue) => {
  const [value, setValue] = useState(() => {
    return getStorageValue(key, defaultValue);
  });

  useEffect(() => {
    // storing input name
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
};

`getStorageValue` 函数用于从 `localStorage` 中获取存储的值，并返回它。如果值不存在，则返回默认值。这个函数在初始化状态时被调用。

`useLocalStorage` 自定义钩子函数被定义。它接受两个参数：`key` 和 `defaultValue`。`key` 是存储在 `localStorage` 中的键，`defaultValue` 是默认值。

在 `useLocalStorage` 内部，使用 `useState` 钩子创建一个名为 `value` 的状态变量，并且通过调用 `getStorageValue` 函数来初始化它。这意味着在组件首次渲染时，`value` 的初始值将从 `localStorage` 中读取或者使用默认值。

使用 `useEffect` 钩子来监听状态变量 `value` 和 `key` 的变化。当它们发生变化时，将新的值存储到 `localStorage` 中。这样可以确保每次状态变化时都会及时同步到本地存储。

钩子函数返回一个数组 `[value, setValue]`，其中包含当前的值 `value` 和一个用于更新值的函数 `setValue`。这样，组件内部就可以使用这两个值和函数来读取和更新本地存储的数据。

使用这个自定义的 `useLocalStorage` 钩子可以简化在组件中操作 `localStorage` 的过程。例如，可以这样使用它：

const [name, setName] = useLocalStorage('name', 'John');

// 获取存储的值
console.log(name); // 输出存储的名字

// 更新存储的值
setName('Alice');

通过这种方式，可以方便地在组件中读取和更新本地存储的数据，同时保持了数据的持久性，并且与 `useState` 钩子的用法非常类似。

但是当我用这个方式去进行循环渲染时，存在问题：每次一个组件内name更改后，其他组件的name不会发生改变，相当于每个组件都维护自己的name，只有在组件刷新才重新进行渲染，再更改值。所以这个方式适合某个值的单次使用，而不适合多个组件同时渲染的数据共享。

如果要进行一个值在更新时还要通知所有组件，那就只能进行组件通信，新开一篇文章写得了。