# useRef、useMemo、useCallback

URL: https://caijiao.org/react/chapter10/advanced-hooks
Source: docs/react/chapter10/advanced-hooks.md
Description: useRef、useMemo 和 useCallback 是 React 中常用的性能优化 Hooks，帮助管理引用、避免不必要的重新渲染和计算。

在 React 中，`useRef`、`useMemo` 和 `useCallback` 是三种常见的性能优化 Hooks。它们有助于避免不必要的渲染和计算，从而提高应用的性能。

## 1. useRef
`useRef` 是 React 中的一个 Hook，用于持有对 DOM 元素或任何可变数据的引用。在组件渲染周期内，`useRef` 返回的对象的 `.current` 属性保持不变。常用于访问 DOM 元素、保持不需要重新渲染的变量。

```jsx
const inputRef = useRef(null);

useEffect(() => {
  inputRef.current.focus();
}, []);
````

## 2. useMemo

`useMemo` 是 React 中用于优化性能的 Hook。它会记住计算的结果，并且只有在依赖项发生变化时，才会重新计算。这可以防止昂贵的计算在每次渲染时都执行。

```jsx
const expensiveValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
```

## 3. useCallback

`useCallback` 与 `useMemo` 类似，但它专门用于返回一个记忆化的函数，只有在依赖项变化时才会重新创建函数。它通常与子组件的 `React.memo` 配合使用，避免子组件不必要的重新渲染。

```jsx
const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);
```

这三者都用于优化性能，`useRef` 用于引用存储，`useMemo` 用于避免重复计算，`useCallback` 用于优化函数传递。正确使用它们能显著提高 React 应用的性能，尤其是在大型应用中。