useRef、useMemo、useCallback挂钩的生产用例是什么？

useRef：

句法： const refObject = useRef(initialValue);

它只是返回一个普通的 JavaScript对象。它的值可以根据需要多次访问和修改（可变性），而无需担心“重新渲染”。

它的值将在组件生命周期内持续存在（不会被重置为initialValue与您的函数组件中定义的普通* 对象不同；它会持续存在，因为useRef为您提供相同的对象而不是在后续渲染中创建新对象）。

如果您在控制台上编写const refObject = useRef(0)和打印refObject，您会看到日志对象 - { current: 0 }。

*普通对象 vs refObject，示例：

function App() {
  const ordinaryObject = { current: 0 } // It will reset to {current:0} at each render
  const refObject = useRef(0) // It will persist (won't reset to the initial value) for the component lifetime
  return <>...</>
}

几个常见的用法，例子：

1. 访问DOM：<div ref={myRef} />
2. 像实例变量一样存储可变值（在类中）
3. 渲染计数器
4. 在setTimeout/setInterval没有过时的关闭问题中使用的值。

useMemo：

语法：const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

它返回一个记忆 值。这个钩子的主要目的是“性能优化”。在需要时谨慎使用它来优化性能。

它接受两个参数——“创建”函数（它应该返回一个要记忆的值）和“依赖”数组。只有当依赖项之一发生变化时，它才会重新计算记忆值。

几个常见的用法，例子：

1. 在渲染时优化昂贵的计算（例如对数据进行排序、过滤、更改格式等操作）

未记忆的例子：

function App() {
  const [data, setData] = useState([.....])

  function format() {
    console.log('formatting ...') // this will print at every render
    const formattedData = []
    data.forEach(item => {
      const newItem = // ... do somthing here, formatting, sorting, filtering (by date, by text,..) etc
      if (newItem) {
        formattedData.push(newItem)
      }
    })
    return formattedData
  }

  const formattedData = format()

  return <>
    {formattedData.map(item => <div key={item.id}>
      {item.title}
    </div>)}
  </>
}

记忆的例子：

function App() {
  const [data, setData] = useState([.....])

  function format() {
    console.log('formatting ...') // this will print only when data has changed
    const formattedData = []
    data.forEach(item => {
      const newItem = // ... do somthing here, formatting, sorting, filtering (by date, by text,..) etc
      if (newItem) {
        formattedData.push(newItem)
      }
    })
    return formattedData
  }

  const formattedData = useMemo(format, [data])

  return <>
    {formattedData.map(item => <div key={item.id}>
      {item.title}
    </div>)}
  <>
}

useCallback：

语法：const memoizedCallback = useCallback(() => { //.. do something with a & b }, [a, b])

它返回一个记忆化的 函数（或回调）。

它接受两个参数——“函数”和“依赖”数组。只有当依赖项之一发生变化时，它才会返回新的即重新创建的函数，否则它将返回旧的即记忆的函数。

几个常见的用法，例子：

1. 将记忆化的函数传递给子组件（使用React.memo或shouldComponentUpdate使用浅等值 -优化Object.is）以避免由于作为道具传递的函数而不必要地重新渲染子组件。

示例 1，没有useCallback：

const Child = React.memo(function Child({foo}) {
  console.log('child rendering ...') // Child will rerender (because foo will be new) whenever MyApp rerenders
  return <>Child<>
})

function MyApp() {
  function foo() {
    // do something
  }
  return <Child foo={foo}/>
}

示例 1，使用useCallback：

const Child = React.memo(function Child({foo}) {
  console.log('child rendering ...') // Child will NOT rerender whenever MyApp rerenders
  // But will rerender only when memoizedFoo is new (and that will happen only when useCallback's dependency would change)
  return <>Child<>
})

function MyApp() {
  function foo() {
    // do something
  }
  const memoizedFoo = useCallback(foo, [])
  return <Child foo={memoizedFoo}/>
}

2. 将记忆化的函数作为其他钩子中的依赖项传递。

示例 2，没有useCallback, Bad （但eslint-plugin-react-hook会警告您纠正它）：

function MyApp() {
  function foo() {
    // do something with state or props data
  }
  useEffect(() => {
    // do something with foo
    // maybe fetch from API and then pass data to foo
    foo()
  }, [foo])
  return <>...<>
}

示例 2，带有useCallback，良好：

function MyApp() {
  const memoizedFoo = useCallback(function foo() {
    // do something with state or props data
  }, [ /* related state / props */])

  useEffect(() => {
    // do something with memoizedFoo
    // maybe fetch from API and then pass data to memoizedFoo
    memoizedFoo()
  }, [memoizedFoo])
  return <>...<>
}

这些钩子规则或实现可能会在未来发生变化。因此，请务必检查文档中的钩子参考。此外，重要的是要注意eslint-plugin-react-hook关于依赖项的警告。如果省略这些钩子的任何依赖项，它将指导您。

• I appreciate this, Ajeet! Thanks for including the use cases!