演示

Question

我最近一直在研究React项目。我已经知道在输入文本框时，React会更新其UI状态并重新呈现文本框并将焦点重新带回来。整个过程发生得如此之快，以至于用户在键入时没有注意到文本框已经重新渲染。

现在我的问题是，为什么React只是在onChange事件中更新文本框的UI状态，并且不重新渲染文本框，因此不需要关注它。

为什么不在此或其他类似情况下保存重新渲染过程。如果我们不重新渲染，我们会错过什么？

Answer 1

React不会重新渲染元素，因为它会创建一个替换元素的新元素。在您的示例中，它只是更新值。

如果某个元素被另一个类型替换，则它只会删除元素。如果它是相同类型的，它只会更新缺失或更改的属性。您应该在官方文档上阅读Reacts Reconciliation。

不同类型的元素

每当根元素具有不同的类型时，React将拆除旧树并从头开始构建新树。从<a>到<img>，或从<Article>到<Comment>，或从<Button>到<div> - 其中任何一项都会导致完整重建。

相同类型的DOM元素

当比较两个相同类型的React DOM元素时，React会查看两者的属性，保持相同的底层DOM节点，并且只更新已更改的属性。

演示

我在下面准备了一个演示。它是React和jQuery的结合，只是为了证明这一点。

当您在textarea中键入一些文本时，状态会更新，元素值会更新以显示您键入的内容。这是通过React完成的。
该按钮完全在外 React范围内。有一个用jQuery编写的eventlistener随机改变元素css背景颜色。

如果组件替换，每次React更新组件的状态值（，即当我们在textarea 中键入时），背景颜色将会丢失，因为我们将讨论新创建的DOM元素。

但是，正如您所看到的，不是 - 背景仍然存在。

＆＃13;

class Greeting extends React.Component {
  constructor() {
    super();
    this.state = {txt: ""};
  }
  
  updateTextarea = (e) => {
    this.setState({txt: e.target.value});
  }
  
  render() {
    return <textarea onChange={this.updateTextarea}>{this.state.txt}</textarea>;
  }
}

ReactDOM.render(<Greeting />, document.getElementById('app'));

$("#btn").on("click", function() {
  var colors = ["red", "green", "lightblue", "grey", "pink", "orange"];
  var rand = Math.floor(Math.random() * 6);
  $("#app textarea").css("background", colors[rand]);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>
<button id="btn">Randomize color!</button>

＆＃13;

React是否需要在其OnChange事件中重新渲染文本框

1 个答案:

不同类型的元素

相同类型的DOM元素

演示