React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。
根据我们已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。
考虑一个计时器的例子：
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
这个例子会在 setInterval() 回调函数，每秒都调用 ReactDOM.render()。
注意：在实践中，大多数 React 应用只会调用一次
ReactDOM.render()。
React 只更新它需要更新的部分
React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。你可以使用浏览器的检查元素工具查看上一个例子来确认这一点。尽管每一秒我们都会新建一个描述整个 UI 树的元素，React DOM 只会更新实际改变了的内容，也就是例子中的文本节点。
使用 this.setState() 来更新组件局部状态
import React from 'react';
import ReactDOM from 'react-dom';
class Welcome extends React.Component {
constructor(props) {
super(props);
this.state = {
date: new Date().toLocaleTimeString()
}
}
componentDidMount() {
this.$timer = setInterval(() => {
this.setState({
date: new Date().toLocaleTimeString()
})
}, 1000)
}
render () {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date}</h2>
</div>
)
}
}
通过调用 setState() ，React 知道状态已经改变，并再次调用 render() 方法来确定屏幕上应当显示什么。 这一次，render() 方法中的 this.state.date 将不同，所以渲染输出将包含更新的时间，并相应地更新DOM。
