Question

我正在浏览displaying data反应指南，我在hello-react.html文件中显示了以下React.js代码：

var HelloWorld = React.createClass({
  render: function() {
    return (
      <p>
        Hello, <input type="text" placeholder="Your name here" />!
        It is {this.props.date.toTimeString()}
      </p>
    );
  }
});

setInterval(function() {
  ReactDOM.render(
    <HelloWorld date={new Date()} />,
    document.getElementById('example')
  );
}, 500);

当我到达标题Reactive Updates下方时，我会遇到以下句子：

在网络浏览器中打开hello-react.html，然后在文本字段中输入您的姓名。请注意，React仅更改UI中的时间字符串 - 即使您没有编写任何代码来管理此行为，您在文本字段中输入的任何输入仍然存在。

我对部分感到困惑

您在文本字段中输入的任何输入仍然存在，即使您尚未编写任何代码来管理此行为。

这种行为有何不同，无论你输入字段中输入什么内容，无论你是否使用反应，它都会保留在那里？你能解释一下吗？

Answer 1

重点是React仅更新已更改（即）时间的部分，而不是重新呈现整个<p>标记。将其与下面的代码进行对比（参见小提琴）：

setInterval(function() {
    document.getElementById('example').innerHTML = 
    '<p>'
        + 'Hello, <input type="text" placeholder="Your name here" />!'
        + 'It is' + (new Date).getTime()
    + '</p>'
}, 500);

https://jsfiddle.net/L1koa5nn/

这是React docs中的拼写错误还是我无法理解？

1 个答案: