ReactJS：复选框状态在重新呈现Component后仍然存在

Question

我创建了JSfiddle

在这个小提琴中，最初根据传递给组件的props呈现复选框列表。 单击Re-render按钮后，将使用另一组props呈现相同的组件。

现在，请按照以下步骤进行操作 -

1. 加载jsfiddle
2. 选中任意一个复选框（假设我选中第二个和第三个复选框）
3. 点击Re-render按钮

即使在使用新props渲染组件后，您选中的复选框的状态仍保持不变（仍然会检查第2和第3个）

为什么会这样？ 如何使用新的道具集重新渲染组件，以使复选框的状态不会持久。

Answer 1

因为React的 diff algorithm 很聪明。重新渲染新组件的条件是：

• 组件具有不同的键（不同的键）
• 或它实际上是一个不同的HTML元素（不同的节点类型）

以下是一个有效的例子：http://jsfiddle.net/lustoykov/ufLyy3vh/

事情是 - 既不满足你的 input元素的回复条件，所以React真的重用旧的 input。我所做的是为每个重新渲染的每个key元素生成一个新的input。 React假设这是一个新元素，因为key更改了input并使用正确的value重新呈现。

Math.random()是必要的，以确保你生成不同的键，就像：嘿，React，这个元素已经改变 - 请重新渲染它。

但是，我会反对使用不同键的这种方法，因为它违背了React的理念。如果你每次都重新渲染相同的元素，为什么要使用React？这是React的核心 - 当组件相同时不要重新渲染。 相反，您应该使用onChange处理程序仅更新输入的值，而不显式重新呈现整个输入组件。

了解如何使用React forms。