React 项目中的本地存储与自定义 Hooks 全解析在现代前端开发中，React 已经成为了构建用户界面的首选框架之

在现代前端开发中，React 已经成为了构建用户界面的首选框架之一。随着项目复杂度的提升，合理使用本地存储和自定义 Hooks 能有效提升代码的可维护性和性能。

一、本地存储基础

1.1 本地存储概述

本地存储是在浏览器端存储数据的一种方式，它允许我们在用户的浏览器中保存数据，即使页面刷新或关闭后数据仍然存在。常见的本地存储方式有 localStorage、cookie 和 IndexDB 等。

1.2 `localStorage` 详解

localStorage 是 HTML5 提供的一种本地存储 API，它以键值对（key-value）的形式存储数据。以下是 localStorage 的基本操作方法：

setItem(key, value)：存储数据，接受键和值作为参数。
getItem(key)：获取数据，根据键获取对应的值。
removeItem(key)：删除数据，根据键删除对应的数据。

示例代码如下：

// 存储数据
localStorage.setItem('username', 'JohnDoe');

// 获取数据
const username = localStorage.getItem('username');
console.log(username); 

// 删除数据
localStorage.removeItem('username');

1.3 `BOM` 和 `DOM` 简介

在了解本地存储时，我们还需要知道 BOM（Browser Object Model）和 DOM（Document Object Model）的概念。

BOM：浏览器对象模型，提供了与浏览器窗口进行交互的对象和方法，例如 window 对象。
DOM：文档对象模型，提供了与 HTML 文档进行交互的对象和方法，通过 DOM 可以动态地操作 HTML 元素。

二、`localStorage` 与 `cookie` 的异同

2.1 相同点

localStorage 和 cookie 都可以在浏览器端存储数据，用于在不同页面或会话之间共享信息。

2.2 不同点

2.2.1 存储大小

cookie：一般大小限制在 4KB 左右，如果 cookie 太大，会影响 HTTP 请求的性能。
localStorage：存储容量通常为 5MB，比 cookie 大很多。

2.2.2 设置位置

cookie：前端和后端都可以设置，并且可以设置过期时间、域名（domain）等属性，用于数据隔离。
localStorage：原文档中 “只在服务器端” 的表述有误，localStorage 是在客户端（浏览器）进行操作的，同样可以设置域名限制。

2.2.3 用途

cookie：常用于身份验证、会话管理等场景，因为每次 HTTP 请求都会自动携带 cookie 信息。
localStorage：适合存储一些不需要随请求发送的数据，例如用户的偏好设置、缓存数据等。

2.3 `IndexDB`

IndexDB 是一种更强大的本地数据库，存储容量可以达到 GB 级别，适合存储大量结构化数据。

三、自定义 Hooks 入门

3.1 什么是自定义 Hooks

自定义 Hooks 是 React 中一种复用状态逻辑的方式，它本质上是一个以 use 开头的 JavaScript 函数。通过自定义 Hooks，可以将一些通用的状态逻辑封装起来，提高代码的复用性。

3.2 自定义 Hooks 的特点

以 use 开头：这是 React 对自定义 Hooks 的命名约定，有助于识别和区分普通函数。
封装功能：可以将一些简单函数、响应式状态和 useEffect 逻辑封装起来，实现代码的复用。
函数式编程思想：返回所需的状态和操作函数，让组件更好地聚焦于模板渲染。

3.3 自定义 Hooks 在现代 React 应用中的地位

自定义 Hooks 是现代 React 应用架构的重要组成部分，通常会在项目中创建一个 hooks 目录，用于存放自定义 Hooks。这些 Hooks 可以分为框架通用部分和业务定制部分，例如 ahooks 就是一个常用的业务定制 Hooks 库。

3.4 自定义 Hooks 示例

假设我们有一个 todos 应用，需要封装添加、切换状态和删除 todo 的逻辑，可以创建一个自定义 Hook：

import { useState, useEffect } from 'react';

const useTodos = () => {
  const [todos, setTodos] = useState([]);

  // 模拟从 localStorage 加载数据
  useEffect(() => {
    const savedTodos = localStorage.getItem('todos');
    if (savedTodos) {
      setTodos(JSON.parse(savedTodos));
    }
  }, []);

  // 保存数据到 localStorage
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);

  const addTodo = (todo) => {
    setTodos([...todos, todo]);
  };

  const toggleTodo = (index) => {
    const newTodos = [...todos];
    newTodos[index].completed = !newTodos[index].completed;
    setTodos(newTodos);
  };

  const deleteTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  return { todos, addTodo, toggleTodo, deleteTodo };
};

export default useTodos;

在组件中使用该自定义 Hook：

import React from 'react';
import useTodos from '../hooks/useTodos';

const Todos = () => {
  const { todos, addTodo, toggleTodo, deleteTodo } = useTodos();

  return (
    <div>
      <h1>Todo List</h1>
      <button onClick={() => addTodo('New Todo')}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
              {todo.text}
            </span>
            <button onClick={() => toggleTodo(index)}>Toggle</button>
            <button onClick={() => deleteTodo(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Todos;

四、自定义 Hooks 的优势

4.1 代码复用

通过自定义 Hooks，可以将一些通用的状态逻辑封装起来，在多个组件中复用，减少代码重复。

4.2 组件聚焦

组件只需要关注模板渲染，将状态管理和业务逻辑交给自定义 Hooks 处理，提高了组件的可读性和可维护性。

4.3 函数式编程

自定义 Hooks 遵循函数式编程思想，返回所需的状态和操作函数，使代码更加简洁和易于测试。

五、总结与展望

5.1 总结

本文介绍了 React 项目中本地存储和自定义 Hooks 的相关知识。localStorage、cookie 和 IndexDB 为我们提供了不同场景下的本地存储方案，而自定义 Hooks 则是 React 中复用状态逻辑的强大工具。合理使用这些技术，可以提高项目的性能和可维护性。

5.2 展望

随着 React 生态的不断发展，自定义 Hooks 的应用场景会越来越广泛。未来，我们可以看到更多优秀的自定义 Hooks 库和最佳实践出现，帮助我们更加高效地开发 React 应用。同时，本地存储技术也在不断演进，为我们提供更强大、更安全的数据存储能力。

React 项目中的本地存储与自定义 Hooks 全解析