Внесите повторную визуализацию (обновите состояние и обновите DOM) немедленно с помощью response.js

Я понимаю, что вызов setState не обновляет this.state сразу и не вызывает сразу render и обновляет DOM. Документы говорят

setState() не сразу мутирует this.state, но создает ожидающий переход состояния. Доступ к this.state после вызова этого метода может потенциально вернуть существующее значение.

Нет гарантии синхронной работы вызовов setState, и вызовы могут быть собраны для повышения производительности.

Я хотел бы иметь возможность заставить "переход состояния" как это в любой момент. Кажется, это должно быть довольно естественной операцией, но я не могу найти упоминания об этом в документах. Есть ли способ сделать это?

Ответы

Ответ 1

Вы можете использовать forceUpdate для этого:

Если ваш метод render() читает что-то другое, кроме this.props или this.state, вам нужно будет сообщить React, когда ему нужно повторно запустить render() путем вызова forceUpdate(). Вам также потребуется вызвать forceUpdate(), если вы напрямую мутируете this.state.

https://facebook.github.io/react/docs/component-api.html#forceupdate

Ответ 2

Вы можете использовать forceUpdate в сочетании с наличием ключа на компоненте верхнего уровня так.

let key= 0;

var Hello = React.createClass({

  sudoForceUpdate(){
    key++;
    this.forceUpdate();   
  },
  render: function(){
    return <div key={key}>Example</div>;
  }
});

Редактируя ключ и форсируя обновление, dom всегда будет переименовывать.

Вот пример, который подчеркивает разницу между простое редактирование силы и одно с изменением ключа *.

https://jsfiddle.net/69z2wepo/82763/

* обратите внимание, что это, вероятно, довольно плохая практика.

Благодаря Бен Альперту: https://groups.google.com/forum/#!topic/reactjs/8JgClU9jol0