函数组件基本使用

函数组件是无状态组件，没有自己的state和生命周期，所以我们可以把函数组件设置成展示型组件

函数组件没有对象，因此函数组件没有this
函数组件中如何使用props
在子组件中

import React,{FC} from "react"
// Fc是函数组件的类型
type IPorps={
    name:string,
    age:number
}
//这里没有this，因此在箭头函数中的第一个参数就是props
const Say:FC<IPorps> = (props) => {
    return <div>
        这是一个函数组件{props.name}
    </div>
}
export default Say

在父组件中

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from '@/App';
import * as serviceWorker from './serviceWorker';
import Say from "@/components/say"
let user={
  name:"张三",
  age:18
}
ReactDOM.render(
<Say {...user}></Say>,
  document.getElementById('root')
);