首先，明确一下，react在16.8之前，一直都是无状态组件。如果有人告诉你其在react16.8前使用函数组件进行状态管理，那他大概率是在胡扯
函数组件的定义
函数组件的定义是用函数定义，相对于类组件，函数组件更加的轻量和灵活、
import React from 'react'export default function App() {return (<div>App</div>)
}
是不是比类组件要简单多了 我们现在来看状态的定义和修改（tsx写法 用js就去除<string>）
状态定义和修改
export default function App() {const [username,setusername] =useState<string>('')return (<div>{username}<input value={username} onChange={(e)=>setusername(e.target.value)}></input></div>)
}
这个代码，是用useState 进行的状态定义 这个是一个 react的 hooks 如果感兴趣可以看源码
如果要了解，可以查看我之前的vue自定义hooks 这个hooks返回一个数组数组第一个是变量名 第二个是修改变量的方法
接口的请求
要先明确一点 react函数组件是没有生命周期的，那么想要在加载页面的时候进行接口请求，我们要怎么办呢？ 这里需要使用另一个hooks useEffect
interface UserType{name?:stringpassword?:string}const [userlist,setuserlist] =useState<Array<UserType>>([])let getdata:()=>Promise<void>=async ()=> {let data:UserType= await axios.get(`https://api.github.com/users/`)setuserlist([...userlist,data])}useEffect(()=>{getdata()})接口请换成自己的，我这个仅供参考 如果是jsx 不需要定义类型可以去除 整个 interface
()=>promise Usertype
onst [userlist,setuserlist] =useState<Array<UserType>>([])let getdata=async ()=> {let data= await axios.get(`https://api.github.com/users/`)setuserlist([...userlist,data])}useEffect(()=>{getdata()})如果开发过程中 有什么关于react的 函数组件方面的问题，可以私信我
如果我的文章可以帮助到各位，请给博主一个免费的关注和一个赞