函数组件
export default function Welcome(props){
return(
<div>
<h1>Welcome</h1>
<p>{props}</p>
</div>
)
}
class 组件
import {Component} from 'react'
export default class Welcome extends Component{
constructor(){
super()
this.state={}
}
render(){
return(
<div>
{this.props}
</div>
)
}
}
区别：
函数组件只有props，没有自己的私有数据和生命周期函数。
class组件有自己的私有属性和生命周期函数。
函数组件被称为“无状态组件”。
class组件被称为“有状态组件”
Props
组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。
export default function Welcome(props) {
return (
<div>
{props.name}
</div>
)
}
import {Component} from 'react'
export default class Welcome extends Component{
render(){
return(
<div>
{this.props.name}
</div>
)
}
}
import Welcome from "./welcome";
export default function Hello() {
return (
<>
<Welcome name='欢迎'/>
</>
)
}
image.png
