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]); }

❓

基本用法为const [count, setCount] = useState(0);

基本用法为useEffect(() => { console.log(count); }, [count]);

useContext用于访问React上下文中的值。

基本用法为const [state, dispatch] = useReducer(reducer, initialState);

useCallback用于记忆化回调函数，基本用法为const memoizedFn = useCallback(() => { doSomething(); }, [dep]);

基本用法为function useFetch(url) { useEffect(() => { fetch(url); }, [url]); }

🏷️