React 中常用的 Hooks 列表及用法
React Hooks 是 React 16.8 版本引入的一项重要特性，它极大地简化和优化了函数组件的开发过程。以下是 React 中常用的 Hooks 列表及其详细用法：
1. useState
useState 是用于在函数组件中添加状态的 Hook。通过调用 useState，可以声明一个状态变量，并提供更新该状态的方法。
const [state, setState] = useState(initialState);
state：当前的状态值。setState：更新状态的函数。initialState：状态的初始值。
示例：
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
2. useEffect
useEffect 是用于处理副作用的 Hook，例如数据获取、订阅或手动 DOM 操作。它类似于类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。
useEffect(effect, dependencies);
effect：副作用的回调函数。dependencies：依赖项数组，当数组中的值发生变化时触发effect。
示例：
import React, { useEffect, useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
return (
<button onClick={() => setCount(count + 1)}>
Click me
</button>
);
}
3. useContext
useContext 是用于访问 React 的上下文（Context）的 Hook。它允许你从组件树中任何位置读取上下文值，而无需显式传递 props。
const value = useContext(MyContext);
示例：
import React, { createContext, useContext } from 'react';
const ThemeContext = createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
const theme = useContext(ThemeContext);
return <div>Current theme is {theme}</div>;
}
4. useReducer
useReducer 是用于管理复杂状态逻辑的 Hook。它类似于 Redux 的 reducer 函数，适合处理多个状态值或复杂的更新逻辑。
const [state, dispatch] = useReducer(reducer, initialState);
示例：
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 Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<div>
Count: {state.count}
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</div>
);
}
5. useCallback
useCallback 是用于记忆函数的 Hook。它可以防止因为组件重新渲染导致方法被重新创建，起到缓存作用。
const memoizedCallback = useCallback(callback, dependencies);
示例：
import React, { useCallback, useState } from 'react';
function ParentComponent() {
const [count, setCount] = useState(0);
const handleChildClick = useCallback(() => {
console.log('Child clicked');
}, []);
return <ChildComponent onChildClick={handleChildClick} />;
}
6. useMemo
useMemo 是用于记忆计算结果的 Hook。它仅会在某个依赖项改变时才重新计算 memoized 值，从而避免不必要的开销。
const memoizedValue = useMemo(computeFunction, dependencies);
示例：
import React, { useMemo, useState } from 'react';
function ExpensiveComponent() {
const [count, setCount] = useState(0);
const expensiveValue = useMemo(() => computeExpensiveValue(count), [count]);
return (
<div>
<p>Expensive Value: {expensiveValue}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
7. useRef
useRef 是用于创建一个可变的引用对象的 Hook。它适用于保存 DOM 引用、计时器 ID 或其他不触发重新渲染的值。
const refContainer = useRef(initialValue);
示例：
import React, { useRef } from 'react';
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
8. useLayoutEffect
useLayoutEffect 类似于 useEffect，但会在所有的 DOM 变更之后同步调用。它适用于需要测量布局并同步执行某些操作的场景。
useLayoutEffect(effect, dependencies);
9. useImperativeHandle
useImperativeHandle 是用于自定义暴露给父组件的实例值的 Hook。它通常与 ref 配合使用。
useImperativeHandle(ref, createHandle, dependencies);
10. useDebugValue
useDebugValue 是用于在开发者工具中显示自定义 Hook 的调试标签的 Hook。
useDebugValue(value);
总结
useImperativeHandle(ref, createHandle, dependencies);
10. useDebugValue
useDebugValue 是用于在开发者工具中显示自定义 Hook 的调试标签的 Hook。
useDebugValue(value);
总结
