1.React.FC是一个函数式组件,是在TypeScript使用一个泛型,FC就是FunctionComponent的缩写,事实上React.FC可以写成React.FunctionComponent
const App: React.FunctionComponent = ({ message }) => ( { message });//简写interface PropsType{ message : string;}const App: React.FC = ({ message }) => ( //{ message }相当于解构赋值,从props中解构 { message });//声明了一个函数组件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 ( 现在时间是
{ date.toLocaleTimeString }
)}
(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中的代码就会执行一次,这是不可取的!!