类组件bind与函数组件useCallback行为差异及优化咨询

类组件的行为逻辑 #

类组件中，this.logName = this.logName.bind(this)仅在构造函数中执行一次，绑定后的logName方法引用永久不变。同时，类方法里的this始终指向组件实例，每次调用logName时，都会从当前实例的state中读取最新的name值——方法本身不依赖state.name的具体值，只依赖实例引用。因此即使state.name更新，传递给memo包装子组件的方法引用不变，子组件不会触发重渲染。

函数组件的行为逻辑 #

函数组件每次渲染都会重新执行整个函数体，核心差异来自闭包特性：

• 若useCallback依赖[state.name]，name更新时useCallback会返回新的函数引用，导致子组件的onLog props变化，触发重渲染；
• 若移除[state.name]依赖，useCallback返回的函数会捕获当前渲染周期的name值，后续name更新后，函数依然只能访问旧的闭包值，导致拿到旧数据。

要实现类组件的效果——更新state.name时子组件不重渲染，同时能获取最新name值，可采用以下两种方案：

方案1：使用useRef保存最新状态 #

利用useRef的引用特性实时同步最新name值，让回调通过ref.current访问最新数据，同时useCallback依赖为空数组，保证函数引用不变。

import { useState, useCallback, useRef, useEffect } from 'react';
import { memo } from 'react';

const Child = memo(({ onLog }) => {
  console.log('Child rendered');
  return <button onClick={onLog}>Log Name</button>;
});

function Parent() {
  const [name, setName] = useState('Alice');
  const [age, setAge] = useState(25);
  
  // 用ref实时同步最新name
  const nameRef = useRef(name);
  useEffect(() => {
    nameRef.current = name;
  }, [name]);
  
  // 依赖为空数组，函数引用永久不变
  const logName = useCallback(() => {
    console.log(nameRef.current);
  }, []);
  
  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={() => setAge(age + 1)}>Increase Age</button>
      <Child onLog={logName} />
    </div>
  );
}

方案2：使用useReducer管理状态 #

将状态更新和回调逻辑统一放在reducer中，回调通过dispatch触发，而dispatch的引用在组件生命周期中始终不变，因此useCallback只需依赖dispatch，保证函数引用稳定，同时能获取最新state值。

import { useCallback, useReducer } from 'react';
import { memo } from 'react';

const Child = memo(({ onLog }) => {
  console.log('Child rendered');
  return <button onClick={onLog}>Log Name</button>;
});

function reducer(state, action) {
  switch (action.type) {
    case 'UPDATE_NAME':
      return { ...state, name: action.payload };
    case 'INCREASE_AGE':
      return { ...state, age: state.age + 1 };
    case 'LOG_NAME':
      console.log(state.name);
      return state;
    default:
      return state;
  }
}

function Parent() {
  const [state, dispatch] = useReducer(reducer, { name: 'Alice', age: 25 });
  
  // dispatch引用不变，因此函数引用永久稳定
  const logName = useCallback(() => {
    dispatch({ type: 'LOG_NAME' });
  }, [dispatch]);
  
  return (
    <div>
      <input 
        value={state.name} 
        onChange={(e) => dispatch({ type: 'UPDATE_NAME', payload: e.target.value })} 
      />
      <button onClick={() => dispatch({ type: 'INCREASE_AGE' })}>Increase Age</button>
      <Child onLog={logName} />
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Deepak Sharma