useMemo和useRef

`useMemo` 和 `useRef` 都是 React Hooks 中的性能优化工具。

`useMemo` 是用于缓存计算结果的 Hook。当你有一个昂贵的函数需要在渲染过程中多次计算，但是其结果只依赖于少数几个变量（称为“记忆依赖”），那么可以将其放入 `useMemo` 函数里。这个 Hook 只有当记忆依赖发生变化时才会重新计算，并返回新的计算结果。这对于那些副作用小、纯粹的数据计算非常有用，避免了不必要的渲染开销。

`useRef` 则是一个特殊的引用类型的 Hook，它返回的是一个对象，该对象始终指向组件内部的一个值（可以是任何 JavaScript 值，通常是 DOM 元素或自定义组件实例）。`useRef` 主要用来保持对长期存在的引用（如 DOM 结点）的一次性访问，不需要进行计算或依赖更新。这在需要在生命周期内跟踪某些不可变数据或者绑定事件处理函数时很有用。

相关问题

react memo, useEffect, useMemo, useRef, useState 方法含义

引用\[1\]:在React中，memo是一个高阶组件，用于优化函数组件的性能。它类似于React.PureComponent，通过对内部对象进行浅比较来判断是否重新渲染组件。\[2\]useEffect是React提供的一个Hook函数，用于在函数组件中执行副作用操作。它可以在组件渲染完成后执行一些异步操作，比如发送网络请求、订阅事件等。\[3\]useMemo是React提供的另一个Hook函数，用于在函数组件中进行性能优化。它可以缓存计算结果，避免重复计算，类似于Vue中的computed属性。\[1\]useRef是React提供的一个Hook函数，用于在函数组件中创建一个可变的引用。它可以用来保存组件的状态，或者获取DOM元素的引用。\[1\]useState是React提供的一个Hook函数，用于在函数组件中创建一个可变的状态。它返回一个数组，第一个元素是当前的状态值，第二个元素是更新状态的函数。

所以，react memo用于优化函数组件的性能，useEffect用于执行副作用操作，useMemo用于缓存计算结果，useRef用于创建可变的引用，useState用于创建可变的状态。
#### 引用[.reference_title]
- *1* *2* [useMemo,memo,useRef等相关hooks详解](https://blog.csdn.net/weixin_44441196/article/details/117328033)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [一文轻松掌握react-hook(useState、useReducer、useEffect、useCallback、useMemo、useRef、useContext...)](https://blog.csdn.net/u010074572/article/details/105176653)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

useState，useEffect，useCallback，useMemo，useRef，useContext的用法

1. useState：用于在函数式组件中添加状态（state）。useState返回一个数组，包含当前状态和一个更新状态的函数。例如：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

2. useEffect：用于在函数式组件中添加副作用（side effect），例如订阅事件、修改 DOM 等。useEffect 接受两个参数，第一个参数是一个函数，用于执行副作用操作，第二个参数是一个数组，用于指定副作用的依赖项。例如：

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

3. useCallback：用于缓存函数，避免不必要的重新渲染。useCallback 接受两个参数，第一个参数是需要缓存的函数，第二个参数是一个依赖数组。例如：

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

4. useMemo：用于缓存计算结果，避免重复计算。useMemo 接受两个参数，第一个参数是需要缓存的函数，第二个参数是一个依赖数组。例如：

import React, { useState, useMemo } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  const result = useMemo(() => {
    return count * 2;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <p>The result is {result}</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

5. useRef：用于在函数式组件中创建一个可变的引用（reference）。useRef 返回一个包含引用值的对象。例如：

import React, { useState, useRef } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const timerRef = useRef(null);

  const handleClick = () => {
    timerRef.current = setInterval(() => {
      setCount(count => count + 1);
    }, 1000);
  };

  const handleStopClick = () => {
    clearInterval(timerRef.current);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>
        Start
      </button>
      <button onClick={handleStopClick}>
        Stop
      </button>
    </div>
  );
}

6. useContext：用于在函数式组件中访问上下文（context）。useContext 接受一个上下文对象（由 React.createContext 创建），并返回当前上下文的值。例如：

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function Example() {
  const theme = useContext(ThemeContext);

  return (
    <div>
      <p>Current theme is: {theme}</p>
    </div>
  );
}