当前位置：首页 > 文章列表 > 文章 > 前端 > React 中的自定义 Hook：用例和意义

React 中的自定义 Hook：用例和意义

来源：dev.to 2024-07-20 14:25:03 0浏览收藏

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《React 中的自定义 Hook：用例和意义》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

react 中的自定义钩子是封装可重用逻辑、管理状态和处理副作用的绝佳方法，可以保持代码整洁和可维护。以下是一些关键用例以及创建自定义挂钩的意义：

1.跨组件重用逻辑

示例：从 api 获取数据。
您可以创建一个自定义挂钩（例如 usefetch）来封装获取数据并处理加载、成功和错误状态的逻辑。然后可以在多个组件中重用该逻辑。

import { usestate, useeffect } from 'react';

const usefetch = (url) => {
  const [data, setdata] = usestate(null);
  const [loading, setloading] = usestate(true);
  const [error, seterror] = usestate(null);

  useeffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setdata(data);
        setloading(false);
      })
      .catch((error) => {
        seterror(error);
        setloading(false);
      });
  }, [url]);

  return { data, loading, error };
};

export default usefetch;

2.管理复杂的状态逻辑

示例：管理表单状态
自定义挂钩可用于以可重用的方式管理表单状态和验证逻辑。

import { usestate } from 'react';

const useform = (initialstate) => {
  const [values, setvalues] = usestate(initialstate);

  const handlechange = (event) => {
    const { name, value } = event.target;
    setvalues({
      ...values,
      [name]: value,
    });
  };

  const resetform = () => {
    setvalues(initialstate);
  };

  return [values, handlechange, resetform];
};

export default useform;

3.抽象副作用

示例：与本地存储同步。
您可以创建自定义挂钩来管理与本地存储同步的状态。

import { useState, useEffect } from 'react';

const useLocalStorage = (key, initialValue) => {
  const [value, setValue] = useState(() => {
    const storedValue = localStorage.getItem(key);
    return storedValue ? JSON.parse(storedValue) : initialValue;
  });

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

  return [value, setValue];
};

export default useLocalStorage;