Вновь созданный компонент preact сохраняет состояние интерфейса старого компонента (отличается от реагирования).

Question

У меня есть простой компонент Preact, который содержит флажок:

class Cb extends Component {
  render() {
    return (<div>Checkbox: <input type="checkbox" /></div>);
  }
}

В родительском Component это Cb условно добавляется следующим образом:

{ this.state.show ? <Cb /> : <div>Nothing</div> }

Теперь о странной части: если вы выполните следующие действия:

1. Установите флажок
2. Переключить state.show в родительском Component, удалив Cb
3. Снова переключите state.show в родительском Component, создав новый Cb

Тогда вновь созданный флажок все еще отмечен! Как это возможно? Флажок действительно удален и создан совершенно новый экземпляр Cb (я проверил, используя сообщения журнала в конструкторе). Где хранится это состояние?

Дополнительная странность: В React поведение отличается (там, вновь созданный флажок не отмечен).

Вот два Codepens с одинаковым кодом в Preact и React , где вы можете сравнить поведение.

Answer 1

Это связано с тем, как Preact перерабатывает компоненты. Существует проблема GitHub в том же ключе, что и ваш вопрос. Теперь, чтобы решить проблему, вам нужно сбросить проверенное значение в componentWillUnmount

  componentWillUnmount () {
    this.cb.checked = false;
  }

Где this.cb - ссылка на флажок. Рабочая Codepen с модификацией. Я установил флажок в качестве ссылки, потому что есть другая проблема с componentWillUnMount и использованием querySelector (и его также короче для ввода)

Редактировать: Как прокомментировано, это действительно только для preact 8.x. preact X удаляет переработку компонентов.