如何对React受控输入实现throttle/debounce，解决输入值不更新问题

你当前的写法存在两个核心错误，直接导致受控输入异常：

• 受控输入框的展示值完全绑定this.state.myvalue，你给本地state的更新套了1秒的setTimeout延迟，用户输入后无法立刻将最新值同步到state，输入框自然没法正常回显内容。
• 你混淆了状态更新的优先级：本地受控状态必须随输入即时更新，完全不需要节流；真正需要做节流处理的是同步到Redux的操作，你把本地状态更新也加上延迟，属于逻辑边界搞错了。
• 额外隐患：React的合成事件会在事件回调执行完成后被事件池回收，你在setTimeout的回调里直接访问e.target.value，大概率会因为事件对象被回收拿到空值，就算延迟时间很短也会出问题。

核心逻辑是拆分两层状态更新：高频的本地状态更新保证输入体验，低频的Redux同步做节流处理，两者互不干扰。
类组件实现时注意要把节流后的函数挂载到组件实例上，不要每次render都重新生成，否则节流会失效，参考代码如下：

import { throttle } from 'lodash';
import { connect } from 'react-redux';
import { setInfoValue } from './store/action'; // 替换为你项目里的Redux action路径

class Information extends Component {
  state = { 
    myvalue: ''
  }

  // 初始化时生成节流后的Redux同步方法，1000ms间隔可按需调整
  throttledSyncRedux = throttle((value) => {
    // 仅Redux更新逻辑走节流，不会随用户输入高频触发
    this.props.setInfoValue(value);
  }, 1000)

  changeHandler = (e) => {
    const currentValue = e.target.value;
    // 本地状态立刻更新，保证输入框回显正常，绝对不能加延迟
    this.setState({
      myvalue: currentValue
    })
    // 调用节流方法同步数据到Redux
    this.throttledSyncRedux(currentValue);
  }

  componentWillUnmount() {
    // 组件卸载时取消待执行的节流任务，避免内存泄漏
    this.throttledSyncRedux.cancel();
  }

  render() { 
    return (
      <div>
        <textarea value={this.state.myvalue} onChange={this.changeHandler} />
      </div>
    );
  }
}

const mapDispatchToProps = (dispatch) => ({
  setInfoValue: (val) => dispatch(setInfoValue(val))
})

export default connect(null, mapDispatchToProps)(Information);

如果不想引入第三方库，也可以自己实现简单的节流函数替换lodash的throttle即可，核心逻辑不变。

• 所有受控表单组件的本地state更新，永远不要加节流、防抖或者setTimeout延迟，否则必然出现输入卡顿、回显不及时的问题
• 节流、防抖只适用于低优先级的副作用逻辑：比如同步全局状态、发请求校验输入、实时搜索联想这类场景
• 如果确实需要在异步回调里拿到输入值，一定要在同步上下文里提前把e.target.value存到变量里，不要在异步回调里直接访问React合成事件对象
• 不要在render函数里定义节流/防抖函数，每次组件重渲染都会生成新的函数实例，节流的时间统计会完全失效

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