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的 函数组件方面的问题,可以私信我

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

相关推荐
LuciferHuang7 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing7 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20157 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言8 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手8 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言8 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
你的人类朋友10 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手10 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿10 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉