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

Question

我的输入是由我的州的一个值填充的.

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

Settings是Redux的状态.当我在输入中输入一个值时,我必须指定一个onChange函数.这是我的onChange函数:

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

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

它更改flashVarsValue输入值的状态值.但是当我输入我的输入时,它会滞后.我不明白为什么每次改变输入值都应该调用调度.

有什么方法可以减少滞后吗？

我的减速机:

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

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

Answer 2

对我来说，答案是使用shouldComponentUpdate生命周期挂钩。Mike Boutin（大约一年前:)）已在评论中给出了答案，但是一个示例可能会帮助下一位访客。

我也遇到了类似的问题，文本输入丢失了，而且速度慢而跳动。我在我的onChange事件中使用setState更新formData。

我发现，随着状态的改变，每次按键都对表单进行了完全重新渲染。因此，为了阻止这种情况，我覆盖了该函数：

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

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

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

Answer 3

我知道这是一个老问题，但是如果您想在文本输入上触发 onChange，您可能希望对您的事件进行去抖动。该线程在分解它方面做得很好，但我认为这适用于操作示例：

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