什么是stateless组件？

lonelydawn

发布于 2023-03-11 11:24:38

3260

发布于 2023-03-11 11:24:38

对于react来说，就是组件内不保存任何state的组件。第一种是只负责渲染的视图组件，如

function Hello() {

    return (
        <h1>Hello World</h1>
    );
}

第二种是装饰器，它负责从父级接收属性，再将属性传递给装饰的子组件，是一种高阶组件。在业务开发中，如果使用的组件库如antd不符合UE的设计要求，则可以封装这种通用组件以便复用，如

import {Pagination, PaginationProps} from 'antd';
import classnames from 'classnames';
import styles from './index.module.less';

const UHackedPagination = (props: PaginationProps) => {
    const {className} = props;

    return (
        <Pagination
            {...props}
            className={
                classnames(styles.pagination, className)
            }
        />
    );
};

export default UHackedPagination;

第三种虽然可以输入输出，但是不在组件内保存这些输入输出，而是将其暴露给父级，如

import classnames from 'classnames';
import styles from './index.module.less';

interface LabelFilterProps {
    className?: string;
    label: string;
    isActive?: boolean;
    onClick: () => void;
}

const LabelFilter = (props: LabelFilterProps) => {
    const {className, label, isActive, onClick} = props;

    return (
        <span
            className={
                classnames(
                    styles.option,
                    {
                        [styles.actived]: isActive,
                    },
                    className
                )
            }
            onClick={onClick}
        >
            {label}
        </span>
    );
};

export default LabelFilter;

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-03-11，如有侵权请联系 cloudcommunity@tencent.com 删除

react