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

ありがとうございましたあなたのケースでは、onChangeではなくonBlurイベントでのみ呼び出されるように、変更ロジックを変更することでした。これにより、フォーカスを失ったときにのみ更新がトリガーされます。しかし、これがあなたにとって満足のいく解決策になるかどうかはわかりません。

Answer 2

ここでの問題はおそらく再レンダリングです。 「設定」（あなたの状態全体）を「入力」を含むコンポーネントに渡しています。残りの接続コンポーネントがどのように状態に結合されているかはわかりません。変更された状態オブジェクトの結果として、すべてのキーストロークの入力だけではなく、さらにレンダリングしているかどうかを確認してください。これに対する解決策は、mapStateToPropsから必要な状態の特定の部分をより直接的に渡すことです（この場合、このコンポーネントが必要とする場合は "flashVarsValue"を渡すだけで、他のコンポーネントも全体として渡されないようにすることができますあなたの小道具が変更されていない場合、再レンダリングしないためにES6コンポーネントを使用している場合は、PureRenderMixinまたはDan Abramovのhttps://github.com/gaearon/react-pure-renderを使用してください。

Answer 3

私の答えはshouldComponentUpdateライフサイクルフックです。これは既にMike Boutin（約1年前:)のコメントで回答として与えられていますが、例はここで次の訪問者を助けるかもしれません。

テキストの入力が失われていて、遅くて跳ね上がっているのと同様の問題がありました。私はonChangeイベントでformDataを更新するためにsetStateを使用していました。

状態が変更されたため、すべてのキー押しでフォームが完全に再描画されていました。だから、これを停止するために、私は機能をオーバーライド：

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

私は、任意の新規または変更された検証エラーとフォーム送信のエラー通知パネルを表示し、それは私が再レンダリングする必要がある唯一の時間です。

子コンポーネントがない場合は、おそらくフォームコンポーネントのshouldComponentUpdateを常にfalseに設定するだけです。

Answer 4

これは古い質問ですが、テキスト入力でonChangeを発生させたい場合は、おそらくイベントをデバウンスする必要があります。This threadはそれを破壊良い仕事をしていませんが、私は、これはオペアンプの例のために働くと思う：

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