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)