React Hooks 是 React 16.8 版本引入的新特性,它允许你在不编写 class 的情况下使用 state 以及其他的 React 特性。以下是一些常用的 React Hooks:
useState:这个 Hook 让你在函数组件中添加 state。
const [count, setCount] = useState(0);
useEffect:这个 Hook 可以让你在函数组件中执行副作用操作。
useEffect(() => {
document.title = `You clicked ${count} times`;
});
useContext:这个 Hook 让你可以访问 context。
const theme = useContext(ThemeContext);
useReducer:这个 Hook 可以让你在函数组件中使用 reducer 函数。
const [state, dispatch] = useReducer(reducer, initialArg, init);
useCallback:返回一个记忆的版本的回调函数。
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);
useMemo:返回一个记忆的值。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
useRef:返回一个可变的 ref 对象。
const refContainer = useRef(initialValue);
useImperativeHandle:用于自定义暴露给父组件的实例值。
useImperativeHandle(ref, createHandle, [deps])
useLayoutEffect:其函数签名与 useEffect 相同,但它会在所有的 DOM 变更之后同步调用 effect。
useLayoutEffect(() => {
// 在 DOM 更新完成后立即执行
});
useDebugValue:可以用来在 React DevTools 中显示自定义 hook 的标签。
useDebugValue(value)
以上就是 React 提供的一些内置 Hooks,你也可以通过组合这些内置 Hooks 来创建自定义 Hooks。