as shown in the figure, what does it mean to use @ plus the component name after introducing the component above?

import React from "react"
import ReactDom from "react-dom"
import queryString from "query-string"
import { connect } from "react-redux"
import { bindActionCreators } from "redux"
import Slide from "components/slide"
import Scroll from "components/scroll"
import Toast from "components/toast"
import { homeUpdate, homeInit, homeList } from "../../stores/home"
import withTabBar from "../common-components/tab-bar"
import TitleBar from "../common-components/title-bar"
import ShopListRow from "../common-components/shop-list-row"
import Skeleton from "./skeleton-screen"
import TopBar from "./top-bar"
import styles from "./index.less"

const mapStateToProps = ({ home }) => ({
    init: home.init,
    banner: home.banner,
    entry: home.entry,
    locationInfo: home.locationInfo,
    shoplist: home.shoplist,
})
const mapActionsToProps = dispatch => bindActionCreators({
    homeUpdate,
    homeInit,
    homeList,
}, dispatch)

@connect(
    mapStateToProps,
    mapActionsToProps,
)
@withTabBar
export default class Home extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            topBarHeight: 0,
        }
    }
    ......
}