让你的React项目更好用的自定义Hooks工具箱

2023-09-02 13:37:54

在上一篇文章中，我们介绍了几个React中常用的自定义Hook，帮助你轻松管理状态和组件。今天，我们将继续学习更多实用的自定义Hook，这些Hook可以帮助你操作cookie、管理表单、处理异步任务等。让我们一起来看看吧！

useCookie

cookie是存储在浏览器中的小块数据，它可以帮助你跟踪用户的会话信息、首选项等。在React中，我们可以使用useCookie Hook来轻松操作cookie。

import { useCookie } from "react-cookie";

const MyComponent = () => {
  const [token, setToken] = useCookie("token");

  // 设置token
  setToken("1234567890");

  // 获取token
  console.log(token);

  // 删除token
  setToken(null);

  return (
    <div>
      <h1>My Component</h1>
    </div>
  );
};

useForm

表单是Web开发中常见且重要的元素。在React中，我们可以使用useForm Hook来轻松管理表单。

import { useForm } from "react-hook-form";

const MyForm = () => {
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" name="name" ref={register({ required: true })} />
      <input type="email" name="email" ref={register({ required: true })} />
      <button type="submit">提交</button>
    </form>
  );
};

useAsync

异步任务在Web开发中也很常见。在React中，我们可以使用useAsync Hook来轻松处理异步任务。

import { useAsync } from "react-async";

const MyComponent = () => {
  const { isLoading, error, data } = useAsync(async () => {
    const response = await fetch("https://example.com/api/data");
    return response.json();
  }, []);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h1>My Component</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};