DEV Community
·
React Hooks 概述
💡
原文英文，约200词，阅读约需1分钟。
📝
内容提要
本文介绍了React中的多个Hooks，如useState、useEffect和useContext，及其基本用法，帮助管理组件状态和副作用。
🎯
关键要点
- useState：为函数组件添加状态，基本用法为const [count, setCount] = useState(0);
- useEffect：在函数组件中执行副作用，基本用法为useEffect(() => { console.log(count); }, [count]);
- useContext：访问React上下文中的值，基本用法为const value = useContext(MyContext);
- useReducer：管理复杂的状态逻辑，基本用法为const [state, dispatch] = useReducer(reducer, initialState);
- useCallback：记忆化回调函数，基本用法为const memoizedFn = useCallback(() => { doSomething(); }, [dep]);
- useMemo：记忆化计算值，基本用法为const memoizedValue = useMemo(() => computeExpensiveValue(dep), [dep]);
- useRef：返回可变引用，基本用法为const inputRef = useRef(null);
- useImperativeHandle：自定义通过ref暴露的实例，基本用法为useImperativeHandle(ref, () => ({ focus: () => inputRef.current.focus() }));
- useLayoutEffect：在DOM变更后同步运行，基本用法为useLayoutEffect(() => { console.log('Layout effect'); });
- useDebugValue：为自定义hooks添加调试标签，基本用法为useDebugValue(isOnline ? 'Online' : 'Offline');
- 自定义Hooks：将可重用逻辑提取到函数中，基本用法为function useFetch(url) { useEffect(() => { fetch(url); }, [url]); }
❓
延伸问答
useState的基本用法是什么？
基本用法为const [count, setCount] = useState(0);
useEffect如何在函数组件中执行副作用？
基本用法为useEffect(() => { console.log(count); }, [count]);
useContext的作用是什么？
useContext用于访问React上下文中的值。
如何使用useReducer管理复杂状态？
基本用法为const [state, dispatch] = useReducer(reducer, initialState);
useCallback的主要用途是什么？
useCallback用于记忆化回调函数，基本用法为const memoizedFn = useCallback(() => { doSomething(); }, [dep]);
自定义Hooks的基本用法是什么？
基本用法为function useFetch(url) { useEffect(() => { fetch(url); }, [url]); }
🏷️
标签
➡️
