react渲染数据3种方式

1. 直接渲染，（）类似于模板字符串，包裹一个dom元素

ReactDOM.render(
  (<div>
        <h2>现在时间：{new Date().toLocaleTimeString()}</h2>
  </div>),
  document.getElementById('root')
)

1. 通过函数渲染

function Clock(props){
  return (
      <div>
        <h2>现在时间：{props.date}</h2>
      </div>
  )
}
ReactDOM.render(
  <Clock date={new Date().toLocaleTimeString()}/>,
  document.getElementById('root')
)

1. 通过ES6新增class类，注意在class内部接收传参需使用 this.props. 代替函数方式中的 props

class Clock2 extends React.Component{
  render(){
    return (
      <div>
        <h2>假面骑士2：{this.props.date.toLocaleTimeString()}</h2>
      </div>
    )
  }
}
function tick2(){
  ReactDOM.render(
    <Clock2 date={new Date()} />,
    document.getElementById('root')
  )
}
setInterval(tick2,1500)