React 组件

React 组件

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

函数式组件 React.FC<>

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

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

React.FC 包含了 PropsWithChildren 的泛型，不用显式的声明 props.children 的类型。React.FC<> 对于返回类型是显式的，而普通函数版本是隐式的（否则需要附加注释）。

React.FC 提供了类型检查和自动完成的静态属性：displayName，propTypes 和 defaultProps（注意：defaultProps 与React.FC 结合使用会存在一些问题）。

我们使用 React.FC 来写 React 组件的时候，是不能用 setState 的，取而代之的是 useState()、useEffect 等 Hook API。

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类型参数。

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} /> 
  }
}