React--》掌握styled-components重塑React样式管理

news2024/11/20 13:26:30

想象一下，如果你的React组件不仅能自描述其逻辑，还能直接声明自己的样式，这种“所见即所得”的编程体验是不是让人心动不已？styled-components正是这样一把钥匙，它彻底颠覆了我们对React样式管理的传统认知，让样式与组件的结合变得如此自然与和谐。

目录

初识styled-components

styled-components基础使用

props传值

样式扩展(继承)

附加属性(道具)

伪元素(选择器)和嵌套

动画操作

设置公共样式

设置全局样式

styled-components高级操作

设置主题

as多态道具

初识styled-components

styled-components：是针对react中一个前端广泛使用的css-in-js样式库，它利用了ES里面最新的语法：模板字符串，通过模板字符串就把css和js打通，样式与组件直接结合，为react开发者提供了一种全新的、灵活的方式来处理样式问题，其官网文档：地址 和github地址：地址，也可以查阅具体内容，官方文档如下所示：

使用styled-components理由：要知道我们平常写的react语法无非就两种情况：jsx或tsx。jsx语法相当于对js原来的语法进行一个扩展，它允许你在js语法里面通过函数的返回值里面嵌入html模板，这样就相当于jsx语法把html和js两种进行打通了，可以让html模板化、组件化、可编程等，但在原生的react里面，jsx或tsx语法对样式的解决并不是很完美，如果在react里面进行书写样式的话，除内联样式外写css代码还是比较割裂的，需要单独再抽离一个css文件出来再进行一个引入的操作，等于react它就没有把css和js进行打通，而且后续写项目的话也是要来回在jsx和css文件中进行一个来回的切换，说实话还是比较繁琐的。如果在react基础上再加上styled-components就相当于js可以通吃html和css了。

vue能使用styled-components嘛？：vue已经将js和css放在一个文件中并且通过scoped进行了一个样式隔离，vue自身也已经具备样式管理且相当强大和易于使用，因此并不需要额外的css-in-js库来管理样式，如果是写vue的朋友转react开发，一时间有点难以接收说实话，毕竟react语法就摆在这没办法！正应正了那句老话：“由简入奢易，由奢入俭难”啊。

styled-components的优势有哪些？：在react项目中通过将样式与组件直接结合，为react开发者提供了一种全新的、灵活的方式来处理样式问题，以下是styled-components的一些主要优势：

1）样式局部化：生成的样式是局部化的，即样式仅应用于当前组件，避免了全局污染和样式冲突，可以确保不同组件之间的样式互不干扰。

2）动态样式和主题化：允许开发者根据组件的props或全局主题来动态调整样式，而无需手动管理多个类名。

3）易于删除和维护：样式与组件直接关联，所以很容易知道哪些样式是多余的，从而轻松删除，此外由于样式和组件的紧密耦合，维护也变得更为简单，无需在不同的文件中查找影响组件的样式。

4）避免类名冲突：每个样式组件生成唯一的类名(通常是通过哈希算法生成的)，彻底解决了类名冲突的问题，即使在不同的子应用或组件库中定义了相同的类名，也不会相互干扰。

5）强大的嵌套和组合能力：支持类似于预处理器(如 SASS/SCSS)样式的嵌套和组合，可以使用css选择器、伪元素、媒体查询等特性来编写复杂的样式，而无需担心样式的作用域问题。

6）无缝集成和兼容性：完美支持所有css特性，包括媒体查询、伪选择器、动画等。

7）支持单元测试：通过使用像jest-styled-components这样的库，可以对样式组件进行单元测试，以确保样式的正确性和可维护性。

8）提升开发体验：对于习惯在vue框架中工作的开发者来说，styled-components减少了在 js和css文件之间切换的需要，从而提高了开发效率。

接下来我们通过代码进行一个演示，终端执行如下命令对styled-components进行一个安装：

npm install styled-components

我们在react组件中使用styled加上一个html标签即可实现html+css的样式，演示代码如下。

注意：作为样式组件，组件设置的名称必须符合规范，然后首字母必须大写！！！

import styled from "styled-components"

const App = () => {
    return (
        <>
            <MyButton>hello world</MyButton>
        </>
    )
}
export default App
// 组件样式(定义在渲染方法外面)
const MyButton = styled.button`
    width: 100px;
    height: 30px;
    background-color: #008c8c;
    color: white;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    &:hover {
        background-color: #005252;
    }
`

页面的呈现的效果如下所示，可以看到这是我们想要的结果：

注意：从上面代码可以看出，我是将样式组件(元素和样式规则的组合)定义在渲染方法App之外的，因为渲染组件每次数据发生变化重新渲染时都会重新创建，在渲染方法之外定义样式组件将避免阻碍缓存从而降低渲染速度！！！

styled-components基础使用

上面我们演示了styled-components的一个简单使用，可以看出我们没有定义html标签的button按钮而是被styled-components连同样式一起定义了。可见其删除了组件和样式之间的映射，这也就意味着我们实际上在创建一个普通的react组件且组件也可以附加自定义样式：

import styled from "styled-components"

const App = () => {
    return (
        <>
            <AppContainer>
                <Title>hello styled-components</Title>
            </AppContainer>
        </>
    )
}
export default App
// 组件样式
const AppContainer = styled.div`
    width: 100%;
    height: 100vh;
    background-color: #ccc;
`
const Title = styled.h1`
    width: 100%;
    height: 100%;
    fs-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff0000;
`

props传值

styled-components也支持通过props传值来实现动态改变样式，css样式中通过类型jq的方式来实现条件判断的方式，这里我们做一个简单的代码演示：

import styled from "styled-components"

const App = () => {
    return (
        <>
            <MyDiv>正常按钮</MyDiv>
            <MyDiv primary>primary</MyDiv>
        </>
    )
}
export default App
// 组件样式
const MyDiv = styled.div<{ primary?: boolean }>`
    width: 100px;
    height: 50px;
    background-color: ${props => props.primary ? "red" : "blue"};
    color: ${props => props.primary ? "white" : "black"};
    padding: 10px;
    font-size: 16px;
    border-radius: 10px;
`

当然props传值也可以写成箭头函数的方式进行，这里通过一段示例代码演示：

const LabelText = styled.span`
  ${(props) => {
    switch (props.$mode) {
      case "dark":
        return css`
          background-color: black;
          color: white;
          ${Input}:checked + && {
            color: blue;
          }
        `;
      default:
        return css`
          background-color: white;
          color: black;
          ${Input}:checked + && {
            color: red;
          }
        `;
    }
  }}
`

样式扩展(继承)

如果经常使用一个组件，现在有一个需求，需要对经常使用的组件进行一个样式的改变，但是大部分的样式是一致的，正常我们还是需要再写一遍样式或通过逗号分隔两个类名的方式来实现，但是在styled-components可以使用styled()构造函数实现样式继承，示例代码如下：

import styled from "styled-components"

const App = () => {
    return (
        <>
            <MyDiv>基础样式</MyDiv>
            <MyDivInherit>继承样式</MyDivInherit>
        </>
    )
}
export default App
// 组件样式
const MyDiv = styled.div`
    width: 100px;
    height: 50px;
    background-color: red;
    color: white;
    padding: 10px;
    font-size: 16px;
    border-radius: 10px;
`
const MyDivInherit = styled(MyDiv)`
    background-color: blue; // 修改背景颜色
`

当然样式继承同样可以用于自定义组件，如下我们记住MyDiv的样式，然后通过js反转标签内容

import styled from "styled-components"

const App = () => {
    return (
        <>
            <MyDiv>基础样式</MyDiv>
            <ReversedButton>基础样式</ReversedButton>
        </>
    )
}
export default App
// 组件样式
const MyDiv = styled.div`
    width: 100px;
    color: #BF4F74;
    font-size: 1em;
    border: 2px solid #BF4F74;
    border-radius: 3px;
    text-align: center;
    padding: 10px;
`
const ReversedButton = props => <MyDiv {...props} children={props.children.split('').reverse()} />

附加属性(道具)

像一个标签可能有许多不同的属性，而不同的属性又呈现不同的效果，像input默认情况下就是text输入框，如果修改成checkbox属性则会变成勾选框，所以这里我们可以通过借助attrs构造函数实现添加不同的属性或者接收属性的数据，这里我们通过代码进行简单的演示：

import styled from "styled-components";

const App = () => {
    return (
        <>
            <Input placeholder="请输入" />
            <br />
            <Input placeholder="请输入" $size="2em" />
        </>
    )
}

export default App

const Input = styled.input.attrs<{ $size?: string }>(props => ({
    type: "text",
    $size: props.$size || "1em"
}))`
    color: #008c8c;
    font-size: 1em;
    border: 2px solid #BF4F74;
    border-radius: 3px;
    margin: ${props => props.$size};
    padding: ${props => props.$size};
`

 

这里我们也可以借助上文介绍的样式扩展(继承)搭配附加属性进行操作，这里我们可以制作一个登录框的账户密码进行一个简单的演示：

import styled from "styled-components";

const App = () => {
    return (
        <>
            <Input placeholder="请输入" $size="2em" />
            <br />
            <PasswordInput placeholder="请输入" $size="2em" />
        </>
    )
}

export default App
// 样式组件
const Input = styled.input.attrs<{ $size?: string }>(props => ({
    type: "text",
    $size: props.$size || "1em"
}))`
    border: 2px solid #BF4F74;
    margin: ${props => props.$size};
    padding: ${props => props.$size};
`
// 继承输入框设置成密码框
const PasswordInput = styled(Input).attrs({
    type: "password"
})`
    border-color: #009688;
`

伪元素(选择器)和嵌套

因为styled-components支持嵌套样式类似scss语法，所以其也是支持一些高级的选择器模式的，这里对这些高级选择器模式做一个简单的概述：

&：单个&符号是指组件的所有实例，常用于广泛的内容覆盖，如下是常用的&的操作，当然这里也通过代码进行一个简单演示：

1）&: ：&后面加一个冒号就是我们常用的对伪类选择器进行操作

2）& ~ &：用于选择紧跟在另一个具有相同选择器 “之后” 的同级元素

3）& + &：选择所有紧跟在当前组件之后的同级且相邻的相同组件，并为它们应用样式

4）&.something：类选择器，单独为一个或多个相同的类名设置单独样式

import styled from "styled-components"

const App = () => {
    return (
        <>
            <MyDiv className="change">基础样式</MyDiv>
            <MyDiv>基础样式</MyDiv>
            <MyDiv>基础样式</MyDiv>
            <MyDiv>基础样式</MyDiv>
            <MyDiv>基础样式</MyDiv>
        </>
    )
}
export default App
// 组件样式
const MyDiv = styled.div`
    width: 100px;
    height: 40px;
    background-color: #BF4F74;
    font-size: 1em;
    text-align: center;
    line-height: 40px;
    color: #fff;
    &:hover { // 伪类选择器
        background-color: #008c8c;
    }
    & ~ & { // 同级选择器
        margin-bottom: 10px;
    }
    & + & { // 相邻选择器
        background-color: orange;
    }
    &.change { // 类选择器
        color: #008c8c;
    }
`

&&：双&符号引用组件的一个实例，如果您正在进行条件样式覆盖并且不希望样式应用于特定组件的所有实例，这很有用：

import React from "react";
import styled, { css } from "styled-components";

interface LabelTextProps {
  $mode?: "dark" | "light";
}

const App = () => {
    return (
        <>
            <React.Fragment>
                <Label>
                    <Input defaultChecked />
                    <LabelText>Foo</LabelText>
                </Label>
                <Label>
                    <Input />
                    <LabelText $mode="dark">Foo</LabelText>
                </Label>
                <Label>
                    <Input defaultChecked />
                    <LabelText>Foo</LabelText>
                </Label>
                <Label>
                    <Input defaultChecked />
                    <LabelText $mode="dark">Foo</LabelText>
                </Label>
            </React.Fragment>
        </>
    )
}

export default App

const Input = styled.input.attrs({ type: "checkbox" })``;

const Label = styled.label`
  align-items: center;
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
`

const LabelText = styled.span<LabelTextProps>`
  ${(props) => {
    switch (props.$mode) {
      case "dark":
        return css`
          background-color: black;
          color: white;
          ${Input}:checked + & {
            color: blue;
          }
        `;
      case "light":
        return css`
          background-color: white;
          color: black;
          ${Input}:checked + & {
            color: red;
          }
        `;
      default:
        return css`
          background-color: white;
          color: black;
          ${Input}:checked + & {
            color: red;
          }
        `;
    }
  }}
`;

当然双&符号有一种称为“优先级提升”的特殊行为；如果您正在处理可能存在冲突样式的混合样式组件和普通CSS环境，这可能很有用：

const Thing = styled.div`
   && {
     color: blue;
   }
 `
 const GlobalStyle = createGlobalStyle`
   div${Thing} {
     color: red;
   }
 `
 render(
   <React.Fragment>
     <GlobalStyle />
     <Thing>
       I'm blue, da ba dee da ba daa
     </Thing>
   </React.Fragment>
 )

动画操作

因为带有@keyframes的css动画可能不仅仅只限于单个组件，但是你只想在单个组件中使用从而避免全局样式名称的冲突，styled-components也给我们提供了keyframes助手从而生成一个整个应用程序中使用的唯一实例，这里通过一段代码进行演示操作：

这里我们将控制动画的函数抽离出一个工具函数，然后统一暴露出去，然后在组件中进行引入使用我们设置的动画函数：

设置公共样式

学习了styled-components之后肯定要掌握如何设置公共样式呢？这里我们可以使用styled-components提供的css函数来生成一个公共样式，这里我单独将公共样式抽离出来，后期如果要使用公共样式直接引入即可：

设置全局样式

学习了styled-components之后肯定要掌握如何设置全局样式呢？ 这里styled-components也是提供了全局组件的API函数，注意这个函数要求styled-components版本必须在v4以上，如果是低版本的话就不能使用了。

要知道浏览器是存在默认样式的，这里我们可以通过全局样式对浏览器的默认样式进行一个清除：

import { createGlobalStyle } from "styled-components";

// 设置全局样式组件
const GlobalStyle = createGlobalStyle`
    body {
        margin: 0;
        padding: 0;
    }
`

可以看到我们的浏览器存在的默认内外边距被清除掉了：

styled-components高级操作

对于styled-components还有许多高阶的操作的内容，这里就挑几个实用的方法进行一个简单的讲解吧，如果想了解具体的内容，可以参考官方文档的内容即可，如下：

设置主题

styled-components也是提供了设置主题的操作，这里我们可以通过导出的ThemeProvider包装器组件实现主题内容的支持，并且主题还可以嵌套多层，这里通过一段代码进行示例演示：

import styled, { ThemeProvider } from "styled-components";

const App = () => {
    return (
        <>
            <ThemeProvider theme={theme}>
                <Button>默认主题</Button>
                <ThemeProvider theme={changeTheme}>
                    <Button>主题改变</Button>
                </ThemeProvider>
            </ThemeProvider>
        </>
    )
}

export default App
// 样式组件
const theme = {
    defaultColor: "#008c8c",
    borderColor: "#f0f00f",
}
const changeTheme = {
    defaultColor: "#ff000f",
    borderColor: "#00ff00",
}

const Button = styled.button`
    color: ${(props) => props.theme.defaultColor};
    border: 1px solid ${(props) => props.theme.borderColor};
    font-size: 1.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
`

如果想在没有样式组件的情况下获取主题，可以采用下面几种方式：

withTheme：在样式组件之外（例如在大型组件内部）使用当前主题

// App.tsx组件
import InnerComponent from "./components/InnerComponent"
const theme = {
    color: "red",
    background: "#008c8c",
    border: "1px solid orange",
}

const App = () => {
    return (
        <>
            <InnerComponent theme={theme}></InnerComponent>
        </>
    )
}

export default App

// 注入主题组件
import styled, { withTheme } from 'styled-components'

interface ThemeProps {
    color: string;
    background: string;
    border?: string;
};

function InnerComponent({ theme }: { theme: ThemeProps }) {
    console.log('Current theme: ', theme);
    return (
        <StyledContent theme={theme}>Use withTheme API</StyledContent>
    )
}

export default withTheme(InnerComponent);

const StyledContent = styled.div<{ theme: ThemeProps }>`
    color: ${props => props.theme.color};
    background: ${props => props.theme.background};
    border: ${props => props.theme.border || 'none'};
`;

useContext与ThemeContext：访问样式组件之外的当前主题

import { useContext } from 'react';
import { ThemeContext } from 'styled-components';

function InnerComponent() {
    const themeContext = useContext(ThemeContext);
    console.log('themeContext: ', themeContext);
}

useTheme：访问样式组件之外的当前主题

import { useTheme } from 'styled-components';

function InnerReactComponent() {
    const theme = useTheme()
    console.log('theme: ', theme); // { color: '#333', background: '#fff', border: '1px solid #eee' }
}

as多态道具

如果想保留应用于组件的所有样式，但仅仅只是切换最终呈现的内容，无论是不同的超文本标记语言还是不同的自定义组件，可以使用 “as” 在运行时执行此操作：

import styled from "styled-components";
// 自定义组件
interface MyDivProps {
    onClick?: () => void;
    as?: React.ElementType;
}

const App = () => {
    return (
        <>
            <MyDiv as="button" onClick={() => alert('hello world')}>按钮</MyDiv>
        </>
    );
}

export default App;
// 样式组件
const MyDiv = styled.div<MyDivProps>`
    color: red;
`;

当然还有其他的用法，这里博主就不再赘述了，大家自行查阅官网吧！

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

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

相关文章

Python 中单例模式实现的几种方式

Python 中单例模式实现的几种方式

在设计模式中&#xff0c;单例模式是经常被提及和使用的一种模式。它保证一个类只有一个实例&#xff0c;并提供全局访问点。在Python中&#xff0c;有多种实现单例模式的方法。那么&#xff0c;如何选择合适的方法来实现单例模式呢&#xff1f; 单例模式在Python中的几种实现方…
阅读更多...
BGP思维导图

BGP思维导图

阅读更多...
软件设计师笔记-网络基础知识

软件设计师笔记-网络基础知识

计算机网络的发展 计算机网络&#xff08;计算机技术通信技术&#xff09;的发展是一个逐步演进的过程&#xff0c;从简单的具有通信功能的单机系统&#xff0c;到复杂的以局域网及因特网为支撑环境的分布式计算机系统&#xff0c;这一历程经历了多个关键阶段&#xff1a; #me…
阅读更多...
大模型是否潜在地进行多跳推理？

大模型是否潜在地进行多跳推理？

人工智能咨询培训老师叶梓 转载标明出处 以往的研究表明&#xff0c;基于Transformer的LLMs能够在参数中存储和检索事实信息&#xff0c;以完成简单提示&#xff0c;例如“Stevie Wonder的母亲是谁”。此外&#xff0c;当必要信息明确给出时&#xff0c;LLMs表现出了显著的上下…
阅读更多...
JS优化了4个自定义倒计时

JS优化了4个自定义倒计时

<!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><title>4个自定义倒计时</title><style>* {margin: 0;padding: 0;box-sizing: border-box;user-select: none;body {background: #0b1b2c;}}hea…
阅读更多...
（javaweb）maven--Java项目的构建工具

（javaweb）maven--Java项目的构建工具

目录 一.Maven概述 二.Idea导入maven项目 三.maven核心功能--依赖管理 四.依赖管理--依赖传递 五.依赖管理--依赖范围 六.依赖管理--生命周期 一.Maven概述 1.管理和构建Java项目的工具 2.Apache开源&#xff08;源代码开放&#xff09; 3. 4. Maven核心配置文件&#xff…
阅读更多...
解题 - 左旋字符串的三种解法（思路）

解题 - 左旋字符串的三种解法（思路）

文章目录 前言&#xff1a; 题干&#xff1a; 解题思路&#xff1a; 思路一&#xff1a; 思路二&#xff1a; 思路三&#xff1a; 小结 前言&#xff1a; 路漫漫其修远兮&#xff0c;吾将上下而求索。 题干&#xff1a; 解题思路&#xff1a; 创建变量k &#xff0c;用…
阅读更多...
【知识专栏丨python数分实战】关于电商零售客户细分数据分析及可视化

【知识专栏丨python数分实战】关于电商零售客户细分数据分析及可视化

今天这篇文章将给大家介绍关于电商零售客户细分数据分析及可视化的案例分析。 01 数据整理 导入数据 import pandas as pdimport numpy as npfrom pyecharts.charts import *import pyecharts.options as opts import warningswarnings.filterwarnings(ignore) 数据读取及预…
阅读更多...
shell的基础介绍

shell的基础介绍

文章目录 shell数组读取数组关联数组获取数组的长度 Shell运算符算术运算符关系运算符布尔运算符逻辑运算符字符串运算符文件测试运算符 Shell echo命令1.显示普通字符串2.显示转义字符3.显示变量4.显示换行5.显示不换行6.显示结果定向至文件7.原样输出字符串&#xff0c;不进行…
阅读更多...
Macbook上运行Windows系统工具Parallels Desktop19

Macbook上运行Windows系统工具Parallels Desktop19

亲爱的笔记本小能手们&#xff0c;你们是否也有这样的困扰&#xff1a;在Macbook上运行Windows系统&#xff0c;却发现虚拟机软件要么卡顿&#xff0c;要么操作复杂&#xff1f;别急&#xff0c;今天就给你们种草一款神器——Parallels Desktop 19。 Parallels Desktop最新绿色…
阅读更多...
无人机工程师技术高级证书详解

无人机工程师技术高级证书详解

随着无人机技术的飞速发展&#xff0c;其在航拍、农业、测绘、救援、物流等多个领域的应用日益广泛&#xff0c;对无人机工程师的专业技能与综合素质提出了更高要求。无人机工程师技术高级证书&#xff0c;作为对无人机领域高级工程师专业技能的权威认证&#xff0c;不仅是对个…
阅读更多...
QT网络编程

QT网络编程

Qt 给用户提供了网络编程的接口&#xff0c;包括TCP、UDP、HTTP三种协议的API以及各种类&#xff0c;可以了解一下。 而在 QT 中想要使用网络编程&#xff0c;必须在pro文件中添加 network 模块&#xff0c;否则无法包含网络编程所需的头文件。 UDP UDP是传输层的协议&#…
阅读更多...
Animate软件基础：在时间轴中标识动画

Animate软件基础：在时间轴中标识动画

FlashASer&#xff1a;AdobeAnimate2021软件零基础入门教程https://zhuanlan.zhihu.com/p/633230084 FlashASer&#xff1a;实用的各种Adobe Animate软件教程https://zhuanlan.zhihu.com/p/675680471 FlashASer&#xff1a;Animate教程及作品源文件https://zhuanlan.zhihu.co…
阅读更多...
实战项目导航

实战项目导航

目录 1.AI毕设生成器&#xff08;完善中&#xff09;2.计算机设计大赛案例3.c迷宫游戏4.python学生管理系统教学关注持续更新哦 1.AI毕设生成器&#xff08;完善中&#xff09; 文章链接 &#x1f680; 一键启航&#xff0c;编码从未如此简单&#xff01; 探索Python毕业设计生…
阅读更多...
vulnhub之serial

vulnhub之serial

这次我们来做这个靶场 项目地址https://download.vulnhub.com/serial/serial.zip 使用vm新建虚拟机 以下为注意事项 第一步&#xff0c;收集资产 扫描靶场ip netdiscover -i eth0 -r 192.168.177.0/24 抓个包 扫描目录 看到了cookie中有一个user Tzo0OiJVc2VyIjoyOntzOj…
阅读更多...
【Golang 面试 - 进阶题】每日 3 题（十八）

【Golang 面试 - 进阶题】每日 3 题（十八）

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/UWz06 &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏…
阅读更多...
算法：BFS 解决拓扑排序

算法：BFS 解决拓扑排序

目录 拓扑排序 题目一&#xff1a;课程表 题目二&#xff1a;课程表II 题目三&#xff1a;火星词典 拓扑排序 有向无环图(DAG图) 有向无环图也就是有几个点&#xff0c;每个点之间的线段都是有向的&#xff0c;且任意拿出来几个点&#xff0c;都是无环的&#xff0c;这里…
阅读更多...
Adaboost集成学习 | Matlab实现基于ELM-Adaboost极限学习机结合Adaboost集成学习故障诊断

Adaboost集成学习 | Matlab实现基于ELM-Adaboost极限学习机结合Adaboost集成学习故障诊断

目录 效果一览基本介绍程序设计参考资料效果一览 基本介绍 Adaboost集成学习 | Matlab实现基于ELM-Adaboost极限学习机结合Adaboost集成学习故障诊断 ELM（Extreme Learning Machine）和 Adaboost 都是机器学习领域中常见的算法。ELM 是一种单隐层前馈神经网络，具有快速训练、…
阅读更多...
使用 1panel面板 部署 springboot 和 vue

使用 1panel面板 部署 springboot 和 vue

代码仓库&#xff1a;还没弄 目录 网站介绍安装步骤1. 准备云服务器2. 准备域名&#xff08;可跳过&#xff09;3. 安装1panel面板4. 服务器开放端口5. 进入1panel面板6. 安装并启动软件&#xff08;服务器和面板开放端口&#xff09;7. 打包并上传项目7.1 打包 Java项目&#…
阅读更多...
算力共享中神经网络切片和算力分配策略

算力共享中神经网络切片和算力分配策略

目录 神经网络切片 按照算力的分布进行网络层数切片；就是算力越强，运算神经网络层数越多 神经网络切片和算力占比进行映射 算力分配策略 get_current_shard 神经网络切片 按照算力的分布进行网络层数切片；就是算力越强，运算神经网络层数越多 神经网络切片和算力占比进…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023