ReactJS：即使在重新渲染组件后复​​选框状态仍然存在

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。我所做的是在每次重新渲染时为每个input 元素生成一个新的key。 React 假定这是一个新元素，因为 key 发生了变化，并且 input 被重新渲染为正确的 value。

---

Math.random() 是必要的，以确保您生成不同的密钥，就像：嘿，React，此元素已更改 - 请重新渲染它。

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

看看如何使用 React forms。