亲宝软件园·资讯

展开

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

小小的咸鱼哈 人气:0
想了解浅谈React的React.FC与React.Component的使用的相关内容吗,小小的咸鱼哈在本文为您仔细讲解React的React.FC与React.Component的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:React.FC,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。

加载全部内容

相关教程
猜你喜欢
用户评论