存储ReactJS hooks文件的最佳实践是将每个自定义hook放在一个单独的文件中,并按功能进行组织。以下是一个示例的解决方法:
- 创建一个名为
useFetchData.js
的文件,用于处理数据获取逻辑:
import { useState, useEffect } from 'react';
const useFetchData = (url) => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(url);
const json = await response.json();
setData(json);
setLoading(false);
} catch (error) {
setError(error);
setLoading(false);
}
};
fetchData();
}, [url]);
return { data, loading, error };
};
export default useFetchData;
- 创建一个名为
useLocalStorage.js
的文件,用于处理本地存储逻辑:
import { useState } from 'react';
const useLocalStorage = (key, initialValue) => {
const [value, setValue] = useState(() => {
const storedValue = localStorage.getItem(key);
return storedValue !== null ? JSON.parse(storedValue) : initialValue;
});
const updateValue = (newValue) => {
setValue(newValue);
localStorage.setItem(key, JSON.stringify(newValue));
};
return [value, updateValue];
};
export default useLocalStorage;
- 在组件中使用这些自定义hook:
import React from 'react';
import useFetchData from './useFetchData';
import useLocalStorage from './useLocalStorage';
const MyComponent = () => {
const { data, loading, error } = useFetchData('https://api.example.com/data');
const [value, setValue] = useLocalStorage('myValue', 'default');
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error.message}</div>;
}
return (
<div>
<h1>Data: {data}</h1>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
</div>
);
};
export default MyComponent;
通过将每个自定义hook放在单独的文件中,可以更好地组织和复用代码,并使组件更加清晰和可维护。