React更新元素 基础

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会对比元素内容的先后不同，渲染的时候只更新不同的部分