Как сохранить состояние

Question

У меня есть текстовое поле с текстом, который я получаю после выполнения вызова ajax.Когда пользователь вводит какой-либо текст, я отправляю значение в состояние.При этом отображается текущая текстовая область, а курсор перемещается в начало строки.

Как можно избежать повторного рендеринга.Как я должен поддерживать состояние.

class Design extends React.Component{

constructor(){
    super();
}


handleMessageChange(e){
    let msg = e.target.innerText;
    this.props.dispatch({type:'design_changed',designObj:{property:'message',value:msg}})
}
 render(){
    return  (

      <React.Fragment>

          <Panel header="Message" key="2">
            <div>
              <div className="userscoop-content-editable-cls" contentEditable="true" onKeyUp={this.handleMessageChange.bind(this)}>{this.props.message}</div>
            </div>
          </Panel>

      </React.Fragment>
 }

function mapStateToProps(state){
   let settings = state.HelloBar.template.settings;
   return {
      background_color: settings.background_color,
      action_color:settings.action_color,
      message:settings.message,
      button_color:settings.button_color,
      input_placeholder:settings.input_placeholder,
      goal:state.HelloBar.goal
    } 
}

Answer 1

Вы можете использовать метод shouldComponentUpdate() компонентов, чтобы определить, следует ли перерисовывать его при изменении некоторых реквизитов. Вы можете написать, чтобы игнорировать это изменение.

Answer 2

Попробуйте Redux-Form, если вы имеете дело с компонентами, которые требуют постоянного действия над полями. Или используйте document.addEventListener в каждом действии, которое вы запускаете, передавая keyUp или keyDown

Answer 3

Если вы используете shouldComponentUpdate метод жизненного цикла и сравниваете новое и старое состояние, вы можете отменить рендеринг.

В качестве альтернативы вы можете сначала попробовать PureComponent и посмотреть, работает ли он.

Если у вас все еще есть проблемы, возможно, стоит рассмотреть возможность сохранения состояния курсора. [ отсюда ]