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'))
网友评论