常见的hooks

参考来源：https://blog.csdn.net/weixin_45046532/article/details/139289818

函数缓存

useCallback 是React提供的一个Hook，它能够缓存传入的函数，避免在每次渲染时都创建新的函数实例，从而提高性能。
基本用法
useCallback 接收两个参数：一个是要缓存的函数和一个依赖项数组。只有当依赖项数组中的变量发生变化时，useCallback 才会返回一个新的函数。
`//用法：useCallback(callback, [dependencies])

点击查看代码

`//用法：useCallback(callback, [dependencies])
import React, { useCallback } from 'react';
function ComponentA() {
  // 缓存的函数，只有当inputValue变化时才会重新创建
  const handleClick = useCallback(() => {
    console.log('Button clicked: ', inputValue);
  }, [inputValue]);
  return <button onClick={handleClick}>Click me</button>;
}`

避免不必要的重新渲染
在某些情况下，如果父组件将回调函数作为prop传递给子组件，子组件可能会因为新的函数引用而重新渲染，即使回调函数的逻辑没有变化。使用 useCallback 可以避免这种情况，因为它确保只有在依赖项变化时才创建新的函数实例。

React.memo

组件可以使用 React.memo 进行记忆化
const ComponentB = React.memo(function ComponentB(props) {

点击查看代码

const ComponentB = React.memo(function ComponentB(props) {
  // 回调函数仅在props变化时更新
  const handleClick = useCallback(() => {
    // 处理点击事件
  }, [props]);
  return <button onClick={handleClick}>Click</button>;
});

计算结果缓存
useMemo 是React提供的一个Hook，它用于缓存复杂的计算结果，避免在每次渲染时都进行昂贵的计算，从而提高组件的性能。
基本用法
useMemo 接收两个参数：一个是要记忆化的计算函数和一个依赖项数组。只有当依赖项数组中的变量发生变化时，计算函数才会被执行。
//用法：useMemo(callback, dependencies)

点击查看代码

//用法：useMemo(callback, dependencies)
import React, { useMemo } from 'react';
function Component() {
  // 缓存计算结果，只有当inputValue变化时才会重新计算
  const memoizedValue = useMemo(() => computeExpensiveValue(inputValue), [inputValue]);
  return <div>{memoizedValue}</div>;
}

避免不必要的计算 在组件渲染过程中，如果某些计算结果不会频繁变化，使用 useMemo 可以避免不必要的重复计算，减少性能损耗。

useRef(DOM元素引用)

useRef 提供了一种方式，允许函数组件访问DOM元素或保存任何可变值。与传统的类组件中通过this.refName访问DOM不同，useRef创建的引用与组件的生命周期无关，它不会随着组件的重新渲染而重新创建。
import React, { useRef } from 'react';

点击查看代码

import React, { useRef } from 'react';
function TextInput() {
  const inputRef = useRef(null); // 创建一个引用，初始值为null
  function focusInput() {
    inputRef.current.focus(); // 使用引用来聚焦输入框
  }
  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}