前端项目实战41-子组件嵌套memo防止重复渲染

const MenuButton = memo(
    ({
        index,
        onButtonClick,
    }: {
        index: number;
        onButtonClick: (type: string,  index: number) => void;
    }) => (
        <React.Fragment>
            <Button
                size="small"
                style={{ marginRight: '10px' }}
                onClick={() => onButtonClick('edit',index)}
                type="link"
            >
                编辑
            </Button>
            <Button size="small" type="link" 
onClick={() => onButtonClick('remove', index)}>
                删除
            </Button>
        </React.Fragment>
    ),
);

子组件嵌套memo防止重复渲染

 <MenuButton index={index} onButtonClick={onButtonClick} />

 默认为上面传入得两个参数

 ({

        index,

        onButtonClick,

    }: {

        index: number;

        onButtonClick: (type: string,  index: number) => void;

    })

ts指定返回值类型