React.FC介绍

React.FC是React中的一种函数组件类型,是在TypeScript中使用的一个泛型,FC即Function Component的缩写,表示一个接收props作为输入并返回JSX元素的函数组件。
使用React.FC可以为组件定义类型,提供props的类型作为泛型参数,享受TypeScript的类型检查和自动补全等特性。同时,React.FC也明确了组件的返回类型,其返回类型被限定为React元素(JSX.Element)或null。

下面是一个简单的例子:

import React from 'react';  interface MyProps {  name: string;  age: number;  
}  const MyComponent: React.FC<MyProps> = ({ name, age }) => {  return (  <div>  <h1>Hello, {name}!</h1>  <p>You are {age} years old.</p>  </div>  );  
};  export default MyComponent;

在这个例子中,我们定义了一个名为 MyComponent 的函数组件,它接受一个 MyProps 类型的 props。MyProps 接口定义了 name 和 age 两个属性,它们的类型分别是 string 和 number。

与React.Component(类组件)相比,React.FC(函数式组件)是一个纯函数,不能使用setState,而是使用useState()、useEffect等Hook API。函数式组件也称为无状态组件,它包含了PropsWithChildren的泛型,不需要显式地声明props.children的类型。

简单实现页面数字1秒后加1:

import React, { useState, useEffect } from 'react';  const App: React.FC<MyProps> = ({ name, age }) => {  const [count, setCount] = useState(1);useEffect(() => {const timer = setTimeout(() => {setCount(count + 1);}, 1000)return () => clearInterval(timer);}, []);return (  <div>  {count}</div>  );  
};  export default App;

useEffect相当于componentDidMount、componentDidUpdate和componentWillUnmount的组合体,可以在函数组建中替代生命周期。

1.传递一个空数组作为第二个参数,这个 Effect 将永远不会重复执行,可以替代componentDidMount。

useEffect(() => {console.log('componentDidMount');
}, []);

2.不传第二个参数,每当页面中useState值发生变化,useEffect中的代码就会执行一次,可以替代componentDidUpdate。

useEffect(() => {console.log('componentDidUpdate');
});

3.useEffect可以返回一个函数,该函数将在组件被卸载时的执行,可以替代componentWillUnmount。

useEffect(() => {return () => {console.log('componentWillUnmount');};
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/746027.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023 年 9 月青少年软编等考 C 语言一级真题解析

目录 T1. 日期输出思路分析 T2. 计算 (a b) (c - b) 的值思路分析 T3. 有一门课不及格的学生思路分析 T4. 特殊求和T5. 比 n 小的最大质数 T1. 日期输出 给定两个整数&#xff0c;表示一个日期的月和日。请按照 "MM-DD" 的格式输出日期&#xff0c;即如果月和日不…

【PyQT】大地线长度计算工具实现

本设计实现了一个大地线长度计算工具&#xff0c;用户可以输入两个点的经纬度坐标&#xff0c;然后点击计算按钮&#xff0c;程序会根据输入的经纬度坐标计算出这两个点之间的大地线长度&#xff0c;并将结果显示在界面上。如下图所示。 附录完整代码如下&#xff1a; # 导入所…

L1-5 猜帽子游戏

宝宝们在一起玩一个猜帽子游戏。每人头上被扣了一顶帽子&#xff0c;有的是黑色的&#xff0c;有的是黄色的。每个人可以看到别人头上的帽子&#xff0c;但是看不到自己的。游戏开始后&#xff0c;每个人可以猜自己头上的帽子是什么颜色&#xff0c;或者可以弃权不猜。如果没有…

【C语言_C语言语句_复习篇】

目录 一、C语言的语句有哪些 1.1 空语句 1.2 表达式语句 1.3 函数调用语句 1.4 复合语句 1.5 控制语句 二、分支语句&#xff08;两种&#xff09; 1.1 if语句 1.1.1 普通分支语句(if、if_else) 1.1.2 嵌套if语句 1.1.3 else嵌套if两种写法的比较 1.1.4 else悬空问题 1.1.…

MapReduce解析:从定义到核心思想,编程规范与序列化解读

目录 一、 MapReduce1.1 MapReduce定义1.2 MapReduce优缺点1.2.1 优点1.2.2 缺点 1.3 MapReduce核心思想1.4 MapReduce进程1.5 常用数据序列化类型1.6 MapReduce编程规范1.6.1Mapper阶段1.6.2 Reduce阶段1.6.3 Driver阶段 1.7 WordCount案例实操1.7.1 本地测试1.7.2 提交到集群…

TEC温度器温度控制器

一 主要特点 1 两路独立的串口&#xff0c;可同时手动和串口指令设定 PID 和温度&#xff1b; 2 一拖二结构&#xff0c;一个调试器控制两个控温模块单元&#xff1b; 3 精准控制温度&#xff0c;用户可自行修正&#xff1b;PT100/PT1000/NTC3435 温度电阻偏差&#xff1b; …

1.1 课程架构介绍:STM32H5信息安全特性概览

1.1 课程架构介绍&#xff1a;STM32H5信息安全特性概览 1. 概述 开发者在打造嵌入式系统时&#xff0c;安全和性能是产品开发设计的考量重点。为实现这一目标&#xff0c;ST推出了STM32H5系列&#xff0c;该系列作为微控制器新标杆面向工业应用市场&#xff0c;将为用户带来更…

windows中如何将已安装的node.js版本进行更换

第一步&#xff1a;先清除已经安装好的node.js版本 1.按健winR弹出窗口&#xff0c;键盘输入cmd,然后敲回车&#xff08;或者鼠标直接点击电脑桌面最左下角的win窗口图标弹出&#xff0c;输入cmd再点击回车键&#xff09; 然后进入命令控制行窗口&#xff0c;并输入where node…

相机学习的知识积累

六个问题理解ISP全流程_哔哩哔哩_bilibili ISP (Image Signal Processing) - NPTEL公开课_哔哩哔哩_bilibili ISP Pipline_isp pipeline-CSDN博客 摄像头camera基础知识_哔哩哔哩_bilibili

PHP将HTML标签转化为图片

composer require yangshuanlin/php-html2img test.php <?php require vendor/autoload.php; use Html2image\Assets\html2Img;/*** html&#xff1a;可以是html文件 或者网页URL 或者为参数 必填* $data 额外的参数 必填* $back_url 回调地址 必填*/ $htmlfile_get_con…

【Axure教程】能增删改的树形表格

多层级表格又成为树形表格&#xff0c;是在后台常用的一种表格形式&#xff0c;当表格数据存在多层级关系是&#xff0c;可以通过多层级表格&#xff0c;从而更加清晰的呈现数据内容&#xff0c;帮助人们更好地理解和分析数据之间的关系&#xff0c;从而更加有效地传递信息。 …

【吊打面试官系列】Java虚拟机JVM篇 - 关于JVM 新生代、老年代、永久代的区别

大家好&#xff0c;我是锋哥。今天分享关于JVM新生代、老年代、永久代的区别的JVM面试题&#xff0c;希望对大家有帮助&#xff1b; JVM 新生代、老年代、永久代的区别? 在 Java 中&#xff0c;堆被划分成两个不同的区域&#xff1a;新生代 ( Young ) 、老年代 ( Old ) 。而新…

前端React篇之React-Router的实现原理是什么?React-Router的路由有几种模式?

目录 React-Router的实现原理是什么&#xff1f;React-Router的路由有几种模式&#xff1f;HashRouterBrowserRouter React-Router的实现原理是什么&#xff1f; 基于hash的路由&#xff1a;通过监听浏览器的hashchange事件来感知URL中hash部分的变化。当hash发生变化时&#x…

名字空间和类型增强C++

一、名字空间 关键字&#xff1a;namespace&#xff1b; 作用&#xff1a;一个大项目中多个文件里的函数和变量名容易发生冲突&#xff0c;名字空间用来解决这种冲突 语法&#xff1a; namespace namespace_name {}例如&#xff1a; namespce Sample {int i;float f;void d…

PYTHON 120道题目详解(118-120)

118.解释Python中的迭代器&#xff08;Iterator&#xff09;和可迭代对象&#xff08;Iterable&#xff09;的区别和联系。 在Python中&#xff0c;迭代器&#xff08;Iterator&#xff09;和可迭代对象&#xff08;Iterable&#xff09;是两个非常重要的概念&#xff0c;它们在…

【微服务】nacos注册中心

Nacos注册中心 国内公司一般都推崇阿里巴巴的技术&#xff0c;比如注册中心&#xff0c;SpringCloudAlibaba也推出了一个名为Nacos的注册中心。 1.1.认识和安装Nacos Nacos是阿里巴巴的产品&#xff0c;现在是SpringCloud中的一个组件。相比Eureka功能更加丰富&#xff0c;在…

C++ 改造红黑树,封装map和set

C 改造红黑树,封装map和set 一.前言:已经实现好了的红黑树二.简化STL库里面对于map和set的封装1.STL库中红黑树的简化代码2.STL库中set的简化代码3.STL库中map的简化代码4.封装map和set的第一步5.红黑树第一个模板参数的价值6.红黑树节点的定义 三.仿函数1.解除仿函数的误解2.仿…

Android App冷启动耗时优化

Android应用启动过程 Android应用启动过程&#xff0c;主要包含app::onCreate及执行前的Application阶段及Activity::onCreate执行之后的Activity阶段&#xff0c;以及两个阶段之间的间隙handleMessage阶段和最终页面渲染上屏完成前数据加载阶段四个区间组成。 具体来看&#x…

IDEA中配置Tomcat

在IDEA中配置Tomcat 第一步&#xff1a;选择这个方框 第二步&#xff1a;选择号&#xff0c;找到Tomcat Server&#xff08;Local&#xff09; 第三步&#xff1a;将红方框内填完整 第四步&#xff1a;创建artifaces&#xff0c;选择Deployment–>Artia…选择 *.war expl…

嵌入式驱动学习第三周——字符设备驱动关键结构体

前言 linux内核将字符设备抽象成一个具体的数据结构&#xff0c;可以理解为字符设备对象&#xff0c;这篇博客就来讲解一下字符设备驱动的关键结构体。 嵌入式驱动学习专栏将详细记录博主学习驱动的详细过程&#xff0c;未来预计四个月将高强度更新本专栏&#xff0c;喜欢的可以…