React高级Hook

useReducer 

useReducer 是 React 提供的一个 Hook,用于在函数组件中使用 reducer 函数来管理组件的 state。它类似于 Redux 中的 reducer,但仅用于组件内部的状态管理。useReducer 可以使复杂的状态逻辑更加清晰和可维护。

基本用法

useReducer 接收一个 reducer 函数和一个初始状态,并返回当前的 state 和一个 dispatch 函数。你可以通过 dispatch 函数来触发 reducer 函数,并传递一个 action 对象,reducer 根据 action 来更新 state。

参数
  1. reducer (Function): 一个纯函数,它接收当前的 state 和一个 action 对象,并返回一个新的 state。
  2. initialState (any): 组件的初始状态。
  3. [init (Function)] (可选): 一个可选的初始化函数,如果提供,它将在 reducer 调用之前被调用,以生成初始 state。它接收 initialState 并返回经过初始化的 state。
返回值
  1. state (any): 当前的状态。
  2. dispatch (Function): 一个 dispatch 函数,它接收一个 action 对象,并调用 reducer 函数来更新 state。

示例

下面是一个简单的计数器组件示例,展示了如何使用 useReducer

seReducer 是 React 提供的一个 Hook,用于在函数组件中使用 reducer 函数来管理组件的 state。它类似于 Redux 中的 reducer,但仅用于组件内部的状态管理。useReducer 可以使复杂的状态逻辑更加清晰和可维护。

基本用法

useReducer 接收一个 reducer 函数和一个初始状态,并返回当前的 state 和一个 dispatch 函数。你可以通过 dispatch 函数来触发 reducer 函数,并传递一个 action 对象,reducer 根据 action 来更新 state。

参数
  1. reducer (Function): 一个纯函数,它接收当前的 state 和一个 action 对象,并返回一个新的 state。
  2. initialState (any): 组件的初始状态。
  3. [init (Function)] (可选): 一个可选的初始化函数,如果提供,它将在 reducer 调用之前被调用,以生成初始 state。它接收 initialState 并返回经过初始化的 state。
返回值
  1. state (any): 当前的状态。
  2. dispatch (Function): 一个 dispatch 函数,它接收一个 action 对象,并调用 reducer 函数来更新 state。

示例

下面是一个简单的计数器组件示例,展示了如何使用 useReducer

import React, { useReducer } from 'react';  // 定义 action 类型  
const increment = () => ({ type: 'INCREMENT' });  
const decrement = () => ({ type: 'DECREMENT' });  
const reset = () => ({ type: 'RESET' });  // 定义 reducer 函数  
const counterReducer = (state, action) => {  switch (action.type) {  case 'INCREMENT':  return { count: state.count + 1 };  case 'DECREMENT':  return { count: state.count - 1 };  case 'RESET':  return { count: 0 };  default:  throw new Error();  }  
};  // 初始状态  
const initialState = { count: 0 };  function Counter() {  const [state, dispatch] = useReducer(counterReducer, initialState);  return (  <div>  <h1>Count: {state.count}</h1>  <button onClick={() => dispatch(increment())}>Increment</button>  <button onClick={() => dispatch(decrement())}>Decrement</button>  <button onClick={() => dispatch(reset())}>Reset</button>  </div>  );  
}  export default Counter;

详细说明

  1. 定义 action 类型:
    • incrementdecrementreset 是三个返回 action 对象的函数。每个 action 对象都有一个 type 属性,用于在 reducer 中识别 action。
  2. 定义 reducer 函数:
    • counterReducer 是一个纯函数,它接收当前的 state 和一个 action 对象,并返回一个新的 state
    • 根据 action.type,reducer 更新 state
  3. 初始状态:
    • initialState 是组件的初始状态,这里我们设置 count 为 0。
  4. 使用 useReducer:
    • 在 Counter 组件中,使用 useReducer Hook 传入 counterReducer 和 initialState
    • useReducer 返回当前的 state 和 dispatch 函数。
    • 通过 dispatch 函数调用不同的 action 来更新 state。

复杂示例

在实际应用中,useReducer 通常用于管理更复杂的状态。例如,假设我们有一个待办事项列表。

import React, { useReducer } from 'react';  // 定义 action 类型  
const addTodo = (text) => ({ type: 'ADD_TODO', text });  
const toggleTodo = (id) => ({ type: 'TOGGLE_TODO', id });  // 定义 reducer 函数  
const todoReducer = (state, action) => {  switch (action.type) {  case 'ADD_TODO':  return {  ...state,  todos: [...state.todos, { id: Date.now(), text: action.text, completed: false }],  };  case 'TOGGLE_TODO':  return {  ...state,  todos: state.todos.map((todo) =>  todo.id === action.id ? { ...todo, completed: !todo.completed } : todo  ),  };  default:  throw new Error();  }  
};  // 初始状态  
const initialState = { todos: [] };  function TodoApp() {  const [state, dispatch] = useReducer(todoReducer, initialState);  const handleAddTodo = (e) => {  const text = e.target.value.trim();  if (text) {  dispatch(addTodo(text));  e.target.value = '';  }  };  return (  <div>  <h1>Todo List</h1>  <input type="text" onKeyDown={(e) => e.key === 'Enter' ? handleAddTodo(e) : null} />  <button onClick={handleAddTodo}>Add Todo</button>  <ul>  {state.todos.map((todo) => (  <li key={todo.id} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>  <span onClick={() => dispatch(toggleTodo(todo.id))}>  {todo.text}  </span>  </li>  ))}  </ul>  </div>  );  
}  export default TodoApp;

 useMemo

useMemo是React提供的一个自定义Hook,它允许你在渲染过程中执行一些昂贵的计算,并且仅在依赖项发生变化时重新计算。这有助于优化性能,避免在每次渲染时都重新计算相同的数值或对象。

基本语法
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  • 第一个参数是一个返回需要记忆值的函数。
  • 第二个参数是一个依赖项数组,这个数组中的值会决定何时重新计算记忆值。
使用场景

useMemo适用于以下场景:

  • 当你有一个计算成本高昂的值,并且这个值在组件的某些渲染中可能保持不变时。
  • 当你想要避免在每次渲染时都重新执行昂贵的计算时。
注意事项
  • useMemo主要用于性能优化,不要滥用。
  • 只有当你确定计算是昂贵的且结果可以安全地在渲染之间共享时才应该使用。
  • useMemo不会阻止渲染,它只会优化计算过程。
使用案例

以下是一个使用useMemo的示例,假设我们有一个React组件,用于显示一个列表中所有项目的名称,并且这个列表可能非常大。我们可以使用useMemo来优化过滤操作,避免在每次渲染时都重新执行过滤逻辑。

import React, { useEffect, useState, useMemo } from 'react';  const LargeListComponent = () => {  const [list, setList] = useState([]);  const [filterText, setFilterText] = useState('');  // 模拟一个大型列表的加载  useEffect(() => {  // 这里通常是从API获取数据,但为了简化,我们使用一个静态数组  const largeList = Array.from({ length: 10000 }, (_, i) => ({  id: i + 1,  name: `Item ${i + 1}`,  }));  setList(largeList);  }, []);  // 使用useMemo来优化过滤操作  const filteredList = useMemo(() => {  return list.filter(item =>  item.name.toLowerCase().includes(filterText.toLowerCase())  );  }, [list, filterText]);  return (  <div>  <input  type="text"  value={filterText}  onChange={(e) => setFilterText(e.target.value)}  placeholder="Filter items..."  />  <ul>  {filteredList.map(item => (  <li key={item.id}>{item.name}</li>  ))}  </ul>  </div>  );  
};  export default LargeListComponent;

在这个例子中,useMemo接收一个过滤函数和一个依赖项数组[list, filterText]。每当listfilterText发生变化时,useMemo会重新执行过滤函数,并返回一个新的过滤后的列表。如果listfilterText都没有变化,那么useMemo会返回上一次计算的结果,从而避免不必要的过滤操作。

这个优化对于大型列表来说是非常有用的,因为它可以减少不必要的计算量,提高组件的渲染性能。

在React和Vue中,useMemo(React)和computed(Vue)都是用于计算派生状态(或称为“计算属性”)的工具,但它们在使用方式和底层实现上有所不同。

React中的useMemo

useMemo是React的一个Hook,它用于在函数组件中优化性能。当你有一个计算成本高昂的值,并且这个值在组件的某些渲染中可能保持不变时,useMemo可以帮助你避免不必要的计算。

useMemo接收一个创建函数和一个依赖项数组。当依赖项数组中的任何一个值发生变化时,创建函数会重新运行,并返回一个新的值。如果依赖项没有变化,那么useMemo会返回上一次计算的值,从而避免不必要的计算。

需要注意的是,useMemo主要用于性能优化,并且只有在你能确定计算是昂贵的且结果可以安全地在渲染之间共享时才应该使用。

Vue中的computed

在Vue中,computed属性用于声明式地计算派生状态。当你有一个基于组件响应式数据计算出来的值,并且你希望这个值在响应式数据变化时自动更新时,computed是非常有用的。

computed属性可以是基于一个或多个响应式依赖的函数,这些依赖可以是组件的data属性、props或其他computed属性。当这些依赖发生变化时,computed属性会自动重新计算,并且Vue会确保它的值是最新的。

useMemo不同,computed在Vue中是声明式的,并且它总是会在依赖变化时重新计算,而不是基于性能优化的考虑。此外,computed属性还可以被用作模板中的绑定,并且它们具有缓存行为,这意味着如果依赖没有变化,那么computed属性的值也不会变化。

总结

  • useMemo(React):一个性能优化工具,用于避免不必要的昂贵计算。它返回一个记忆化的值,这个值在依赖项没有变化时保持不变。
  • computed(Vue):一个声明式的计算属性,用于基于响应式依赖计算派生状态。它总是会在依赖变化时重新计算,并且具有缓存行为。

React.momo

默认渲染:父组件渲染子组件一起渲染

momo:props不变化时,子组件跳过渲染

父组件重新渲染,正常数组会生成新的引用,如果缓存需要用useMemo

在React中,实际上并不存在名为“React.momo”的API或组件。可能您想要了解的是与“React.momo”名称相近或功能相似的React特性,比如React.memo。以下是对React.memo的详细介绍:

一、定义与用途

React.memo是一个高阶组件(Higher Order Component,简称HOC),它用于缓存组件的渲染结果,从而避免在props相同的情况下进行不必要的重新渲染。这有助于提高应用的性能,特别是在处理大型组件树或频繁更新的场景时。

二、使用方式

React.memo接受一个函数组件作为参数,并返回一个新的组件。这个新的组件会检查其props是否发生变化,如果没有变化,则不会重新渲染内部的函数组件。

import { memo } from 'react';  function MyComponent(props) {  // 组件代码  
}  export default memo(MyComponent);

三、深度比较与自定义比较函数

默认情况下,React.memo会对props进行浅比较(shallow comparison)。如果props中的对象或数组包含深层数据结构,并且这些深层数据发生了变化,但引用没有变化(即对象或数组的引用地址没有改变),那么React.memo可能不会触发重新渲染。

为了解决这个问题,可以向React.memo传递一个自定义的比较函数作为第二个参数。这个比较函数将用于确定何时应该重新渲染组件。

function arePropsEqual(prevProps, nextProps) {  // 自定义比较逻辑  // 例如,进行深度比较  return prevProps.someValue === nextProps.someValue;  
}  export default memo(MyComponent, arePropsEqual);

四、注意事项

  1. React.memo只能用于函数组件,不能用于类组件。
  2. 当使用React.memo时,应确保传递给组件的props是可比较的(例如,避免使用函数或undefined作为props的值,因为这些值在浅比较中可能无法准确判断)。
  3. 虽然React.memo可以提高性能,但过度使用也可能导致代码复杂性的增加。因此,应根据实际情况谨慎使用。

综上所述,React.memo是React中用于优化函数组件渲染性能的一个有用工具。通过缓存渲染结果和避免不必要的重新渲染,它可以帮助开发者提高应用的响应速度和用户体验。

useCallback

props传函数,保证子组件不重新渲染

useCallback是React提供的一个Hook函数,主要用于优化函数组件的性能,通过缓存回调函数避免不必要的重复创建和重新渲染。以下是对useCallback的详细解析:

一、基本用法

useCallback接受两个参数:一个回调函数和一个依赖数组。当依赖数组中的任何一个值发生变化时,useCallback会返回一个新的回调函数;否则,它会返回之前缓存的回调函数。

  • 回调函数:这是需要被缓存的函数,通常是在组件中需要多次调用的函数。
  • 依赖数组:这是一个包含依赖项的数组。当这些依赖项发生变化时,useCallback会重新创建一个新的回调函数。

二、示例代码

以下是一个简单的示例,展示了如何使用useCallback:

import React, { useCallback, useState } from 'react';  function MyComponent() {  const [count, setCount] = useState(0);  // 使用useCallback缓存回调函数  const handleClick = useCallback(() => {  console.log(`Clicked ${count} times`);  }, [count]);  return (  <>  <div>Count: {count}</div>  <button onClick={() => setCount(count + 1)}>Increment</button>  <button onClick={handleClick}>Click me</button>  </>  );  
}

在上面的代码中,handleClick回调函数依赖于count状态,因此每次count状态改变时,useCallback都会返回一个新的回调函数。

三、使用场景

useCallback通常用于以下场景:

  1. 将回调函数传递给子组件:当父组件将回调函数传递给子组件时,如果回调函数在每次父组件渲染时都重新创建,那么子组件可能会因为接收到新的函数引用而重新渲染。使用useCallback可以缓存回调函数,避免子组件的不必要重新渲染。
  2. 优化性能:在组件中频繁调用同一个回调函数时,使用useCallback可以避免每次调用都重新创建函数实例,从而提高性能。

四、注意事项

  1. 不要过度使用:虽然useCallback可以提高性能,但过度使用可能会导致代码变得复杂和难以维护。因此,应该根据实际需求合理使用。
  2. 依赖项要准确:在使用useCallback时,要确保依赖项数组中的值是准确的。如果遗漏了某个依赖项,可能会导致回调函数在依赖项变化时没有更新,从而引发bug。
  3. 与memo配合使用:useCallback通常与React.memo一起使用,以实现更高效的组件渲染。React.memo可以对组件的props进行浅层比较,如果props没有变化,则不会重新渲染组件。

五、性能优化讨论

关于useCallback的性能优化效果,存在一些不同的观点。一方面,使用useCallback可以避免不必要的函数重复创建和渲染,从而提高性能;另一方面,React的性能优化机制已经足够智能,可以自动处理很多情况下的函数重复创建。因此,在某些情况下,不使用useCallback也不会对性能产生显著影响。然而,在大型应用中或当回调函数被频繁调用时,使用useCallback仍然是一个值得考虑的优化手段。

综上所述,useCallback是React中一个非常有用的Hook函数,它可以帮助开发者优化函数组件的性能。通过合理使用useCallback和依赖项数组,可以避免不必要的函数重复创建和渲染,从而提高应用的性能和响应速度。

forwardRef

向父组件暴露DOM

React中的forwardRef是一个重要的API,它允许将ref自动地通过组件传递给其子组件。以下是对forwardRef的详细解析:

一、基本概念

forwardRef是React提供的一个高阶组件(HOC)或称为一个函数,用于解决在函数组件中无法直接使用ref的问题。在React中,refs通常用于访问DOM节点或组件实例,但在函数组件中,由于它们没有实例,因此无法直接使用ref。forwardRef允许我们将ref从父组件传递到子组件中的DOM元素或函数式组件。

二、工作原理

forwardRef的工作原理是接受一个渲染函数作为参数,该函数接收props和ref作为参数,并返回React元素。这样,父组件就可以通过ref属性将ref传递给被forwardRef包装的组件,而该组件则可以将这个ref转发给其内部的DOM元素或另一个组件。

三、使用场景

  1. 访问DOM元素:当需要从父组件直接访问子组件的DOM元素时,可以使用forwardRef。例如,当需要直接操作子组件的焦点、触发动画或测量子DOM节点的尺寸时,forwardRef非常有用。
  2. 高阶组件:在高阶组件中,经常需要将被包装的组件的ref传递给内部的某个子组件。这时,forwardRef可以确保ref能够正确地传递。
  3. 组件库开发:在设计可重用的组件库时,通常组件内部的实现细节是不暴露给使用者的。但有时外部需要对这些封装后的子组件进行操作,这时forwardRef可以提供一个简单而有效的解决方案。

四、示例代码

以下是一个使用forwardRef的示例代码:

import React, { forwardRef, useRef } from 'react';  // 定义一个使用forwardRef的组件  
const FancyButton = forwardRef((props, ref) => (  <button ref={ref} className="FancyButton">  {props.children}  </button>  
));  // 在父组件中使用FancyButton并传递ref  
const App = () => {  const buttonRef = useRef();  const handleClick = () => {  // 通过ref直接访问DOM元素并触发点击事件  buttonRef.current.click();  };  return (  <div>  <FancyButton ref={buttonRef}>Click me!</FancyButton>  <button onClick={handleClick}>Programmatically click FancyButton</button>  </div>  );  
};  export default App;

在上面的代码中,FancyButton组件使用了forwardRef来接收父组件传递的ref,并将其转发给内部的button元素。在父组件App中,通过useRef创建了一个ref,并将其传递给FancyButton组件。然后,通过ref直接访问了FancyButton组件内部的button元素,并触发了其点击事件。

五、注意事项

  1. 正确使用ref:在使用forwardRef时,需要确保将ref正确地传递给相应的子组件或DOM元素。否则,将无法访问到子组件的实例或DOM元素。
  2. 避免过度使用:虽然forwardRef提供了在函数组件中使用ref的能力,但过度使用可能会导致代码变得复杂和难以维护。因此,应该根据实际需求合理使用。
  3. 与类组件的区别:在类组件中,可以直接使用ref来访问组件实例。但在函数组件中,由于它们没有实例,因此需要使用forwardRef来间接访问DOM元素或子组件。

综上所述,forwardRef是React中一个非常有用的API,它允许在函数组件中通过ref访问子组件的DOM元素或实例。通过合理使用forwardRef,可以实现更精细化的UI控制和组件管理。

useImperativeHandle 

向外暴露方法

useImperativeHandle 是 React 中的一个 Hook,它允许你在使用 ref 时自定义暴露给父组件的实例值。以下是对 useImperativeHandle 的详细解析:

一、作用

useImperativeHandle 的主要作用是让子组件能够选择性地暴露给父组件某些属性或方法,而不是将所有属性和方法都暴露出去。这对于需要在父组件中调用子组件方法或访问子组件状态的场景非常有用。

二、使用场景

当父组件需要使用子组件的方法或属性时,可以通过 ref 和 useImperativeHandle 来实现。例如,父组件可能需要调用子组件的 focus 方法来聚焦输入框,或者访问子组件的某些状态。

三、使用步骤

  1. 父组件中创建 ref

    • 使用 useRef(函数组件)或 createRef(类组件)创建一个 ref 对象。
  2. 子组件中使用 forwardRef

    • 使用 React.forwardRef 包装子组件,以便能够接收和使用 ref。
  3. 子组件中使用 useImperativeHandle

    • 在子组件内部,使用 useImperativeHandle 钩子函数来定义要暴露给父组件的属性或方法。
    • useImperativeHandle 的第一个参数是 ref,第二个参数是一个函数,该函数返回一个对象,该对象包含要暴露给父组件的属性或方法。
  4. 父组件中通过 ref 访问子组件

    • 父组件可以通过 ref 的 current 属性来访问子组件暴露的属性或方法。

四、示例代码

以下是一个简单的示例,展示了如何使用 useImperativeHandle:

import React, { useRef, useImperativeHandle, forwardRef } from 'react';  // 子组件  
const FancyInput = React.forwardRef((props, ref) => {  const inputRef = useRef();  useImperativeHandle(ref, () => ({  focus: () => {  inputRef.current.focus();  }  }));  return <input ref={inputRef} type="text" />;  
});  // 父组件  
const App = () => {  const fancyInputRef = useRef();  return (  <div>  <FancyInput ref={fancyInputRef} />  <button onClick={() => fancyInputRef.current.focus()}>父组件调用子组件的 focus</button>  </div>  );  
};  export default App;

 

 

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

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

相关文章

1.前提配置 关防火墙 关selinux

1.前提配置 关防火墙 关selinux 2.安装web服务程序nginx 未安装则需重新设置挂载点 若已安装&#xff0c;则查看系统中是否存在 3.当前主机添加多地址&#xff08;ip a&#xff09; 配置了三个IP地址 查看IP地址是否配置成功 4.自定义nginx配置文件通过多地址区分多网站 /…

使用JMeter进行Spring Boot接口的压力测试

使用 Apache JMeter 对接口进行压力测试是一个相对简单的过程。以下是详细的步骤&#xff0c;包括安装、配置和执行测试计划。 1. 下载和安装 JMeter 下载 JMeter 从 JMeter 官方网站https://jmeter.apache.org/download_jmeter.cgi 下载最新版本的 JMeter。 解压缩 将下载的 …

02.数据结构介绍顺序表、链表简述+对比

目录 一、什么是数据结构 二、线性表 三、顺序表 四、链表 五、顺序表和链表的区别 一、什么是数据结构 数据结构是由“数据”和“结构”两个词组合而来。 数据&#xff1a;常见的数值1、2、3......&#xff0c;网页里的文字图片信息等都是数据。 结构&#xff1a;组织数据…

【从零开始的LeetCode-算法】3184. 构成整天的下标对数目 I

给你一个整数数组 hours&#xff0c;表示以 小时 为单位的时间&#xff0c;返回一个整数&#xff0c;表示满足 i < j 且 hours[i] hours[j] 构成 整天 的下标对 i, j 的数目。 整天 定义为时间持续时间是 24 小时的 整数倍 。 例如&#xff0c;1 天是 24 小时&#xff0c…

leetcode动态规划(九)-0-1背包理论基础

题目 背包问题主要有以下几种分类&#xff0c;对于面试来说掌握0-1背包和完全背包足够&#xff0c;多重背包和分组背包是竞赛级别的题目&#xff0c;面试就无需准备 题目&#xff1a; 有n件物品和一个最多能背重量为w 的背包。第i件物品的重量是weight[i]&#xff0c;得到的价…

C# SM2 加签、验签工具

目录 效果 项目 代码 下载 效果 项目 代码 using Org.BouncyCastle.Crypto.Parameters; using Org.BouncyCastle.Crypto.Signers; using Org.BouncyCastle.Asn1.GM; using System; using System.Text; using System.Windows.Forms; using Org.BouncyCastle.Asn1.X9; using…

element plus e-table表格中使用多选,当翻页时已选中的数据丢失

摘要&#xff1a; 点击第一页选中两个&#xff0c;再选择第二页&#xff0c;选中&#xff0c;回到第一页&#xff0c;之前选中的要保留&#xff01; element ui table 解决办法&#xff1a; :row-key“getRowKeys” &#xff08;写在el-table中&#xff09; methods中声明 ge…

Spring Boot项目中怎么设置内容安全策略Content Security Policy

内容安全策略&#xff08;CSP&#xff0c;Content Security Policy&#xff09; 是一种用于防止跨站点脚本攻击&#xff08;XSS&#xff09;和数据注入攻击的安全策略。它通过指定允许加载的资源类型&#xff08;如脚本、样式表、图像等&#xff09;和其来源&#xff0c;来减少…

Python爬虫之小白入门保姆级教程,带7个爬虫小案例(附源码)!

以下是一份 Python 爬虫入门保姆级教程&#xff1a; 一、准备工作 安装 Python 前往 Python 官方网站&#xff08;https://www.python.org/&#xff09;下载适合你操作系统的 Python 版本并安装。安装过程中可以勾选“Add Python to PATH”以便在命令行中方便地调用 Python。 …

初识git · 有关模型

目录 前言&#xff1a; 有关开发模型 前言&#xff1a; 其实文章更新到这里的时候&#xff0c;我们已经学习了可以满足我们日常生活中的基本需求的指令了&#xff0c;但是为什么要更新本篇文章呢&#xff1f;是因为实际生活中我们对于开发工作&#xff0c;运维工作&#xff…

ubuntu查看系统版本命令

查看系统版本指令 在 Ubuntu 操作系统中&#xff0c;您可以使用多个命令来查看系统版本。以下是一些常用的命令&#xff1a; lsb_release -a 这个命令会显示详细的 Ubuntu 版本信息&#xff0c;包括发行版名称、版本号、代号等。lsb_release -acat /etc/os-release 这个命令会显…

基于SSM的的水电管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

5G工业路由器智能电网部署实录:一天内解决供电、网络

凌晨4:13,我被手机震动惊醒。变电站值班人员发来紧急消息:昨晚部署的SR800突然离线。我立即查看了STAR Device Manager平台,确认是设备A37号在3:47分失去连接。(key-iot.com/iotlist/sr800-3.html) 6:30到达变电站。检查SR800状态,发现是供电问题导致设备重启。这个老旧变电站…

pytorch训练和使用resnet

pytorch训练和使用resnet 使用 CIFAR-10数据集 训练 resnet resnet-train.py import torch import torchvision import torchvision.transforms as transforms import torch.nn as nn import torch.optim as optim# 在CIFAR-10数据集中 # 训练集&#xff1a;包含50000张图像…

电影院订票选座小程序ssm+论文源码调试讲解

第2章 开发环境与技术 电影院订票选座小程序的编码实现需要搭建一定的环境和使用相应的技术&#xff0c;接下来的内容就是对电影院订票选座小程序用到的技术和工具进行介绍。 2.1 MYSQL数据库 本课题所开发的应用程序在数据操作方面是不可预知的&#xff0c;是经常变动的&…

处理文件上传和进度条的显示(进度条随文件上传进度值变化)

成品效果图&#xff1a; 解决问题&#xff1a;上传文件过大时&#xff0c;等待时间过长&#xff0c;但是进度条却不会动&#xff0c;只会在上传完成之后才会显示上传完成 上传文件的upload.component.html <nz-modal [(nzVisible)]"isVisible" [nzTitle]"文…

python包以及异常、模块、包的综合案例(较难)

1.自定义包 python中模块是一个文件&#xff0c;而包就是一个文件夹 有这个_init_.py就是python包&#xff0c;没有就是简单的文件夹 包的作用&#xff1a;当我们的模块越来越多时&#xff0c;包可以帮助我们管理这些模块&#xff0c;包的作用就是包含多个模块&#xff0c;但包…

【命令操作】信创终端系统上timedatectl命令详解 _ 统信 _ 麒麟 _ 方德

原文链接&#xff1a;【命令操作】信创终端系统上timedatectl命令详解 | 统信 | 麒麟 | 方德 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇关于如何在信创终端系统上使用timedatectl命令的详细介绍。timedatectl 是Linux系统中非常实用的时间管理工具&#xff0c;…

学习写作--polyGCL.md

POLYGCL: GRAPH CONTRASTIVE LEARNING VIA LEARNABLE SPECTRAL POLYNOMIAL filters 这篇工作的摘要和引言写的特别好&#xff08;不愧是ICLR spotlight&#xff09; 摘要 第一步&#xff0c;设定背景 Recently, Graph Contrastive Learning (GCL) has achieved significantl…

使用Flask实现本机的模型部署

前言 模型部署是指将大模型运行在专属的计算资源上&#xff0c;使模型在独立的运行环境中高效、可靠地运行&#xff0c;并为业务应用提供推理服务。其目标是将机器学习模型应用于实际业务中&#xff0c;使最终用户或系统能够利用模型的输出&#xff0c;从而发挥其作用。 一、设…