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

Иногда у меня есть компоненты реакции, которые концептуально сохраняют состояние, и я хочу их сбросить. Идеальное поведение было бы эквивалентно удалению старого компонента и чтению нового, нетронутого компонента.

React предоставляет метод, setStateкоторый позволяет устанавливать собственное явное состояние компонентов, но исключает неявное состояние, такое как фокус браузера и состояние формы, а также исключает состояние его дочерних элементов. Поймать все это косвенное состояние может быть сложной задачей, и я предпочел бы решить ее строго и полностью, а не придумывать каждое новое неожиданное состояние.

Есть ли для этого API или шаблон?

Изменить: я сделал тривиальный пример, демонстрирующий this.replaceState(this.getInitialState())подход и противопоставляющий его this.setState(this.getInitialState())подходу: jsfiddle - replaceStateболее надежен.

Чтобы гарантировать, что указанное вами неявное состояние браузера и состояние дочерних элементов сброшены, вы можете добавить keyатрибут к компоненту корневого уровня, возвращаемому render; когда он изменится, этот компонент будет выброшен и создан с нуля.

render: function() {
    // ...
    return <div key={uniqueId}>
        {children}
    </div>;
}

Нет ярлыка для сброса локального состояния отдельного компонента.

На самом деле вам следует избегать replaceStateи использовать setStateвместо этого.

В документации сказано, что replaceState«может быть полностью удалено в будущей версии React». Я думаю, что он определенно будет удален, потому что replaceStateон не соответствует философии React. Это способствует тому, что компонент React начинает казаться чем-то вроде швейцарского ножа. Это препятствует естественному росту компонента React, который становится меньше и более специализированным.

В React, если вам приходится ошибаться в отношении обобщения или специализации: стремитесь к специализации. Как следствие, дерево состояний для вашего компонента должно иметь определенную скупость (хотя вы можете со вкусом нарушить это правило, если вы создаете модный новый продукт).

Во всяком случае, вот как вы это делаете. Подобно (принятому) ответу Бена выше, но вот так:

this.setState(this.getInitialState());

Также (как сказал Бен), чтобы сбросить «состояние браузера», вам нужно удалить этот узел DOM. Используйте всю мощь vdom и используйте новую keyопору для этого компонента. Новый рендер полностью заменит этот компонент.

Ссылка: https://facebook.github.io/react/docs/component-api.html#replacestate

Добавление keyатрибута к элементу, который необходимо повторно инициализировать, будет перезагружать его каждый раз при изменении элемента propsили stateсвязывания с ним.

ключ = {новая дата (). getTime ()}

Вот пример:

render() {
  const items = (this.props.resources) || [];
  const totalNumberOfItems = (this.props.resources.noOfItems) || 0;

  return (
    <div className="items-container">
      <PaginationContainer
        key={new Date().getTime()}
        totalNumberOfItems={totalNumberOfItems}
        items={items}
        onPageChange={this.onPageChange}
      />
    </div>
  );
}