Shulou(Shulou.com)06/03 Report--

This article mainly talks about the usage of React.FC and React.Component of React. Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn the usage of React.FC and React.Component of React.

Catalogue

1. React.FC

II. Class xx extends React.Component

The components of React can be defined as functions (React.FC) or class (inheriting React.Component).

1. React.FC

1.React.FC is a functional component and is a generic type used in TypeScript. FC is the abbreviation of FunctionComponent. In fact, React.FC can be written as React.FunctionComponent:

Const App: React.FunctionComponent = ({message}) = > ({message})

2.React.FC contains generics of PropsWithChildren without explicitly declaring the type of props.children. React.FC is explicit for return types, while the normal function version is implicit (otherwise additional comments are required).

3.React.FC provides static properties for type checking and auto-completion: displayName,propTypes and defaultProps (Note: there are some problems with defaultProps in combination with React.FC).

4. When we use React.FC to write React components, we can't use setState. Instead, we use Hook API like useState (), useEffect, and so on.

Example (demonstrated here using Ali's Ant Desgin Pro framework):

Const SampleModel: React.FC = () = > {/ / React.FC is generic const [createModalVisible, handleModalVisible] = useState (false) for typescript; return {{/ * * trigger mode box * * /} handleModalVisible (true)} > sample {/ * mode box component * * /} handleModalVisible (false)} ModalVisible= {createModalVisible} / >} II, class xx extends React.Component

If you want to define class components, you need to inherit React.Component. React.Component is a class component, and in TypeScript, React.Component is a universal type (aka React.Component), so provide it with (optional) prop and state type parameters:

Example (demonstrated here using Ali's Ant Desgin Pro framework):

Class SampleModel extends React.Component {state = {createModalVisible:false,}; handleModalVisible = (cVisible:boolean) = > {this.setState ({createModalVisible:cVisible});}; return {{/ * * trigger mode box * * /} this.handleModalVisible (true)} > sample {/ * mode box component * * /} handleModalVisible (false)} ModalVisible= {this.state.createModalVisible} / >}

Ps: to put it simply, use React.FC when you don't know what component type to use.

At this point, I believe you have a deeper understanding of "the use of React.FC and React.Component of React". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.