React如何防止具有值属性的<input />发生变化？

Question

Controlled forms是一种众所周知的React-ism。将value属性添加到<input>标记后，标记不再自行更改，必须通过state和onChange事件处理程序进行控制。如果您设置value而不设置onChange，React甚至会给您一个友好的警告。

但是，在普通HTML中并非如此-带有值集的<input>元素是完全可写的。

The contrast in behavior can be seen in this codepen。请注意，当您在只读框中键入内容时，该组件不会重新渲染，这意味着该值被冻结，因为React用旧的静态值重新渲染。 React以某种方式阻止了DOM的默认行为。

这导致三个问题：

1. 从设计的角度来看，为什么React的行为与DOM本身不同？
2. 这是通过什么机制发生的？
3. 关于DOM应该如何表现的这种不同的哲学还会出现在其他地方吗？

我假设2的答案涉及到影子DOM和synthetic events，但是我还没有找到关于它的工作方式或为什么它专门改变<input>的行为的简洁描述。