React元素建立後無法修改其內容和屬性。唯一的辦法是建立新的元素，傳入ReactDOM.render()方法

三種實現形式：

1.整體替換

function tick () {
  const ele=(
    <div>
      <h1>更新元素</h1>
      <h2>現在是：{new Date().toLocaleTimeString()}</h2>  
    </div>)  ;
  ReactDOM.render(
    ele,
    document.getElementById('example')
  )
}
setInterval(tick,
 
1000);

2.將要展示的部分封裝起來

function Clocks (props) {
  return (
    <div>
      <h1>Hello,world</h1>
      <h2>現在是{props.date.toLocaleString()}</h2>
    </div>
  )
}
function tick () {
  ReactDOM.render(
    <Clock date={new Date()}>,
    document.getElementById(
 
'example')
  )
}
setInterval(tick,1000)

解析：每隔1秒執行tick  觸發Clock 將引數傳遞到Clock函式中，修改html

3.建立React.Component的類，封裝要顯示的元素

class Clock extends React.Component{
  render(){
    return (
      <div>
        <h1>Hello world</h1>
        <h2>現在是{this.props.date}</h2>
      </div>
    )
  }
}
 
function tick (){
  ReactDOM.render(
    <Clock date={new Date()}/>,
    document.getElementById('example')
  )
}
setInterval(tick,1000)

React會對比元素內容的先後不同，渲染的時候只更新不同的部分