新创建的 preact 组件保留旧组件的 UI 状态（与 react 不同）

Question

我有一个简单的 Preact 组件，其中包含一个复选框：

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

在父 Component 中，这个 Cb 有条件地添加如下：

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

现在是奇怪的部分：如果您按照以下步骤操作：

那么新建的checkbox还是勾选的！这怎么可能？该复选框被真正删除并创建了一个全新的 Cb 实例（我在构造函数中使用日志消息进行了检查）。这个状态存储在哪里？

额外的怪异：React 中的行为不同（那里，新创建的复选框未被选中）。

这里有两个代码相同的Codepen Preact and React，你可以在这里比较行为。

Answer 1

这与 Preact 回收组件的方式有关。有一个 GitHub issue 与您的问题相同。现在要解决此问题，您必须重置 componentWillUnmount

中的选中值

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

其中 this.cb 是对复选框的引用。正在 Codepen 进行修改。我将复选框设置为 ref 因为 componentWillUnMount 和使用 querySelector 存在另一个问题（而且它的类型也更短）

编辑：如评论所述，这仅对 preact 8.x 有效。 preact X 移除组件回收。

Newly created preact Component retains UI state of old component (different from react)