记录学习过程中写的自定义hooks

• 防抖

export const useDebounce = <T>(value: T, delay?: number) => {
	const [debounceValue, setDebounceValue] = useState(value);
	useEffect(()=>{
		const debounceTimer = setTimeout(() => setDebounceValue(value), delay);
		return () => clearTimeout(debounceTimer);
	},[]);
	return debounceValue;
}

• 操作数组

export const useArray = <T>(initArray: T[]) => {
	const [array, setArray] = useState(initArray);
	return {
		array,
		setArray,
		add: (item: T) => setValue([...array, item]),
		removeIndex: (index: number) => {
			const copyArray = [...array];
			copyArray.splice(index, 1);
			setArray(copyArray);
		},
		clear: () => setArray([])
	}
}

• context 共享全局数据

// 创建context 和 provider
interface Users {
	id: string;
	token: string;
}

const AuthContext = React.createContext<{users: Users} | undefined>(undefined);
AuthContext.displayName = 'AuthContext';

export const AuthProvider = ({children}: {children: ReactNode}) => {
	const users = {id: '', token: ''}
	return <AuthContext.Provider children={children} value={{users}} />
}

// 抽离 useContext，使其可以在AuthProvider定义的范围内使用
export const useAuth = () => {
	const context = useContext(AuthContext);
	if(!context){
		throw new Error('useAuth 必须在 AuthProvider中使用')
	}else{
		return context;
	}
}

// 定义根级AppProvider
export const AppProvider = ({children}: {children: ReactNode}) => {
	return <AuthProvider>
		{ children }
	</AuthProvider>
}

// 最后再把根AppProvider绑定给 App组件
<AppProvider>
	<App />
</AppProvider>