【前端】React回调函数解析

在 React 中，"回调钩子函数"通常指的是把函数作为 回调函数 传递给组件或子组件，然后在特定事件发生时调用它。结合了 React 的事件机制 与 Hook 使用场景。下面详细讲一下：

---

1️⃣ 基本回调函数

最简单的回调函数示例：

import React from 'react';

const Child = ({ onClick }) => {
  return <button onClick={onClick}>点击我</button>;
};

const Parent = () => {
  const handleClick = () => {
    alert('按钮被点击了！');
  };

  return <Child onClick={handleClick} />;
};

export default Parent;

解释：

• Parent 定义了回调函数 handleClick。
• 将 handleClick 传给子组件 Child 的 onClick。
• 子组件在事件触发时调用 onClick，父组件的回调被执行。

---

2️⃣ 回调函数 + useCallback

当父组件频繁重渲染时，如果回调函数每次都重新创建，可能导致子组件重复渲染或无效依赖。此时可用 useCallback 缓存函数引用：

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

const Child = React.memo(({ onClick }) => {
  console.log('Child 渲染');
  return <button onClick={onClick}>点击我</button>;
});

const Parent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    alert('按钮被点击了！');
  }, []); // 空依赖，handleClick 引用不会变化

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>父组件加一: {count}</button>
      <Child onClick={handleClick} />
    </div>
  );
};

export default Parent;

解释：

• useCallback 会缓存函数引用，避免 Child 因父组件渲染而重复渲染。
• React.memo 用于对子组件做性能优化。

---

3️⃣ 回调函数 + 参数传递

如果回调需要传参，有两种常见写法：

方法 1：箭头函数

<Child onClick={() => handleClick(123)} />

方法 2：bind

<Child onClick={handleClick.bind(null, 123)} />

---

4️⃣ 与 React Hook 结合

回调函数常与 useEffect、useState 等 Hook 一起使用，例如：

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

const App = () => {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  useEffect(() => {
    console.log('组件挂载或 increment 变化');
  }, [increment]);

  return (
    <div>
      <p>count: {count}</p>
      <button onClick={increment}>加一</button>
    </div>
  );
};

export default App;

---

✅ 总结：

1. 回调函数就是把函数当作参数传递，通常用于子组件事件或异步操作完成后的处理。
2. 使用 useCallback 可以缓存函数引用，避免不必要的渲染。
3. 可以配合 React.memo、useEffect 等 Hook 做性能优化。
4. 支持参数传递，可用箭头函数或 bind。