react 函数组件

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

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

相关推荐
Mintopia2 分钟前
当像素学会游泳:流体模拟的奇妙旅程
前端·javascript·计算机图形学
程序员厉飞雨6 分钟前
Gradle 缓存优化
前端·架构
前端的日常10 分钟前
vue2 中的虚拟 dom 是怎么实现的?
前端
Dream耀10 分钟前
从零实现JavaScript防抖与节流:渐进式优化之旅
前端·javascript·面试
傻球11 分钟前
彻底搞懂「像素/PPI/DPI/分辨率/DPR/缩放」之间的关系
前端·css
拾光拾趣录11 分钟前
OAuth 2.0:现代应用安全的授权与登录规范
前端·安全
拾光拾趣录12 分钟前
前端代码保护:防止网页调试
前端·前端工程化
前端布鲁伊12 分钟前
【前端面试场景题】JavaScript数字溢出了?BigInt来救场!前端处理超大数值的完整攻略
前端·面试
代码与野兽13 分钟前
Web3开发者生态终极选择指南:新手如何在激烈竞争中脱颖而出?
前端·后端·web3
默默地离开13 分钟前
React自定义 Hooks 不用死磕,轻松拿捏也能站上技术金字塔尖!
前端·react.js·前端框架