react 函数组件

怠惰小白程序员2024-09-26 10:26

首先，明确一下，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?:string
    password?: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的函数组件方面的问题，可以私信我

如果我的文章可以帮助到各位，请给博主一个免费的关注和一个赞