es6中class关键字，是实现面向对象编程的新形式
class与function的区别在与：

class有自己的生命周期和私有数据（有state），class创建的组件叫有状态组件，而function没有生命周期，也没有私有数据（无state），function创建的组件叫无状态组件。有无状态的本质区别是有无state和有无生命周期函数

react官方：无状态组件运行效率高于有状态组件

class创建组件

代码如下

//这两个导入的时候，接收的成员名称，必须这么写
import React from 'react'//创建组件、虚拟dom元素，生命周期
import ReactDOM from 'react-dom'//把创建好的组件和虚拟dom放到页面上展示

class Test extends React.Component{
    render(){
        return <div>name:{this.props.name},age:{this.props.age}</div>
    }
}
const user ={
    name:"pawn_C",
    age:24
}

ReactDOM.render(<div>
        <Test name = "pawn" age="24">
        </Test><Test {...user}></Test>
    </div>,
document.getElementById('app'))

class创建组件的state

代码如下

//这两个导入的时候，接收的成员名称，必须这么写
import React from 'react'//创建组件、虚拟dom元素，生命周期
import ReactDOM from 'react-dom'//把创建好的组件和虚拟dom放到页面上展示

class Test extends React.Component{
    constructor(){
        super();

        this.state = {
            msg : "hello"
        }
    }
    render(){
        return <div>name:{this.props.name},age:{this.props.age}----{this.state.msg}</div>
    }
}
const user ={
    name:"pawn_C",
    age:24
}

ReactDOM.render(<div>
        </Test><Test {...user}></Test>
    </div>,
document.getElementById('app'))