自定义hook创建使用

自定义 Hook 使用原则

• 自定义 Hook 必须以 "use" 开头，这是一个约定俗成的规则，能帮助我们更容易地识别其作为 Hook 的使用方式。
• 在自定义 Hook 中只能在最顶层调用其他 Hook。不能在循环、条件或嵌套函数中调用 Hook。

1. useFetch - 用于进行异步数据请求

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(url);
      const data = await response.json();
      setData(data);
      setLoading(false);
    }
    fetchData();
  }, [url]);

  return { data, loading };
}

然后你可以在组件中这样使用：

jsx复制代码
function App() {
  const { data, loading } = useFetch('https://api.example.com/data');

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

  return (
    // render your component with data
  );
}

2. useFormInput - 用于处理表单输入字段

import { useState } from 'react';

function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  function handleChange(e) {
    setValue(e.target.value);
  }

  return {
    value,
    onChange: handleChange,
  };
}

然后你可以在组件中这样使用：

function Form() {
  const name = useFormInput('');
  const password = useFormInput('');

  return (
    <form>
      <input type="text" {...name} placeholder="Name" />
      <input type="password" {...password} placeholder="Password" />
    </form>
  );
}

3. useLocalStorage - 用于处理本地存储

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });

  const setValue = value => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.log(error);
    }
  };

  return [storedValue, setValue];
}

然后你可以在组件中这样使用：

function Counter() {
  const [count, setCount] = useLocalStorage('count', 0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count   1)}>
        Click me
      </button>
    </div>
  );
}

这篇好文章是转载于：学新通技术网