React.FC详细解说

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) => { //泛型里面有对象{ 属性名 }(解构)  泛型为空对象就直接写propsconst [date, setDate] = useState(new Date());  //useState()括号里面的值给dateuseEffect(() => {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中的代码就会执行一次，这是不可取的！！

React.FC详细解说相关推荐

React的React.FC与React.Component的初步认识
React 的组件可以定义为函数(React.FC<>)或class(继承 React.Component) 的形式. 一.React.FC<> 1.React.FC是函数式 ...
React的React.FC与React.Component
React的组件可定义为函数(React.FC<>)或class(继承React.Componnent)的形式 ###React.FC<> 1.React.FC是函数式组件是 ...
react memo 和 react.fc的使用
1.memo 介绍: React.memo 为高阶组件.它与 React.PureComponent 非常相似,但它适用于函数组件,但不适用于 class 组件. 如果你的函数组件在给定相同 prop ...
TypeScript React
环境搭建我们当然可以先用脚手架搭建React项目,然后手动配置成支持TypeScript的环境,虽然比较麻烦,但可以让你更清楚整个过程.这里比较麻烦,就不演示了,直接用命令配置好. npx crea ...
React Router 学习
本次使用react-router 版本为 5.0.1 本教程前提是你的应用程序是一个web应用程序,使用'react-router-dom'包来实现页面的路由在React router中有三种类型的 ...
react和nodejs_如何使用React，TypeScript，NodeJS和MongoDB构建Todo应用
react和nodejs In this tutorial, we will be using TypeScript on both sides (server and client) to buil ...
react native loading动画_TypeScript for React (Native) 进阶
I. 为何要用TypeScript 我们公司在德国还有个团队. 我们这次要接他们的一个库. 其中的一个API要求我们传入参数, 这个API是这样定义的: /** * @param {Object} i ...
React+TS学习和使用（三）：React Redux和项目的路由配置
开启学习react+ts,本篇主要是学习使用React Redux和项目的路由配置一.React Redux 需求:使用TS+React Redux实现一个累加. A. 安装 $ yarn add ...
React + TS项目开发小技巧总结
一.react hook知识 1.基本使用最常用的Hook,有两个:useState.useEffect import React, { useState } from "react&qu ...

React.FC详细解说

React.FC详细解说相关推荐

最新文章

热门文章