美团网站开发费用免费域名申请 知乎

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');};
});