浅谈React的React.FC与React.Component的使用

目录

• 一、React.FC<>
  
• 二、class xx extends React.Component
  

React 的组件可以定义为 函数（React.FC<>）或class（继承 React.Component） 的形式。

一、React.FC<>

1.React.FC是函数式组件，是在TypeScript使用的一个泛型，FC就是FunctionComponent的缩写，事实上React.FC可以写成React.FunctionComponent：

const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);

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。

例子（这里使用阿里的Ant Desgin Pro框架来演示）：

const SampleModel: React.FC<{}> = () =>{   //React.FC<>为typescript使用的泛型
   const [createModalVisible, handleModalVisible] = useState<boolean>(false); 
   return{
   {/** 触发模态框**/}
   <Button style={{fontSize:'25px'}}  onClick={()=>handleModalVisible(true)} >样例</Button>
   {/** 模态框组件**/}
   <Model onCancel={() => handleModalVisible(false)} ModalVisible={createModalVisible} /> 
  }

二、class xx extends React.Component

如需定义 class 组件，需要继承 React.Component。React.Component是类组件，在TypeScript中，React.Component是通用类型（aka React.Component<PropType, StateType>），因此要为其提供（可选）prop和state类型参数：

例子（这里使用阿里的Ant Desgin Pro框架来演示）：：

class SampleModel extends React.Component {
  state = {
    createModalVisible:false,
  };

  handleModalVisible =(cVisible:boolean)=>{
    this.setState({createModalVisible:cVisible});
  };
  return {
  {/** 触发模态框**/}
   <Button onClick={()=>this.handleModalVisible(true)} >样例</Button>
   {/** 模态框组件**/}
   <Model onCancel={() => handleModalVisible(false)} ModalVisible={this.state.createModalVisible} /> 
  }

ps：简单来说，不知道用什么组件类型时，就用 React.FC。

到此这篇关于浅谈React的React.FC与React.Component的使用的文章就介绍到这了,更多相关React的React.FC与React.Component内容请搜索华域联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持华域联盟！

您可能感兴趣的文章:

• 浅谈React Component生命周期函数
• 简谈创建React Component的几种方式
• React Component存在的几种形式详解
• React 无状态组件(Stateless Component) 与高阶组件
• React styled-components设置组件属性的方法
• 详解在React.js中使用PureComponent的重要性和使用方式

本文由 华域联盟 原创撰写：华域联盟 » 浅谈React的React.FC与React.Component的使用

转载请保留出处和原文链接：https://www.cnhackhy.com/80927.htm