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');
  };
});
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值