React自定义状态函数与useState的差异及替代方案咨询

核心原因 #

你自己实现的filterState是普通JavaScript对象，修改它的属性不会触发React组件的重渲染——React根本不知道状态变了，所以输入框绑定的filterState[name]不会更新，看起来输入没反应。而React内置的useState在调用setState时，会通知React重新渲染组件，UI才能同步状态变化。

不用useState的可行方案 #

方案1：使用useReducer替代 #

useReducer是React官方提供的状态管理API，和useState同属React状态体系，但写法更适合复杂状态更新场景，完全满足你不用useState的需求：

import { useReducer } from "react";

// 定义处理状态更新的reducer函数
const filterReducer = (state, action) => {
  switch (action.type) {
    case "UPDATE_FILTER":
      // 合并新的过滤条件，返回新状态对象
      return { ...state, [action.name]: action.value };
    default:
      return state;
  }
};

// 在useFilter钩子中初始化reducer
const [filterState, dispatch] = useReducer(filterReducer, {});

// 修改onChange逻辑中的状态更新部分
function onChange(e, name, type) {
  // 保留原有的URL参数更新逻辑
  let searchParams = new URLSearchParams(window.location.search);
  searchParams.set(name, e.target.value);

  if (window.history.replaceState) {
    const url = `${window.location.protocol}//${window.location.host}${window.location.pathname}?${searchParams.toString()}`;
    window.history.replaceState({ path: url }, "", url);
  }

  // 用dispatch触发状态更新，替代原来的setState
  dispatch({ type: "UPDATE_FILTER", name, value: e.target.value });
  // 移除e.target.value=filterState[name]; 这行多余，重渲染后输入框会自动取最新状态值
}

方案2：手动实现带重渲染的自定义状态 #

如果要完全脱离React内置状态API实现，可结合useRef保存状态，再手动触发重渲染：

import { useRef, useState } from "react";

// 在useFilter钩子中
const filterStateRef = useRef({}); // 用ref保存状态，避免重渲染时重置
const [, forceRender] = useState({}); // 用空状态触发重渲染

// 自定义setState函数
const setState = (newState) => {
  // 合并新状态到ref的current属性
  filterStateRef.current = { ...filterStateRef.current, ...newState };
  // 更新空状态触发组件重渲染
  forceRender({});
};

// 注意：输入框的value要绑定filterStateRef.current[name]，比如：
// <input value={filterStateRef.current[name] || ''} ... />

// 修改onChange逻辑
function onChange(e, name, type) {
  // 原URL更新逻辑不变
  let searchParams = new URLSearchParams(window.location.search);
  searchParams.set(name, e.target.value);

  if (window.history.replaceState) {
    const url = `${window.location.protocol}//${window.location.host}${window.location.pathname}?${searchParams.toString()}`;
    window.history.replaceState({ path: url }, "", url);
  }

  setState({ [name]: e.target.value });
}

关于你修改TextInput的问题 #

把value=""改成value后，输入框变成了非受控组件，所以能自由输入，但过滤功能依赖filterState的变化来触发——而你的自定义状态没触发重渲染，过滤逻辑感知不到状态更新，所以失效了。

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