草庐IT

React.FC详细解说

郑建007 2023-10-17 原文

1.React.FC是一个函数式组件，是在TypeScript使用一个泛型，FC就是FunctionComponent的缩写，事实上React.FC可以写成React.FunctionComponent

const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
    <div>{ message }</div>
);

//简写
interface PropsType{
  message : string;
}
const App: React.FC<PropsType> = ({ message }) => ( //{ message }相当于解构赋值，从props中解构
    <div>{ message }</div>
);

//声明了一个函数组件App   泛型为{message: string}  
//我能不能这么理解  泛型就是给组件里面使用的参数指定类型

2. React.FC 包含了 PropsWithChildren 的泛型，不用显式的声明 props.children 的类型。React.FC<> 对于返回类型是显式的，而普通函数版本是隐式的（否则需要附加注释）。

3.React.FC提供了类型检查和自动完成的静态属性：displayName，propTypes和defaultProps（注意：defaultProps与React.FC结合使用会存在一些问题）。

4.我们使用React.FC来写 React 组件的时候，是不能用setState的，取而代之的是useState()、useEffect等 Hook API。

//组件实现实时时间刷新显示
import React, {useState, useEffect} from 'react'; //引入依赖
export App: React.FC<{}> = (props) => { //泛型里面有对象{ 属性名 }(解构)  泛型为空对象就直接写props
    const [date, setDate] = useState(new Date());  //useState()括号里面的值给date
    useEffect(() => {
        const timer = setInterval(() => {
            setDate(new Date()); //setDate() 括号里面的值给date   date的值只能通过setDate()设置
        }, 1000)
    }, []);
    return (
        <div>
            <h3>现在时间是</h3>
            <p>{ date.toLocaleTimeString }</p>
        </div>
    )
}

（1）const [date, setDate] = useState(new Date());

（2）useState很简单，就相当于class函数式组件中的state，useState(值)，其中的值表示初始化           值，date表示接收值，setDate表示设置值

（3）可以把 useEffect Hook 看做componentDidMount(组件挂载完成) componentDidUpdate(组             件更新完成) 和 componentWillUnmount(组件销毁调用) 这三个函数的组合

（4）useEffect最后[]中括号中的参数表示当此参数更新时，其中的方法再次执行一遍，如果没有             参数，则是空。

（5）useEffect里的return表示组件卸载的时候执行的动作，

（6）useEffect会在组件加载完成以后，执行一次，所以有第一条中，其可以控制三个生命周期

（7）如果没有后面的参数，甚至没有[]，即useEffect(()=>{}),这种情况下，每当页面中useState值发生变化，useEffect中的代码就会执行一次，这是不可取的！！

解说Reactspanxffcolorreact.jsjavascript前端

有关React.FC详细解说的更多相关文章

  1. 在VMware16虚拟机安装Ubuntu详细教程 - 2

    在VMware16.2.4安装Ubuntu一、安装VMware1.打开VMwareWorkstationPro官网，点击即可进入。2.进入后向下滑动找到Workstation16ProforWindows，点击立即下载。3.下载完成，文件大小615MB，如下图：4.鼠标右击，以管理员身份运行。5.点击下一步6.勾选条款，点击下一步7.先勾选，再点击下一步8.去掉勾选，点击下一步9.点击下一步10.点击安装11.点击许可证12.在百度上搜索VM16许可证，复制填入，然后点击输入即可，亲测有效。13.点击完成14.重启系统，点击是15.双击VMwareWorkstationPro图标，进入虚拟机主

  2. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？ 最佳答案 尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几

  3. 100个python算法超详细讲解：画直线 - 2

    1．问题描述使用Python的turtle（海龟绘图）模块提供的函数绘制直线。2．问题分析一幅复杂的图形通常都可以由点、直线、三角形、矩形、平行四边形、圆、椭圆和圆弧等基本图形组成。其中的三角形、矩形、平行四边形又可以由直线组成，而直线又是由两个点确定的。我们使用Python的turtle模块所提供的函数来绘制直线。在使用之前我们先介绍一下turtle模块的相关知识点。turtle模块提供面向对象和面向过程两种形式的海龟绘图基本组件。面向对象的接口类如下：1）TurtleScreen类：定义图形窗口作为绘图海龟的运动场。它的构造器需要一个tkinter.Canvas或ScrolledCanva

  4. H2数据库配置及相关使用方式一站式介绍（极为详细并整理官方文档） - 2

    目录H2数据库入门以及实际开发时的使用1.H2数据库的初识1.1H2数据库介绍1.2为什么要使用嵌入式数据库？1.3嵌入式数据库对比1.3.1性能对比1.4技术选型思考2.H2数据库实战2.1H2数据库下载搭建以及部署2.1.1H2数据库的下载2.1.2数据库启动2.1.2.1windows系统可以在bin目录下执行h2.bat2.1.2.2同理可以通过cmd直接使用命令进行启动：2.1.2.3启动后控制台页面：2.1.3spring整合H2数据库2.1.3.1引入依赖文件2.1.4数据库通过file模式实际保存数据的位置2.2H2数据库操作2.2.1Mysql兼容模式2.2.2Mysql模式

  5. ruby - 单个 EventMachine react 器中的多个服务器 - 2

    是否可以在单个事件机器中运行多个服务器？我的意思是，多个服务可以由一个客户端连接同时使用。例如，登录服务器对用户进行身份验证，然后用户可以同时使用聊天室和简单的游戏，例如带有单个客户端套接字的跳棋？或者我是否需要为每个服务使用多个事件机器react器？ 最佳答案 我试过了，它正在工作:#!/usr/bin/envrubyrequire'eventmachine'moduleEchoServerdefpost_initputs"--someoneconnectedtotheechoserver!"enddefreceive_datad

  6. 华为ensp详细安装包、安装教程及所遇问题 - 2

    目录一、安装包链接二、安装详细步骤1.安装Wireshark和WinPcap2.安装OracleVMVirtualBox3.安装ensp三、安装后注册四、启动路由器出现40错误怎么解决一、安装包链接二、安装详细步骤链接:https://pan.baidu.com/s/1QbUUYMOMIV2oeIKHWP1SpA?pwd=xftx提取码：xftx1.安装Wireshark和WinPcap找到Wireshark安装包所在文件夹，双击它，按照以下步骤安装。2.安装OracleVMVirtualBox找到OracleVMVirtualBox安装包所在文件夹，双击它，按照以下步骤安装。注：可自定义安装

  7. Linux操作系统CentOS7安装Nginx[详细版] - 2

    Nginx安装1.官网下载Nginx2.使用XShell和Xftp将压缩包上传到Linux虚拟机中3.解压文件nginx-1.20.2.tar.gz4.配置nginx5.启动nginx6.拓展（修改端口和常用命令）（一）修改nginx端口（二）常用命令1.官网下载Nginxhttp://nginx.org/en/download.html这里我下载的是1.20.2版本，大家按需下载对应稳定版即可2.使用XShell和Xftp将压缩包上传到Linux虚拟机中没有XShell可以参考《Linux操作系统CentOS7连接XShell》3.解压文件nginx-1.20.2.tar.gz1）检查是否存

  8. Anaconda3、TensorFlow和keras简单安装方法（较详细） - 2

    因学习需要用到keras，通过查找较多资料最终完成Anaconda、TensorFlow和Keras的简单安装。因为网上的相关资料较多但大部分不够全面，查找起来不太方便，因此自己记录一下成功下载安装的详细过程,顺便推荐一下借鉴的写的很好的相关教程文章。keras需要在TensorFlow之上才能运行，所以要先安装TensorFlow，而TensorFlow只能在3.7以前的python版本中运行，所以需要先创建一个基于python3.6的虚拟环境，因此便需要先下载Anaconda。一、Anaconda3下载和安装Anaconda下载安装教程原文链接：https://blog.csdn.net/

  9. 【动态规划】背包问题（详细总结，很全） - 2

    【动态规划】一、背包问题1.背包问题总结1）动规四部曲：2）递推公式总结：3）遍历顺序总结：2.01背包1）二维dp数组代码实现2）一维dp数组代码实现3.完全背包代码实现4.多重背包代码实现一、背包问题1.背包问题总结暴力的解法是指数级别的时间复杂度。进而才需要动态规划的解法来进行优化！背包问题是动态规划（DynamicPlanning）里的非常重要的一部分,关于几种常见的背包，其关系如下：在解决背包问题的时候，我们通常都是按照如下五部来逐步分析，把这五部都搞透了，算是对动规来理解深入了。1）动规四部曲：（1）确定dp数组及其下标的含义（2）确定递推公式（3）dp数组的初始化（4）确定遍历顺

  10. 一文让你彻底掌握操作符（超详细教程） - 2

    ✅作者简介：大家好，我是小杨📃个人主页：「小杨」的csdn博客🔥系列专栏：小杨带你玩转C语言【初阶】🐳希望大家多多支持🥰一起进步呀！大家好呀！我是小杨。小杨花几天的时间将C语言中的操作符这部分知识做了一个大总结，在方便自己复习的同时也能够帮助到大家。通篇字数在一万字左右，可以算作是非常详细了，一文就可以带领大家彻底掌握操作符这部分内容，文章很长建议先收藏再看，防止下次想看就找不到啦。文章目录✍1，算术操作符✍2，移位操作符    🔍2.1,左移操作符    🔍2.2,右移操作符       ✨2.2.1,算术移位       ✨2.2.2,逻辑移位✍3，位操作符    🔍3.1,按位与&   

随机推荐