React Redux-当输入具有来自状态的值时，Input onChange在输入时非常慢

Question

我得到了我的输入，它由我的状态的值填充。

<input id="flashVars" name="flashVars" type="text" value={settings.flashVarsValue} disabled={isDisabled} onChange={handleChange} />

设置是我的Redux状态。当我输入一个值时，我必须指定一个onChange函数。这是我的onChange函数：

handleFlashVarsChange(e) {
  let { dispatch } = this.props;

  dispatch( changeFlashVarsValue(e.target.value) );
}

它更改输入值的状态值。但当我输入我的输入，它滞后。我不明白为什么每次我改变输入值时都要调用调度。

有没有什么办法可以减少滞后？

我的减速机：

import { ACTIONS } from '../utils/consts';

const initialState = {
  ...
  flashVarsValue: '',
  ...
};

export function formSettings(state = initialState, action = '') {
  switch (action.type) {

    ...

    case ACTIONS.CHANGE_FLASHVARS_VALUE:
      return Object.assign({}, state, {
        flashVarsValue: action.data
      });

    default:
      return state;
  }
}

我的行动：

export function changeFlashVarsValue(data) {
  return {
    type: ACTIONS.CHANGE_FLASHVARS_VALUE,
    data: data
  }
}

非常感谢。

Answer 1

我知道这是一个老问题，但如果您想在文本输入上触发onChange，您可能需要取消事件的影响。这个线程在分解它方面做得很好，但我认为这对于op的示例是可行的：

import debounce from 'debounce'                                      

function debounceEventHandler(...args) {
  const debounced = debounce(...args)
  return function (e) {
    e.persist();
    return debounced(e);
  }
}                                                                      
const Container = React.createClass({
  handleFlashVarsChange(e) {
    let { dispatch } = this.props;
    //basic redux stuff
    this.props.changeFlashVarsValue(e.target.value));
  },
  render() {
    const handleChange = debounceEventHandler(this.handleFlashVarsChange, 15);
    return (
      <input id="flashVars" onChange={handleChange} />
    )
  }                                                                         
}
//...prep and return your redux container

Answer 2

对我来说，答案是使用应该组件更新生命周期钩子。Mike Boutin（大约一年前：）的评论中已经给出了这个答案，但是一个例子可能会对下一个游客有所帮助。

我有一个类似的问题，文本输入丢失，速度慢且跳跃。我在onChange事件中使用setState更新formData。

我发现表单在每按一次键时都会进行完整的重新渲染，因为状态已经发生了变化。为了停止这个，我重写了函数：

shouldComponentUpdate(nextProps, nextState) {
   return this.state.formErrors !== nextState.formErrors);
}

我在表单提交时显示一个错误通知面板，其中包含任何新的或更改的验证错误，这是我唯一需要重新呈现的时间。

如果没有子组件，则可以将表单组件的shouldComponentUpdate设置为始终返回false。

Answer 3

我在编辑一个有一百万行的网格时遇到了类似的问题，所以我所做的是更改更新逻辑，在您的例子中，handleChange仅在事件onBlur上调用，而不是onChange。这只会在您失去焦点时触发更新。但我不知道这对你来说是否是一个令人满意的解决方案。