React Hooks常用知识：useCallback、useEffect 和 useRef能力简介

在 React 中，useCallback、useEffect 和 useRef 是三个非常重要的 Hook，它们各自有不同的用途和应用场景。下面我们将详细介绍这些 Hook，并提供实用案例。

1. useCallback

简介：
useCallback 是一个用于在组件的多次渲染中缓存函数的 Hook。它接收两个参数：一个函数和一个依赖项数组。当依赖项没有变化时，useCallback 返回缓存的函数，否则返回新的函数。

常用场景：

• 优化子组件的渲染性能：当将函数作为 props 传递给子组件时，使用 useCallback 可以避免子组件不必要的重新渲染。
• 作为 Effect 的依赖项：如果一个函数作为另一个 Effect 或 Hook 的依赖项，使用 useCallback 可以确保依赖项的稳定性。

示例：

javascript
import React, { useCallback } from 'react';

function Parent() {
  const handleCallback = useCallback(() => {
    console.log('Callback executed');
  }, []); // 依赖项为空数组，表示只在初次渲染时创建一次

  return (
    <div>
      <Child onCallback={handleCallback} />
    </div>
  );
}

function Child({ onCallback }) {
  console.log('Child rendered');
  return (
    <div>
      <button onClick={onCallback}>Click Me</button>
    </div>
  );
}

2. useEffect

简介：
useEffect 是一个用于处理副作用的 Hook，例如数据获取、设置事件监听器、手动操作 DOM 等。它在组件渲染后执行，并且可以根据依赖项数组决定何时重新执行。

常用场景：

• 数据获取：在组件挂载时获取数据。
• 事件监听：在组件挂载时添加事件监听器，并在卸载时清除。
• DOM 操作：在组件渲染后执行 DOM 操作。

示例：

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

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 依赖项为空数组，表示只在初次渲染时执行一次

  return (
    <div>
      {data ? <p>Data: {data}</p> : <p>Loading...</p>}
    </div>
  );
}

3. useRef

简介：
useRef 返回一个可变的 ref 对象，其 .current 属性可以在组件的整个生命周期中保持不变。它常用于存储不影响视图的数据或直接操作 DOM 元素。

常用场景：

• 存储可变值：在组件渲染之间保持一个值不变，且不触发重新渲染。
• 操作 DOM：直接访问和操作 DOM 元素。

示例：

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

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

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []); // 依赖项为空数组，表示只在初次渲染时执行一次

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

总结

• useCallback 用于缓存函数，避免不必要的重新渲染。
• useEffect 用于处理副作用，如数据获取、事件监听和 DOM 操作。
• useRef 用于存储可变值或操作 DOM 元素，且不会触发重新渲染。

这些 Hook 在 React 开发中非常重要，通过合理使用它们，可以提高应用的性能和可维护性。