React useReducer状态随initialArg变化的最优更新方案是什么？

方案优劣对比&最优选择 #

三个方案适用不同场景，按优先级推荐顺序如下：

• 方案3（渲染期间派发重置）：性能&体验最优，适合绝大多数生产场景
  之前调试失败大概率是没有正确处理新旧值对比的ref逻辑，正确实现代码如下：

  // FormProvider.js 完整实现
  import { useRef, useReducer, useCallback, createContext } from 'react';
  const FormContext = createContext();
  
  const reducer = (state, action) => {
    switch (action.type) {
      case 'UPDATE_FIELD':
        return { ...state, [action.field]: action.value };
      case 'RESET':
        return action.values;
      default:
        throw new Error();
    }
  };
  
  const FormProvider = ({ children, initialValues }) => {
    const [values, dispatch] = useReducer(reducer, initialValues);
    const prevInitialValuesRef = useRef(initialValues);
  
    // 渲染期间直接判断值变化，符合React渲染规则
    if (prevInitialValuesRef.current !== initialValues) {
      prevInitialValuesRef.current = initialValues;
      dispatch({ type: 'RESET', values: initialValues });
    }
  
    const handleChange = useCallback((evt) => {
      dispatch({
        field: evt.target.name,
        type: 'UPDATE_FIELD',
        value: evt.target.value,
      });
    }, []);
  
    return (
      <FormContext.Provider value={{ handleChange, values }}>
        {children}
      </FormContext.Provider>
    );
  };
  

  该方案优势：不需要销毁重建组件、无额外渲染周期、不会出现旧值闪烁/竞态问题，实现成本也很低。

• 方案1（加key属性）：实现成本最低，适合简单表单场景
  不需要修改FormProvider内部逻辑，仅加一行key属性即可生效。如果你的表单组件结构简单，子组件数量少，组件重建的性能损耗完全可以忽略，是快速解决问题的首选。仅当表单组件树非常复杂、有大量耗时渲染逻辑时不推荐使用。

• 方案2（useEffect派发重置）：不推荐生产使用
  虽然能实现需求，但多出来的渲染周期必然会出现旧值闪烁的问题，在initialValues变化频繁、用户操作较快的场景下很容易出现竞态bug，没有明显优势不建议使用。

其他可选思路 #

如果你的表单需要完全受控，可以选择把表单状态完全提升到父组件管理，FormProvider不维护内部状态，直接接收父组件传入的values和onChange回调透传给上下文即可。该方案适合需要在表单外部频繁控制表单值的场景，但会增加父组件的维护成本。

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