React：自定义Hooks 总结

在 React 项目中，自定义 Hooks 是一个强大的工具，它可以让你在组件之间共享状态和逻辑，从而提高代码的可重用性和可维护性。本文将总结我们在项目中创建和使用的三个自定义 Hooks：useTags、useUpdate 和 useRecords。

useTags

useTags Hook 主要负责管理标签。它使用 useState 初始化一个名为 tags 的状态，其中存储着标签数组。以下是 useTags Hook 的实现：

import { useState } from 'react';

const useTags = () => {
  const [tags, setTags] = useState([]);

  const addTag = (tag) => {
    setTags([...tags, tag]);
  };

  const removeTag = (tag) => {
    setTags(tags.filter((t) => t !== tag));
  };

  return {
    tags,
    addTag,
    removeTag,
  };
};

useUpdate

useUpdate Hook 负责更新状态。它接收一个更新函数作为参数，该函数执行状态更新。以下是 useUpdate Hook 的实现：

import { useState, useEffect } from 'react';

const useUpdate = (updaterFn) => {
  const [, forceUpdate] = useState(0);

  useEffect(() => {
    updaterFn();
  }, [forceUpdate]);

  const update = () => {
    forceUpdate((prev) => prev + 1);
  };

  return update;
};

useRecords

useRecords Hook 管理记录。它使用 useState 初始化一个名为 records 的状态，其中存储着记录数组。以下是 useRecords Hook 的实现：

import { useState } from 'react';

const useRecords = () => {
  const [records, setRecords] = useState([]);

  const addRecord = (record) => {
    setRecords([...records, record]);
  };

  const removeRecord = (record) => {
    setRecords(records.filter((r) => r !== record));
  };

  return {
    records,
    addRecord,
    removeRecord,
  };
};

使用这些自定义 Hooks，我们可以轻松地在组件之间共享和管理状态，从而创建更可维护、更易于重用的代码库。