반응 + 환원 - 입력에 상태 값이 있을 때 입력 onChange가 매우 느립니다.

반응 + 환원 - 입력에 상태 값이 있을 때 입력 onChange가 매우 느립니다.

가치로 채워진 나의 의견을 내 주로부터 받았다.

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

Settings레독스와의 내 상태야입력에 값을 입력할 때 다음 명령어를 지정해야 합니다.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
  }
}

감사해요.

100만 행의 그리드를 편집할 때도 같은 문제가 있었습니다.그래서 업데이트 로직을 변경했습니다.당신의 경우handleChange행사 때만 소집되다onBlur대신onChange포커스를 잃었을 때만 업데이트가 트리거됩니다.하지만 이것이 당신에게 만족스러운 해결책이 될지는 모르겠습니다.

여기서의 문제는 아마도 재연계일 것이다.「입력」을 포함한 「설정」(전체 상태)을 컴포넌트에 전달하고 있습니다만, 접속되어 있는 나머지 컴포넌트가 스테이트에 어떻게 결합되어 있는지는 알 수 없습니다.상태 객체가 변이된 결과로 인해 모든 키 입력에서만 재렌더링되지 않는지 확인합니다.이에 대한 해결책은 mapStateToProps에서 필요한 특정 상태를 보다 직접적으로 전달하고(이 경우 이 구성 요소가 필요한 경우에만 "flashVarsValue"를 전달하고 다른 구성 요소도 전체 상태를 전달하지 않는지 확인) PureRenderMixin 또는 Dan Abramov의 https://gub를 사용하는 것입니다.ES6 컴포넌트를 사용하여 소품이 변경되지 않은 경우 재렌더하지 않는 경우 com/gaearon/react-pure-render

답변은 would ComponentUpdate 라이프 사이클 훅을 사용하는 것이었습니다.이는 이미 Mike Boutin(약 1년 전 :)의 코멘트에서 답변이 제공되었지만, 다음 방문자에게 도움이 될 수 있는 예가 될 수 있습니다.

텍스트 입력이 끊기고 느리고 흔들리는 등 비슷한 문제가 있었습니다.setState를 사용하여 onChange 이벤트에서 formData를 업데이트하고 있었습니다.

상태가 바뀌었기 때문에 모든 키를 누를 때마다 폼이 완전히 재렌더되고 있는 것을 알았습니다.이를 중지하기 위해 기능을 오버로드했습니다.

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

신규 또는 변경된 유효성 검사 오류가 있는 폼 제출 시 오류 알림 패널을 표시하며, 그때만 재렌더하면 됩니다.

하위 구성 요소가 없는 경우 양식 구성 요소의 shouldComponentUpdate가 항상 false를 반환하도록 설정할 수 있습니다.

오래된 질문인 것은 알지만 텍스트 입력으로 변경을 실행하려면 이벤트를 발표해야 합니다.이 스레드는 잘 분해되지만 운영의 예에서는 다음과 같은 작업이 가능합니다.

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

정답은 사용자가 입력을 중지한 경우에만 키를 누를 때마다 구성 요소를 다시 렌더링하지 않는 것입니다.다음과 같은 경우:

shouldComponentUpdate(nextProps, nextState) {
    if (!textInputReRender)
        return false;
    else
        return true;
}

onTextInputChange = (propName, propValue) => {
    if (inputChangeTimerId)
        clearTimeout(inputChangeTimerId);

    inputChangeTimerId = setTimeout(() => {
        inputChangeTimerId = null;
        const newState = {};

        textInputReRender = true;

        newState[propName] = propValue;
        this.setState(newState);
    }, 500);

    textInputReRender = false;
}

onChangeText 대신에

import { TextInput, View} from "react-native";  
import { connect } from "react-redux"; 
import React, { Component, useState } from "react";

function SearchTextInput(props) {
  const { keyword = "", setKeyword } = props; 
  return (
     <TextInput
       style={styles.searchInputText}
       placeholder={"placeholder here"}
       value={keyword}
       onChangeText={setKeyword(t)}
     />
  );
}

const mapStateToProps = state => {
  return {
    keyword: state.search.keyword,
    search: state.search
  };
};
const mapDispatchToProps = dispatch => ({
  setKeyword: payload => dispatch(({type:'updateSearchText', keyword: payload }))
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SearchTextInput);

이 문제는 복잡한 페이지가 있을 때 자주 발생하며, 상태를 업데이트하기 위해 항상 재렌더가 필요합니다.그래서 타이핑할 때 굉장히 느리다는 것을 알 수 있습니다.

해결책을 찾았습니다.구성 요소에 의해 실행되는 반응 수명 주기입니다.따라서 소품을 통해 전달되는 Blur를 호출한 후 onChange와 같은 다른 구성 요소를 만들고 이벤트를 관리할 수 있습니다.나한테는 효과가 있었어.

import React, {Fragment, useState, useEffect} from 'react';
import TextField from '@material-ui/core/TextField';


export function InputText(props) {
  const [value, setValue] = useState("");
  const {onBlur = (e) => {console.log(e)}, name='name', defaultValue= 'Default', type='text', label='Label'} = props

  useEffect(() => {

    // console.log(value);
  })

  return (
      <label>
        <TextField 
          name={name} 
          label={label}  
          onBlur={e => onBlur(e)}
          type={type}
          value={value}
          onChange={e => setValue(e.target.value)}
        />
      </label>
  );
}


class Sample extends React.Component {
    handleBlurInput = e => {        
         this.setState({ [e.target.name]: e.target.value });
    };
  render() {
    return (
    <InputText name="nome" label="Label Sample" defaultValue={this.state.nome} onBlur={this.handleBlurInput.bind(this)} />

    // Complex app ....
    );
  }
}

언급URL : https://stackoverflow.com/questions/33266156/react-redux-input-onchange-is-very-slow-when-typing-in-when-the-input-have-a