В этой статье блога мы углубимся в различные типы компонентов, используемых в TypeScript и React. Мы рассмотрим различные методы создания компонентов и попутно предоставим примеры кода. К концу вы получите четкое представление о различных типах компонентов и о том, как эффективно их использовать в своих проектах.
- Функциональные компоненты.
Функциональные компоненты — это самый простой тип компонентов в React. Они написаны как функции JavaScript и часто используются в презентационных целях. Вот пример:
import React from 'react';
const FunctionalComponent: React.FC = () => {
return <div>Hello, I am a functional component!</div>;
};
export default FunctionalComponent;
- Компоненты класса.
Компоненты класса — это традиционный способ создания компонентов в React. Они написаны как классы ES6 и могут иметь дополнительные функции, такие как методы состояния и жизненного цикла. Вот пример:
import React, { Component } from 'react';
class ClassComponent extends Component {
render() {
return <div>Hello, I am a class component!</div>;
}
}
export default ClassComponent;
- Чистые компоненты.
Чистые компоненты — это разновидность компонентов класса, которые автоматически оптимизируют рендеринг путем выполнения мелкого сравнения свойств и состояний. Они полезны при выполнении дорогостоящих вычислений или сложном пользовательском интерфейсе. Вот пример:
import React, { PureComponent } from 'react';
class PureComponentExample extends PureComponent {
render() {
return <div>Hello, I am a pure component!</div>;
}
}
export default PureComponentExample;
- Компоненты высшего порядка (HOC):
HOC — это функции, которые принимают компонент и возвращают его расширенную версию. Они используются для добавления дополнительной функциональности к существующим компонентам. Вот пример:
import React from 'react';
const withLogger = (WrappedComponent: React.ComponentType) => {
return class extends React.Component {
componentDidMount() {
console.log('Component has mounted!');
}
render() {
return <WrappedComponent {...this.props} />;
}
};
};
const EnhancedComponent = withLogger(SomeComponent);
export default EnhancedComponent;
- Компоненты реквизита рендеринга.
Компоненты реквизита рендеринга — это компоненты, которые принимают функцию в качестве реквизита, которую они вызывают для рендеринга своего контента. Они допускают повторное использование кода и композицию компонентов. Вот пример:
import React from 'react';
const RenderPropsComponent = ({ render }: { render: () => React.ReactNode }) => {
return <div>{render()}</div>;
};
const App = () => {
return (
<RenderPropsComponent
render={() => <div>Hello, I am rendered through render props!</div>}
/>
);
};
export default App;
В этой статье мы рассмотрели различные типы компонентов в TypeScript и React. Мы исследовали функциональные компоненты, компоненты классов, чистые компоненты, компоненты более высокого порядка (HOC) и компоненты рендеринга реквизита. Каждый тип компонента имеет свои варианты использования и преимущества. Понимая эти различные типы, вы можете выбрать тип компонента, соответствующий вашим конкретным потребностям, и создавать более эффективные и удобные в обслуживании приложения React.