Як я можу скинути компонент реагування, включаючи весь перехідно доступний стан?

У мене іноді виникають компоненти реагування, які є концептуально вигідними, і які я хочу скинути. Ідеальна поведінка буде еквівалентно видаленню старого компонента та повторному додаванню нового, первозданного компонента.

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асоціюється з ним.

key = {нова дата (). 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>
  );
}