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提供了类型检查和自动完成的静态属性displayNamepropTypes和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>
    )
}  

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

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

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

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

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

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

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