首页 > 其他分享 >React学习笔记06-函数式组件

React学习笔记06-函数式组件

时间:2023-10-19 10:48:47浏览次数:27  
标签:react 06 函数 hooks React 组件 16.8

函数式组件即在React中通过函数的方式来声明一个组件

import React from "react"
function App() {
    return (
        <div>
            函数式组件
            <div>hhh</div>
        </div>
    )
}
/* 
  16.8之前  //无状态
  16.8之后 react hooks
*/
export default App

函数式组件的使用方式和类组件一样

需要注意的是16.8版本之前函数式组件是无状态的,即不可以进行状态的更新与维护。

16.8版本之后引入了react hooks 可以通过hooks来管理状态。

所以16.8以后得版本更提倡使用函数式组件。

函数式组件+react hooks相对于类组件可以更简单的维护状态,并减少一定的代码量有助于项目的维护。

标签:react,06,函数,hooks,React,组件,16.8
From: https://www.cnblogs.com/SadicZhou/p/17774140.html

相关文章

  • React学习笔记07-组件嵌套
    一个项目肯定是由多个组件构成的,组件之前必然会存在相互嵌套的关系在react中如果想要将一个组件嵌入到另外一个组件中只需要在父组件的render函数的返回值中放入子组件即可请看下面代码importReact,{Component}from"react"classNavbarextendsComponent{rende......
  • import { useRouter } from 'next/router'; 在非hooks 文件或组件中使用
    将 import{useRouter}from'next/router';改为 importRouterfrom"next/router";使用: Router.push('/');原来使用 import{useRouter}from'next/router';会导致报错如下  ......
  • React学习笔记05-类组件
    ES6的加入让JavaScript直接支持使用class来定义一个类,react创建组件的方式就是使用的类的继承,ES6class是目前官方推荐的使用方式,它使用了ES6标准语法来构建,看以下代码importReactfrom'react'importReactDOMfrom'react-dom'classAppextendsReact.Component{rend......
  • 【Vue3响应式入门#01】Reactivity
    专栏分享:vue2源码专栏,vue3源码专栏,vuerouter源码专栏,玩具项目专栏,硬核......
  • 解决多路由复用同一组件页面不刷新问题
     如果可以的话,这个才是最终解决方案,可以解决复用同一个vue页面导致的生命周期只在初始化调用,后续不调用的问题,监听路由的变化只是调用接口,不会触发生命周期......
  • P9506 题解
    blog。Firstsolution/kx。容易想到断环成链。打开标签发现是DP,于是就可以DP了。code,时间复杂度\(O(\text{能过})\)。......
  • react + electron 打包记录
    package.json中的更改:增加: "homepage":"./",  "build":{  "productName":"xxxx",  "appId":"com.xxx.win",  "directories":{   "output":"dist&quo......
  • 38 异步组件
    异步,需要时才被加载<template><div><KeepAlive><component:is="tabComponent"></component></KeepAlive><button@click="change">切换组件</button></div></template>......
  • HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Slider
    滑动条组件,通常用于快速调节设置值,如音量调节、亮度调节等应用场景。该组件从APIVersion7开始支持。无子组件一、接口Slider(options?:{value?:number,min?:number,max?:number,step?:number,style?:SliderStyle,direction?:Axis,reverse?:boolean})从APIversion......
  • 36 动态组件
    两个组件之间来回切换的行为需求-->动态组件组件确实切换了,但没有显示,为啥子重点是:1.<component:is="tabComponent"></component>2.data(){return{tabComponent:"ComponentB"}},3.this.tabComponent=this.tabComponent=="......