WHAT - 通过 shadcn 组件源码学习 React

目录

  • 一、button
    • 1. 导入部分
    • 2. 定义按钮的样式变体
      • 1. `variant`
      • 2. `size`
      • 总结
    • 3. 定义按钮的属性类型
    • 4. 定义按钮组件
    • 5. 导出组件和样式变体
    • 总结
  • 二、multi-select
    • 多选组件的核心上下文与状态
      • 1. 上下文与钩子
      • 2. MultiSelector 组件
    • 组件子部分
      • 1. MultiSelectorTrigger
      • 2. MultiSelectorInput
      • 3. MultiSelectorContent
      • 4. MultiSelectorList
      • 5. MultiSelectorItem
    • 总结

一、button

组件来源：https://ui.shadcn.com/docs/components/button

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",{variants: {variant: {default:"bg-primary text-primary-foreground hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground hover:bg-destructive/90",outline:"border border-input bg-background hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80",disabled:"disabled-foreground bg-disabled text-disabled-foreground",ghost: "hover:bg-accent focus-visible:ring-0 focus-visible:ring-offset-0",link: "hover:text-primary underline-offset-4",icon: "border border-input",},size: {default: "h-8 px-5 py-1.5",sm: "h-9 rounded-md px-3",lg: "h-11 rounded-md px-8",icon: "h-6 w-6",iconSm: "h-8 w-8",ssm: "h-6",},},defaultVariants: {variant: "default",size: "default",},},
)export interface ButtonPropsextends React.ButtonHTMLAttributes<HTMLButtonElement>,VariantProps<typeof buttonVariants> {asChild?: boolean
}const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, asChild = false, ...props }, ref) => {const Comp = asChild ? Slot : "button"return (<CompclassName={cn(buttonVariants({ variant, size, className }))}ref={ref}{...props}/>)},
)
Button.displayName = "Button"export { Button, buttonVariants }

这段代码定义了一个可变样式的按钮组件Button，使用了多个工具和库。我们将逐步解释各部分代码的作用。

1. 导入部分

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
  • React: 导入React库。
  • Slot: 从@radix-ui/react-slot库中导入Slot组件，用于支持“asChild”属性。
  • cva 和 VariantProps: 从class-variance-authority库中导入，用于定义可变样式。
  • cn: 从项目中的utils工具库导入cn函数，用于合并CSS类名。

2. 定义按钮的样式变体

const buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",{variants: {variant: {default: "bg-primary text-primary-foreground hover:bg-primary/90",destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",disabled: "disabled-foreground bg-disabled text-disabled-foreground",ghost: "hover:bg-accent focus-visible:ring-0 focus-visible:ring-offset-0",link: "hover:text-primary underline-offset-4",icon: "border border-input",},size: {default: "h-8 px-5 py-1.5",sm: "h-9 rounded-md px-3",lg: "h-11 rounded-md px-8",icon: "h-6 w-6",iconSm: "h-8 w-8",ssm: "h-6",},},defaultVariants: {variant: "default",size: "default",},},
)
  • buttonVariants: 使用cva函数定义了按钮的样式变体。这个对象包含了两个主要部分：
    • variants: 定义了不同的变体选项，如variant和size，每个选项又包含不同的具体样式。
    • defaultVariants: 定义了默认的变体值。

当然，让我们逐一解释variants对象中的每个属性及其对应的CSS属性值。

1. variant

variant属性定义了按钮的多种视觉风格，每种风格都对应一组CSS类名。

  • default

    bg-primary {background-color: var(--primary-color);
}
text-primary-foreground {color: var(--primary-foreground-color);
}
hover:bg-primary/90 {background-color: var(--primary-color);opacity: 0.9;
}

  • destructive

    bg-destructive {background-color: var(--destructive-color);
}
text-destructive-foreground {color: var(--destructive-foreground-color);
}
hover:bg-destructive/90 {background-color: var(--destructive-color);opacity: 0.9;
}

  • outline

    border border-input {border: 1px solid var(--input-border-color);
}
bg-background {background-color: var(--background-color);
}
hover:bg-accent {background-color: var(--accent-color);
}
hover:text-accent-foreground {color: var(--accent-foreground-color);
}

  • secondary

    bg-secondary {background-color: var(--secondary-color);
}
text-secondary-foreground {color: var(--secondary-foreground-color);
}
hover:bg-secondary/80 {background-color: var(--secondary-color);opacity: 0.8;
}

  • disabled

    disabled-foreground {color: var(--disabled-foreground-color);
}
bg-disabled {background-color: var(--disabled-color);
}
text-disabled-foreground {color: var(--disabled-foreground-color);
}

  • ghost

    hover:bg-accent {background-color: var(--accent-color);
}
focus-visible:ring-0 {outline: none;box-shadow: none;
}
focus-visible:ring-offset-0 {box-shadow: none;
}

  • link

    hover:text-primary {color: var(--primary-color);
}
underline-offset-4 {text-underline-offset: 4px;
}

  • icon

    border border-input {border: 1px solid var(--input-border-color);
}

2. size

size属性定义了按钮的不同尺寸，每个尺寸都对应一组CSS类名。

  • default

    h-8 {height: 2rem; /* 32px */
}
px-5 {padding-left: 1.25rem; /* 20px */padding-right: 1.25rem; /* 20px */
}
py-1.5 {padding-top: 0.375rem; /* 6px */padding-bottom: 0.375rem; /* 6px */
}

  • sm

    h-9 {height: 2.25rem; /* 36px */
}
rounded-md {border-radius: 0.375rem; /* 6px */
}
px-3 {padding-left: 0.75rem; /* 12px */padding-right: 0.75rem; /* 12px */
}

  • lg

    h-11 {height: 2.75rem; /* 44px */
}
rounded-md {border-radius: 0.375rem; /* 6px */
}
px-8 {padding-left: 2rem; /* 32px */padding-right: 2rem; /* 32px */
}

  • icon

    h-6 {height: 1.5rem; /* 24px */
}
w-6 {width: 1.5rem; /* 24px */
}

  • iconSm

    h-8 {height: 2rem; /* 32px */
}
w-8 {width: 2rem; /* 32px */
}

  • ssm

    h-6 {height: 1.5rem; /* 24px */
}

总结

这些variants属性提供了丰富的样式变体，使得按钮组件可以根据不同的需求应用不同的外观和尺寸，通过简单的属性传递实现了多样化的视觉效果。

3. 定义按钮的属性类型

export interface ButtonPropsextends React.ButtonHTMLAttributes<HTMLButtonElement>,VariantProps<typeof buttonVariants> {asChild?: boolean
}
  • ButtonProps: 定义了按钮组件的属性接口，扩展了React.ButtonHTMLAttributes和VariantProps。另外，还增加了asChild属性，用于指定是否将按钮作为子组件渲染。

4. 定义按钮组件

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, asChild = false, ...props }, ref) => {const Comp = asChild ? Slot : "button"return (<CompclassName={cn(buttonVariants({ variant, size, className }))}ref={ref}{...props}/>)},
)
Button.displayName = "Button"
  • Button: 使用React.forwardRef定义一个带有转发引用（ref）的按钮组件。
    • Comp: 根据asChild属性，动态决定使用Slot组件还是button元素。
    • cn(buttonVariants({ variant, size, className })): 使用cn函数合并传入的className和通过buttonVariants生成的变体样式。

5. 导出组件和样式变体

export { Button, buttonVariants }
  • Button和buttonVariants均被导出，允许在其他模块中使用。

总结

这个组件使用了class-variance-authority库来管理按钮的样式变体，通过React的forwardRef和条件渲染实现了灵活的按钮组件。这样，开发者可以通过简单的属性传递来改变按钮的外观和行为。

二、multi-select

组件来源：https://shadcn-extension.vercel.app/docs/multi-select

如果希望有远程搜索能力，可以参考 https://shadcnui-expansions.typeart.cc/docs/multiple-selector

"use client";import { Badge } from "@/components/ui/badge";
import {Command,CommandItem,CommandEmpty,CommandList,
} from "@/components/ui/command";
import { cn } from "@/lib/utils";
import { Command as CommandPrimitive } from "cmdk";
import { X as RemoveIcon, Check } from "lucide-react";
import React, {KeyboardEvent,createContext,forwardRef,useCallback,useContext,useState,
} from "react";type MultiSelectorProps = {values: string[];onValuesChange: (value: string[]) => void;loop?: boolean;options: {label: string, value: string, color?: string}[];
} & React.ComponentPropsWithoutRef<typeof CommandPrimitive>;interface MultiSelectContextProps {value: string[];options: {label: string, value: string, color?: string}[];onValueChange: (value: any) => void;open: boolean;setOpen: (value: boolean) => void;inputValue: string;setInputValue: React.Dispatch<React.SetStateAction<string>>;activeIndex: number;setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
}const MultiSelectContext = createContext<MultiSelectContextProps | null>(null);const useMultiSelect = () => {const context = useContext(MultiSelectContext);if (!context) {throw new Error("useMultiSelect must be used within MultiSelectProvider");}return context;
};const MultiSelector = ({values: value,onValuesChange: onValueChange,loop = false,className,children,dir,options,...props
}: MultiSelectorProps) => {const [inputValue, setInputValue] = useState("");const [open, setOpen] = useState<boolean>(false);const [activeIndex, setActiveIndex] = useState<number>(-1);const onValueChangeHandler = useCallback((val: string) => {if (value.includes(val)) {onValueChange(value.filter((item) => item !== val));} else {onValueChange([...value, val]);}},[value]);// TODO : change from else if use to switch case statementconst handleKeyDown = useCallback((e: KeyboardEvent<HTMLDivElement>) => {const moveNext = () => {const nextIndex = activeIndex + 1;setActiveIndex(nextIndex > value.length - 1 ? (loop ? 0 : -1) : nextIndex);};const movePrev = () => {const prevIndex = activeIndex - 1;setActiveIndex(prevIndex < 0 ? value.length - 1 : prevIndex);};if ((e.key === "Backspace" || e.key === "Delete") && value.length > 0) {if (inputValue.length === 0) {if (activeIndex !== -1 && activeIndex < value.length) {onValueChange(value.filter((item) => item !== value[activeIndex]));const newIndex = activeIndex - 1 < 0 ? 0 : activeIndex - 1;setActiveIndex(newIndex);} else {onValueChange(value.filter((item) => item !== value[value.length - 1]));}}} else if (e.key === "Enter") {setOpen(true);} else if (e.key === "Escape") {if (activeIndex !== -1) {setActiveIndex(-1);} else {setOpen(false);}} else if (dir === "rtl") {if (e.key === "ArrowRight") {movePrev();} else if (e.key === "ArrowLeft" && (activeIndex !== -1 || loop)) {moveNext();}} else {if (e.key === "ArrowLeft") {movePrev();} else if (e.key === "ArrowRight" && (activeIndex !== -1 || loop)) {moveNext();}}},[value, inputValue, activeIndex, loop]);return (<MultiSelectContext.Providervalue={{value,onValueChange: onValueChangeHandler,open,setOpen,inputValue,setInputValue,activeIndex,setActiveIndex,options,}}><CommandonKeyDown={handleKeyDown}className={cn("overflow-visible bg-transparent flex flex-col",className)}dir={dir}{...props}>{children}</Command></MultiSelectContext.Provider>);
};const MultiSelectorTrigger = forwardRef<HTMLDivElement,React.HTMLAttributes<HTMLDivElement>
>(({ className, children, ...props }, ref) => {const { value, onValueChange, activeIndex, open, options } = useMultiSelect();const mousePreventDefault = useCallback((e: React.MouseEvent) => {e.preventDefault();e.stopPropagation();}, []);const valueOptions = options.filter(option => value.includes(option.value))return (<divref={ref}className={cn("min-h-9 bg-accent text-sm flex items-center flex-wrap gap-1 px-3 rounded-lg mb-2",open ? "ring-ring ring-1 ring-offset-1 bg-background" : "",className)}{...props}>{valueOptions.map((item, index) => (<Badgekey={item.value}color={item.color}className={cn("flex flex-wrap gap-1",activeIndex === index && "ring-2 ring-muted-foreground")}><span>{item.label}</span><buttonaria-label={`Remove ${item.label} option`}aria-roledescription="button to remove option"type="button"onMouseDown={mousePreventDefault}onClick={() => onValueChange(item.value)}><span className="sr-only">Remove {item.label} option</span><RemoveIcon className="h-4 w-4 hover:stroke-destructive" /></button></Badge>))}{children}</div>);
});MultiSelectorTrigger.displayName = "MultiSelectorTrigger";const MultiSelectorInput = forwardRef<React.ElementRef<typeof CommandPrimitive.Input>,React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => {const { setOpen, inputValue, setInputValue, activeIndex, setActiveIndex } =useMultiSelect();return (<CommandPrimitive.Input{...props}ref={ref}value={inputValue}onValueChange={activeIndex === -1 ? setInputValue : undefined}onBlur={() => setOpen(false)}onFocus={() => setOpen(true)}onClick={() => setActiveIndex(-1)}className={cn("bg-transparent outline-none placeholder:text-muted-foreground flex-1",className,activeIndex !== -1 && "caret-transparent")}/>);
});MultiSelectorInput.displayName = "MultiSelectorInput";const MultiSelectorContent = forwardRef<HTMLDivElement,React.HTMLAttributes<HTMLDivElement>
>(({ children }, ref) => {const { open } = useMultiSelect();return (<div ref={ref} className="relative">{open && children}</div>);
});MultiSelectorContent.displayName = "MultiSelectorContent";const MultiSelectorList = forwardRef<React.ElementRef<typeof CommandPrimitive.List>,React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
>(({ className, children }, ref) => {return (<CommandListref={ref}className={cn("p-2 flex flex-col gap-2 rounded-md scrollbar-thin scrollbar-track-transparent transition-colors scrollbar-thumb-muted-foreground dark:scrollbar-thumb-muted scrollbar-thumb-rounded-lg w-full absolute bg-background shadow-md z-10 border border-muted top-0",className)}>{children}<CommandEmpty><span className="text-muted-foreground">No results found</span></CommandEmpty></CommandList>);
});MultiSelectorList.displayName = "MultiSelectorList";const MultiSelectorItem = forwardRef<React.ElementRef<typeof CommandPrimitive.Item>,{ value: string } & React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, value, children, ...props }, ref) => {const { value: Options, onValueChange, setInputValue } = useMultiSelect();const mousePreventDefault = useCallback((e: React.MouseEvent) => {e.preventDefault();e.stopPropagation();}, []);const isIncluded = Options.includes(value);return (<CommandItemref={ref}{...props}onSelect={() => {onValueChange(value);setInputValue("");}}className={cn("rounded-md cursor-pointer px-4 py-1.5 transition-colors flex justify-between ",className,isIncluded && "opacity-50 cursor-default",props.disabled && "opacity-50 cursor-not-allowed")}onMouseDown={mousePreventDefault}>{children}{isIncluded && <Check className="h-4 w-4" />}</CommandItem>);
});MultiSelectorItem.displayName = "MultiSelectorItem";export {MultiSelector,MultiSelectorTrigger,MultiSelectorInput,MultiSelectorContent,MultiSelectorList,MultiSelectorItem,
};

这个组件库实现了一个多选下拉框，包含选择、显示和过滤选项等功能。组件利用了 React 的上下文、钩子和基于 Radix UI 和 CMDK 的组合控件。

以下是对每个主要部分的详细分析：

多选组件的核心上下文与状态

1. 上下文与钩子

const MultiSelectContext = createContext<MultiSelectContextProps | null>(null);const useMultiSelect = () => {const context = useContext(MultiSelectContext);if (!context) {throw new Error("useMultiSelect must be used within MultiSelectProvider");}return context;
};

MultiSelectContext 是一个 React 上下文，用于共享多选组件的状态。useMultiSelect 是一个自定义钩子，用于方便地访问这个上下文。

2. MultiSelector 组件

const MultiSelector = ({values: value,onValuesChange: onValueChange,loop = false,className,children,dir,options,...props
}: MultiSelectorProps) => {const [inputValue, setInputValue] = useState("");const [open, setOpen] = useState<boolean>(false);const [activeIndex, setActiveIndex] = useState<number>(-1);const onValueChangeHandler = useCallback((val: string) => {if (value.includes(val)) {onValueChange(value.filter((item) => item !== val));} else {onValueChange([...value, val]);}},[value]);const handleKeyDown = useCallback((e: KeyboardEvent<HTMLDivElement>) => {// handle keyboard navigation and actions},[value, inputValue, activeIndex, loop]);return (<MultiSelectContext.Providervalue={{value,onValueChange: onValueChangeHandler,open,setOpen,inputValue,setInputValue,activeIndex,setActiveIndex,options,}}><CommandonKeyDown={handleKeyDown}className={cn("overflow-visible bg-transparent flex flex-col",className)}dir={dir}{...props}>{children}</Command></MultiSelectContext.Provider>);
};

MultiSelector 是整个多选组件的核心，负责管理状态并提供上下文。它使用 useState 管理输入值、打开状态和活动索引。通过 useCallback 创建 onValueChangeHandler 和 handleKeyDown 函数，用于处理选项的选择和键盘事件。

组件子部分

1. MultiSelectorTrigger

const MultiSelectorTrigger = forwardRef<HTMLDivElement,React.HTMLAttributes<HTMLDivElement>
>(({ className, children, ...props }, ref) => {const { value, onValueChange, activeIndex, open, options } = useMultiSelect();const mousePreventDefault = useCallback((e: React.MouseEvent) => {e.preventDefault();e.stopPropagation();}, []);const valueOptions = options.filter(option => value.includes(option.value))return (<divref={ref}className={cn("min-h-9 bg-accent text-sm flex items-center flex-wrap gap-1 px-3 rounded-lg mb-2",open ? "ring-ring ring-1 ring-offset-1 bg-background" : "",className)}{...props}>{valueOptions.map((item, index) => (<Badgekey={item.value}color={item.color}className={cn("flex flex-wrap gap-1",activeIndex === index && "ring-2 ring-muted-foreground")}><span>{item.label}</span><buttonaria-label={`Remove ${item.label} option`}aria-roledescription="button to remove option"type="button"onMouseDown={mousePreventDefault}onClick={() => onValueChange(item.value)}><span className="sr-only">Remove {item.label} option</span><RemoveIcon className="h-4 w-4 hover:stroke-destructive" /></button></Badge>))}{children}</div>);
});MultiSelectorTrigger.displayName = "MultiSelectorTrigger";

MultiSelectorTrigger 是一个用于显示已选择选项的组件。它使用 useMultiSelect 钩子从上下文获取状态，并渲染已选项的 Badge 组件。每个 Badge 组件包含一个按钮，用于移除该选项。

2. MultiSelectorInput

const MultiSelectorInput = forwardRef<React.ElementRef<typeof CommandPrimitive.Input>,React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => {const { setOpen, inputValue, setInputValue, activeIndex, setActiveIndex } =useMultiSelect();return (<CommandPrimitive.Input{...props}ref={ref}value={inputValue}onValueChange={activeIndex === -1 ? setInputValue : undefined}onBlur={() => setOpen(false)}onFocus={() => setOpen(true)}onClick={() => setActiveIndex(-1)}className={cn("bg-transparent outline-none placeholder:text-muted-foreground flex-1",className,activeIndex !== -1 && "caret-transparent")}/>);
});MultiSelectorInput.displayName = "MultiSelectorInput";

MultiSelectorInput 是一个输入组件，用于处理用户输入。它使用 useMultiSelect 钩子从上下文获取状态，并根据输入值更新上下文中的 inputValue。它还处理输入框的焦点和点击事件。

3. MultiSelectorContent

const MultiSelectorContent = forwardRef<HTMLDivElement,React.HTMLAttributes<HTMLDivElement>
>(({ children }, ref) => {const { open } = useMultiSelect();return (<div ref={ref} className="relative">{open && children}</div>);
});MultiSelectorContent.displayName = "MultiSelectorContent";

MultiSelectorContent 是一个包装组件，用于渲染多选内容。当上下文中的 open 状态为 true 时，显示其子组件。

4. MultiSelectorList

const MultiSelectorList = forwardRef<React.ElementRef<typeof CommandPrimitive.List>,React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
>(({ className, children }, ref) => {return (<CommandListref={ref}className={cn("p-2 flex flex-col gap-2 rounded-md scrollbar-thin scrollbar-track-transparent transition-colors scrollbar-thumb-muted-foreground dark:scrollbar-thumb-muted scrollbar-thumb-rounded-lg w-full absolute bg-background shadow-md z-10 border border-muted top-0",className)}>{children}<CommandEmpty><span className="text-muted-foreground">No results found</span></CommandEmpty></CommandList>);
});MultiSelectorList.displayName = "MultiSelectorList";

MultiSelectorList 是一个列表组件，用于渲染所有可选项。它使用 CommandList 组件，并在子组件中包含一个 CommandEmpty 组件，当没有结果时显示提示。

5. MultiSelectorItem

const MultiSelectorItem = forwardRef<React.ElementRef<typeof CommandPrimitive.Item>,{ value: string } & React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, value, children, ...props }, ref) => {const { value: Options, onValueChange, setInputValue } = useMultiSelect();const mousePreventDefault = useCallback((e: React.MouseEvent) => {e.preventDefault();e.stopPropagation();}, []);const isIncluded = Options.includes(value);return (<CommandItemref={ref}{...props}onSelect={() => {onValueChange(value);setInputValue("");}}className={cn("rounded-md cursor-pointer px-4 py-1.5 transition-colors flex justify-between ",className,isIncluded && "opacity-50 cursor-default",props.disabled && "opacity-50 cursor-not-allowed")}onMouseDown={mousePreventDefault}>{children}{isIncluded && <Check className="h-4 w-4" />}</CommandItem>);
});MultiSelectorItem.displayName = "MultiSelectorItem";

MultiSelectorItem 是一个可选项组件。它使用 useMultiSelect 钩子从上下文获取状态，并在选中时调用 onValueChange 更新上下文中的选项状态。它还会在已选项时显示一个 Check 图标。

总结

这个多选组件库通过上下文和钩子共享状态，并将组件划分为多个小组件，每个小组件负责处理不同的功能和渲染部分。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/49167.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Hadoop、HDFS、MapReduce 大数据解决方案

Hadoop、HDFS、MapReduce 大数据解决方案

本心、输入输出、结果 文章目录 Hadoop、HDFS、MapReduce 大数据解决方案前言HadoopHadoop 主要组件的Web UI端口和一些基本信息MapReduceMapReduce的核心思想MapReduce的工作流程MapReduce的优缺点Hadoop、HDFS、MapReduce 大数据解决方案 编辑 | 简简单单 Online zuozuo 地址…
阅读更多...
广义线性模型（1）广义线性模型详解

广义线性模型（1）广义线性模型详解

一 GLM概述 广义线性模型&#xff08;Generalized Linear Models&#xff0c;GLM&#xff09;由 Nelder 和 Wedderburn 于 1972年提出和发表 &#xff0c;旨在解决普通线性回归模型无法处理因变量离散&#xff0c;并发展能够解决非正态因变量的回归建模任务的建模方法。 在广…
阅读更多...
数据结构：二叉搜索树（简单C++代码实现）

数据结构：二叉搜索树（简单C++代码实现）

目录 前言 1. 二叉搜索树的概念 2. 二叉搜索树的实现 2.1 二叉树的结构 2.2 二叉树查找 2.3 二叉树的插入和中序遍历 2.4 二叉树的删除 3. 二叉搜索树的应用 3.1 KV模型实现 3.2 应用 4. 二叉搜索树分析 总结 前言 本文将深入探讨二叉搜索树这一重要的数据结构。二…
阅读更多...
postman使用旧版本报错version mismatch detected

postman使用旧版本报错version mismatch detected

卸载 postman又重装了别的版本&#xff0c;打开后遇到了这个报错&#xff0c;解决办法如下&#xff1a; 删除缓存文件 C:\Users\Administrator\AppData\Roaming\Postman 下载PostMan 提取码&#xff1a;6k51
阅读更多...
【PyTorch】单目标检测项目

【PyTorch】单目标检测项目

对象检测是在图像中查找特定对象位置的过程,用于处理单对象或多对象检测问题。单对象检测在给定图像中仅定位一个对象。对象的位置可以通过边界框定义。单对象检测使用四个数字预测边界框。对于正方形物体&#xff0c;可以固定宽度和高度&#xff0c;并简化问题以仅预测两个数字…
阅读更多...
Unity：PC包直接查看Log日志

Unity：PC包直接查看Log日志

PC端会输出Log日志&#xff0c;位置在&#xff1a; C:\Users\用户名\AppData\LocalLow\公司名\项目名 在这里可以找到类似的文件&#xff1a; 打开便可以看到打印。
阅读更多...
解决 elementUI 组件在 WebStorm 中显示为未知标签的问题

解决 elementUI 组件在 WebStorm 中显示为未知标签的问题

解决 elementUI 组件在 WebStorm 中显示为未知标签的问题 一、问题 自从转到 ts 之后&#xff0c;编辑器就一直提示用到的 elementUI 标签未知&#xff0c;一直显示一溜黄色警示&#xff0c;很烦&#xff1a; 二、解决 把它改成大写就可以了。 如下&#xff1a; 把整个项目…
阅读更多...
springboot实战（十二）之通过注解的方式记录接口出入参log入库

springboot实战（十二）之通过注解的方式记录接口出入参log入库

前言 生产过程中&#xff0c;为了更好的辅助线上问题排查避免不了对接口出入参进行日志输出的时候&#xff0c;并且为了分析接口数据效果需要将每次请求接口的出入参进行落库方便后续的数据分析&#xff0c;这时总不能每个接口入参之后、出参之前都打印一遍日志吧&#xff1f;如…
阅读更多...
51单片机嵌入式开发：16、STC89C52RC 嵌入式之 步进电机28BYJ48、四拍八拍操作

51单片机嵌入式开发：16、STC89C52RC 嵌入式之 步进电机28BYJ48、四拍八拍操作

STC89C52RC 嵌入式之 步进电机28BYJ48、四拍八拍操作 STC89C52RC 之 步进电机28BYJ48操作1 概述1.1 步进电机概述1.2 28BYJ48概述 2 步进电机工作原理2.1 基本原理2.2 28BYJ48工作原理2.3 28BYJ48控制原理 3 电路及软件代码实现4 步进电机市场价值 STC89C52RC 之 步进电机28BYJ…
阅读更多...
【flink】之如何消费kafka数据？

【flink】之如何消费kafka数据？

为了编写一个使用Apache Flink来读取Apache Kafka消息的示例&#xff0c;我们需要确保我们的环境已经安装了Flink和Kafka&#xff0c;并且它们都能正常运行。此外&#xff0c;我们还需要在项目中引入相应的依赖库。以下是一个详细的步骤指南&#xff0c;包括依赖添加、代码编写…
阅读更多...
navicat 导入 sql 遇到的问题

navicat 导入 sql 遇到的问题

错误1 [Err] 1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near &#xfeff;SET FOREIGN_KEY_CHECKS 0;DROP TABLE IF EXISTS tmp_tables; CREATE TABLE at line 1 [Err] &…
阅读更多...
TypeScript-内置应用程序类型-Recode

TypeScript-内置应用程序类型-Recode

文章目录 前言Record<string, any>Record 的语法使用示例在你的代码中的应用示例代码 前言 学习TypeScript 内置应用程序类型 在 TypeScript 中&#xff0c;Record 是一个实用类型&#xff0c;它允许你基于一个键的联合类型和一个值的类型&#xff0c;来创建一个新的对象…
阅读更多...
使用约束布局该如何设置哪个视图（UILabel）的内容优先被压缩？

使用约束布局该如何设置哪个视图（UILabel）的内容优先被压缩？

引言 在实际项目开发中&#xff0c;约束布局给我们带来了很大的便利&#xff0c;可以帮助我们创建灵活且响应迅速的用户界面。通常情况下&#xff0c;它都能很好地工作&#xff0c;但在一些包含许多UILabel的场景中&#xff0c;比如会话列表的UI&#xff0c;哪个视图会被优先压…
阅读更多...
《0基础》学习Python——第二十讲__网络爬虫/＜3＞

《0基础》学习Python——第二十讲__网络爬虫/＜3＞

一、用post请求爬取网页 同样与上一节课的get强求的内容差不多&#xff0c;即将requests.get(url,headershead)代码更换成requests.post(url,headershead),其余的即打印获取的内容&#xff0c;如果content-typejson类型的&#xff0c;打印上述代码的请求&#xff0c;则用一个命…
阅读更多...
二叉树---二叉搜索树的最小绝对差

二叉树---二叉搜索树的最小绝对差

题目&#xff1a; 给你一个二叉搜索树的根节点 root &#xff0c;返回 树中任意两不同节点值之间的最小差值 。 差值是一个正数&#xff0c;其数值等于两值之差的绝对值。 思路&#xff1a;中序遍历二叉搜索树的顺序是递增序列&#xff0c;将该序列中的相邻值两两比较找到最…
阅读更多...
约定(模拟赛2 T3)

约定(模拟赛2 T3)

题目描述 小A在你的帮助下成功打开了山洞中的机关&#xff0c;虽然他并没有找到五维空间&#xff0c;但他在山洞中发现了无尽的宝藏&#xff0c;这个消息很快就传了出去。人们为了争夺洞中的宝藏相互陷害&#xff0c;甚至引发了战争&#xff0c;世界都快要毁灭了。小A非常地难…
阅读更多...
2024论文精读：利用大语言模型（GPT）增强上下文学习去做关系抽取任务

2024论文精读：利用大语言模型（GPT）增强上下文学习去做关系抽取任务

文章目录 1. 前置知识2. 文章通过什么来引出他要解决的问题3. 作者通过什么提出RE任务存在上面所提出的那几个问题3.1 问题一&#xff1a;ICL检索到的**示范**中实体个关系的相关性很低。3.2 问题二&#xff1a;示范中缺乏解释输入-标签映射导致ICL效果不佳。 4. 作者为了解决上…
阅读更多...
【Git】（基础篇七）—— IntelliJIDEA集成Git

【Git】（基础篇七）—— IntelliJIDEA集成Git

InteliJ IDEA集成Git 现在有很多的集成工具帮助我们写代码&#xff0c;使用这些工具可以帮助我们加速写代码&#xff0c;很多工具也可以集成git&#xff0c;使用图形工具管理git&#xff0c;相信了解了底层运行逻辑的你能够很快地上手使用这些工具&#xff0c;本文以InteliJ I…
阅读更多...
7 Vue3

7 Vue3

相比 Vue2 1. 优点 vue3支持vue2的大多数特性&#xff0c;实现对vue2的兼容vue3对比vue2具有明显的性能提升 打包大小减少41%初次渲染快55%&#xff0c;更新快133%内存使用减少54% 更好的支持TypeScript使用Proxy代替defineProperty实现响应式数据 2. 性能提升的原因 静态标…
阅读更多...
jmeter-beanshell学习11-从文件获取指定数据

jmeter-beanshell学习11-从文件获取指定数据

参数文件里的参数可能过段时间就不能用了&#xff0c;需要用新的参数。如果有多个交易&#xff0c;读不同的参数文件&#xff0c;但是数据还是一套&#xff0c;就要改多个参数文件。或者只想执行参数文件的某一行数据&#xff0c;又不想调整参数文件顺序。 第一个问题目前想到…
阅读更多...
最新文章

Copyright @ 2022~2023