手动更改 ReactJS 组件的键可以吗？

Question

我在一个项目中使用uncontrolled form input components，有时我需要清除一个输入/一组输入的值。我发现一种简单的方法是手动更新组件的key 属性。

它有效，但这是不好的做法吗？手动更改密钥时是否应该担心性能/内存问题？

Answer 1

React 在与虚拟 DOM 进行 diff 时使用键来查找“相同”元素。更改密钥是有效的，因为它会欺骗 React 将您的输入视为一个新元素。在很大程度上，这会影响你的性能，因为 React 将创建和销毁 DOM 元素，而不是仅仅改变改变的属性。在小范围内，您可能不会看到任何明显的性能影响。

如果您要清除该值，在我看来，您的手上可能并没有真正不受控制的输入。毕竟，在某种程度上，你是在“控制”它。但是，如果这是您触摸输入值的唯一原因，我可以理解为什么让它“不受控制”会很有吸引力。我没有对此进行测试，但我认为您应该能够通过为元素提供 ref 并以这种方式访问​​ DOM 元素，以编程方式将值设置为空字符串......我的假设是，由于它是不受控制的，React 不会'diffing/rendering时不要注意value属性。