React的FC与Component

React的FC（FunctionComponent）与Component（类组件）的区别

在React中，组件可以以函数式组件（React.FC）或类组件（继承React.Component）的形式定义。这两种组件形式各有其特点和适用场景。

一、React.FC（函数式组件）

定义与类型：
React.FC是函数式组件，在TypeScript中使用的一个泛型，FC是FunctionComponent的缩写，也可以写成React.FunctionComponent。
例如：const App: React.FunctionComponent<{ message: string }> = ({ message }) => (<div>{message}</div>);
Props与Children：
React.FC包含了PropsWithChildren的泛型，因此不需要显式声明props.children的类型。
React.FC对于返回类型是显式的，而普通函数版本是隐式的（需要附加注释）。
类型检查和自动完成：
React.FC提供了类型检查和自动完成的静态属性：displayName、propTypes和defaultProps（但defaultProps与React.FC结合使用会存在一些问题）。
状态管理：
在函数式组件中，不能使用setState来管理状态，而是使用useState()、useEffect等Hook API。
例如：const [createModalVisible, handleModalVisible] = useState<boolean>(false);
简洁性：
函数式组件通常更加简洁，易于理解和维护，特别是在处理简单的逻辑时。

二、React.Component（类组件）

定义与继承：
如需定义类组件，需要继承React.Component。
例如：class SampleModel extends React.Component { ... }
Props与State：
在TypeScript中，React.Component是通用类型（React.Component<PropType, StateType>），因此需要为其提供（可选）prop和state类型参数。
状态通过this.state和this.setState来管理。
例如：this.setState({ createModalVisible: cVisible });
生命周期方法：
类组件支持React的生命周期方法，如componentDidMount、componentWillUnmount等，这些方法允许在组件的不同阶段执行代码。
复杂性：
类组件在处理复杂逻辑和状态管理时可能更加灵活，因为它们可以访问更多的React特性和API。

三、选择建议

综上所述，React.FC和React.Component各有其优势和适用场景，开发者应根据具体需求和项目特点选择合适的组件形式。

热门标签