react渲染數據3種方式

計划完成一個React+Koa的全棧項目 項目地址
React文檔入門

后2種渲染方式渲染一個組件，需要進一步放在render中

1. 直接渲染，（）類似於模板字符串，包裹一個dom元素

import ReactDOM from 'react-dom'   // npm i react-dom

// 此方式是在某基礎組件基礎上直接渲染，不能產生一個模塊被引入->再放置再另一模塊render函數中
ReactDOM.render(
  (<div>
        <h2>現在時間：{new Date().toLocaleTimeString()}</h2>
  </div>),
  document.getElementById('root')
)

2. 通過函數渲染

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

3. 通過ES6新增class類，注意在class內部接收傳參需使用 this.props. 代替函數方式中的 props

import React from 'react'
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)