React.memo失效排查：父传子Props后状态更新异常

你的问题核心是父组件每次渲染时都会重新创建update函数，导致被memo包裹的子组件误判props变化，触发不必要重渲染，还可能因为闭包捕获旧状态，出现状态更新异常或清空的情况。针对大量输入框的场景，给你几个可行的解决方法：

1. 用useCallback缓存update函数 #

通过useCallback包裹状态更新函数，确保父组件重渲染时，只要依赖项不变，函数引用就不会改变。同时必须用函数式更新获取最新状态，避免闭包问题：

import { useCallback, useState } from 'react';

function Parent() {
  const [formState, setFormState] = useState({
    input1: '',
    input2: '',
    // 更多输入框状态
  });

  // 缓存update函数，依赖项只传setState（React保证其引用稳定）
  const updateInput = useCallback((key, value) => {
    setFormState(prevState => ({ ...prevState, [key]: value }));
  }, [setState]);

  return (
    <div>
      <MemoizedInput name="input1" value={formState.input1} onChange={updateInput} />
      <MemoizedInput name="input2" value={formState.input2} onChange={updateInput} />
      {/* 更多子组件 */}
    </div>
  );
}

2. 确保子组件的memo比较逻辑合理 #

默认的memo做浅比较，若子组件接收复杂类型props，可自定义比较逻辑优化：

const MemoizedInput = React.memo(InputComponent, (prevProps, nextProps) => {
  // 只比较关键props：value和onChange
  return prevProps.value === nextProps.value && prevProps.onChange === nextProps.onChange;
});

多数场景下，默认浅配合useCallback就足够，不用额外自定义。

3. 用useReducer管理复杂状态（可选） #

如果表单状态非常复杂，useReducer的dispatch函数引用天生稳定，无需额外缓存，能彻底规避闭包问题：

import { useReducer } from 'react';

// 定义reducer处理状态更新
function formReducer(state, action) {
  switch (action.type) {
    case 'UPDATE_INPUT':
      return { ...state, [action.key]: action.value };
    default:
      return state;
  }
}

function Parent() {
  const [formState, dispatch] = useReducer(formReducer, {
    input1: '',
    input2: '',
    // 更多输入框状态
  });

  const updateInput = (key, value) => {
    dispatch({ type: 'UPDATE_INPUT', key, value });
  };

  return (
    <div>
      <MemoizedInput name="input1" value={formState.input1} onChange={updateInput} />
      <MemoizedInput name="input2" value={formState.input2} onChange={updateInput} />
      {/* 更多子组件 */}
    </div>
  );
}

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