目录
- 1. useState
- 2. useEffect
- 3. useContext
- 4. useReducer
- 5. useCallback
- 6. useMemo
- 7. useRef
- 8. useImperativeHandle
- 9. useLayoutEffect
- 10. useDebugValue
常用的 React Hooks 的介绍和示例：
1. useState
useState 是一个用于在函数组件中添加状态的 Hook。
javascript">import React, { useState } from 'react';function Example() {const [count, setCount] = useState(0); // 初始化状态return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}
2. useEffect
useEffect 是一个用于在函数组件中执行副作用（如数据获取、订阅或手动更改 DOM）的 Hook。
javascript">import React, { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);useEffect(() => {document.title = `You clicked ${count} times`;});return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}
3. useContext
useContext 是一个用于在函数组件中访问 React Context 的 Hook。
javascript">import React, { useContext } from 'react';const MyContext = React.createContext(null);function Example() {const value = useContext(MyContext);return <div>{value}</div>;
}
4. useReducer
useReducer 是一个用于在函数组件中使用更复杂的状态逻辑的 Hook。
javascript">import React, { useReducer } from 'react';function reducer(state, action) {switch (action.type) {case 'increment':return { count: state.count + 1 };case 'decrement':return { count: state.count - 1 };default:throw new Error();}
}function Example() {const [state, dispatch] = useReducer(reducer, { count: 0 });return (<div><p>Count: {state.count}</p><button onClick={() => dispatch({ type: 'increment' })}>Increment</button><button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button></div>);
}
5. useCallback
useCallback 是一个用于缓存函数的 Hook，以避免不必要的重新渲染。
javascript">import React, { useState, useCallback } from 'react';function Example() {const [count, setCount] = useState(0);const handleClick = useCallback(() => {setCount(count + 1);}, [count]);return (<div><p>You clicked {count} times</p><button onClick={handleClick}>Click me</button></div>);
}
6. useMemo
useMemo 是一个用于缓存计算值的 Hook，以避免不必要的计算。
javascript">import React, { useState, useMemo } from 'react';function Example() {const [count, setCount] = useState(0);const memoizedValue = useMemo(() => {return count * 2;}, [count]);return (<div><p>Count: {count}</p><p>Memoized Value: {memoizedValue}</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}
7. useRef
useRef 是一个用于在函数组件中访问 DOM 元素或存储可变值的 Hook。
javascript">import React, { useRef } from 'react';function Example() {const inputRef = useRef(null);const focusInput = () => {inputRef.current.focus();};return (<div><input ref={inputRef} /><button onClick={focusInput}>Focus Input</button></div>);
}
8. useImperativeHandle
useImperativeHandle 是一个用于自定义暴露给父组件的实例值的 Hook。
javascript">import React, { useRef, useImperativeHandle } from 'react';function FancyInput(props, ref) {const inputRef = useRef();useImperativeHandle(ref, () => ({focus: () => {inputRef.current.focus();}}));return <input ref={inputRef} />;
}FancyInput = React.forwardRef(FancyInput);function ParentComponent() {const inputRef = useRef();const focusInput = () => {inputRef.current.focus();};return (<div><FancyInput ref={inputRef} /><button onClick={focusInput}>Focus Input</button></div>);
}
9. useLayoutEffect
useLayoutEffect 是一个与 useEffect 类似的 Hook，但它会在所有 DOM 变更之后同步调用，而不是异步调用。
javascript">import React, { useLayoutEffect } from 'react';function Example() {useLayoutEffect(() => {console.log('This runs synchronously after all DOM changes');});return <div>Example</div>;
}
10. useDebugValue
useDebugValue 是一个用于在 React DevTools 中显示自定义 Hook 的调试值的 Hook。
javascript">import React, { useState, useDebugValue } from 'react';function useCustomHook(initialValue) {const [value, setValue] = useState(initialValue);useDebugValue(`Current value: ${value}`);return [value, setValue];
}function Example() {const [count, setCount] = useCustomHook(0);return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}
