34 lines
989 B
Plaintext
34 lines
989 B
Plaintext
---
|
|
description: React-Komponenten bevorzugt als Class Components schreiben
|
|
globs: src/**/*.{jsx,js,tsx,ts}
|
|
alwaysApply: false
|
|
---
|
|
|
|
# Class Components bevorzugen
|
|
|
|
Neue und geänderte React-Komponenten als **Class Components** (`extends PureComponent`), nicht als Function Components.
|
|
|
|
```js
|
|
// ❌
|
|
export default function ArticlePhoto({ photo }) {
|
|
return <Box>{photo?.thumbHash}</Box>;
|
|
}
|
|
|
|
// ✅
|
|
class ArticlePhoto extends Component {
|
|
render() {
|
|
const { photo } = this.props;
|
|
return <Box>{photo?.thumbHash}</Box>;
|
|
}
|
|
}
|
|
export default ArticlePhoto;
|
|
```
|
|
|
|
## Konventionen
|
|
|
|
- `import { Component } from 'react'`
|
|
- Event-Handler im Constructor binden (`this.handleX = this.handleX.bind(this)`)
|
|
- State über `this.state` / `this.setState`
|
|
- Lifecycle: `componentDidMount`, `componentDidUpdate`, `componentWillUnmount` statt Hooks
|
|
- Keine neuen Function Components und keine neuen Hooks (`useState`, `useEffect`, …), außer der Bestandscode ist bereits so und bleibt unangetastet
|