React Hooks实战：Web开发与设计

news2024/11/27 9:37:07

目录

前言

一、React Hooks 简介

二、React Hooks 的基本用法

1. 使用 useState 创建状态

2. 使用 useEffect 添加副作用

3. 使用 useContext 获取上下文

三、React Hooks 的常见问题

1. 循环引用问题

2. 副作用问题

四、React Hooks 实战案例

1. 使用 useState`钩子来在函数组件中添加状态

2. 使用 useEffect`钩子来在函数组件中添加生命周期方法

3. 一个计数器组件，可以增加、减少和重置计数器的值

使用 useReducer 和 Redux

使用 useContext

使用自定义 Hooks

添加样式和美化

测试和调试

好书推荐： React Hooks实战（Web开发与设计）

内容简介

作者简介

目录

前言

React Hooks 是 React 16.8 版本引入的新特性，它使得在函数组件中也能使用之前只在类组件中才有的生命周期方法。React Hooks 为函数组件带来了很大的灵活性，让函数组件可以像类组件一样使用状态和其他 React 特性。

一、React Hooks 简介

在 React 之前的版本中，组件要么是函数组件，要么是类组件。函数组件可以使用纯函数的方式编写，但是没有状态（state）和其他 React 特性；类组件则可以拥有状态和其他 React 特性，但是需要使用 class 语法来定义。React Hooks 就是在函数组件中引入了状态和其他 React 特性的工具。

React Hooks 包括以下四个基本特性：

  1. useState：在函数组件中添加状态，相当于在类组件中使用 this.state。
  2. useEffect：在函数组件中添加副作用（side effect），相当于在类组件中使用 this.props.children 或者 componentDidMount、componentDidUpdate 等生命周期方法。
  3. useContext：在函数组件中可以使用 React 的 Context API，而无需使用 class 组件中的 contextProps。
  4. useReducer：在函数组件中可以使用 Redux 的 reducer API，用于管理复杂的状态。

除了以上四个基本特性外，React Hooks 还支持自定义 Hooks，使得可以将多个 Hooks 组合在一起，实现更复杂的功能。

二、React Hooks 的基本用法

1. 使用 useState 创建状态

在 React Hooks 中，我们可以使用 useState 创建状态。useState 接受一个初始状态值作为参数，返回一个状态值和更新状态的函数。

例如，我们可以通过以下方式使用 useState 创建状态：

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在这个例子中，我们通过 useState(0) 创建了一个名为 count 的状态，并初始化为 0。同时，我们还获取了一个名为 setCount 的函数，用于更新 count 的值。在组件中，我们可以使用 count 和 setCount 来管理组件的状态。

2. 使用 useEffect 添加副作用

除了状态之外，React Hooks 还提供了 useEffect 来添加副作用。useEffect 接受一个函数作为参数，该函数将在组件渲染时执行。

例如，我们可以通过以下方式使用 useEffect 添加副作用：

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在这个例子中，我们通过 useEffect(() => {}) 添加了一个副作用，该副作用将在组件渲染时执行。在副作用函数中，我们将文档标题设置为点击次数。每次组件渲染时，文档标题也会随之更新。

3. 使用 useContext 获取上下文

React Hooks 还提供了 useContext 来获取上下文。在组件中，我们可以使用 useContext 来访问外部定义的上下文。

例如，我们可以通过以下方式使用 useContext 获取上下文：

import React, { useContext } from 'react';
import { MyContext } from './MyContext';

function Example() {
  const context = useContext(MyContext);
  return (
    <div>
      <p>The value from the context is: {context.value}</p>
    </div>
  );
}

在这个例子中，我们通过 useContext(MyContext) 获取了外部定义的上下文 MyContext。在组件中，我们可以使用 context.value 来访问上下文中定义的值。

三、React Hooks 的常见问题

1. 循环引用问题

在使用 React Hooks 时，需要注意循环引用的问题。循环引用是指两个组件相互引用，导致无法正确渲染。为了避免循环引用，我们可以使用 React.lazy 和 Suspense 来按需加载组件。

例如，我们可以使用以下方式使用 React.lazy 和 Suspense 解决循环引用问题：

import React, { Suspense, lazy } from 'react';

const MyLazyComponent = lazy(() => import('./MyLazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyLazyComponent />
      </Suspense>
    </div>
  );
}

在这个例子中，我们使用 React.lazy 和 Suspense 来按需加载 MyLazyComponent。在加载过程中，我们可以在 Suspense 中设置一个回退组件，用于显示加载中的状态。当组件加载完成后，MyLazyComponent 将被渲染出来。

2. 副作用问题

在使用 React Hooks 时，需要注意副作用的问题。如果我们在组件中使用 useEffect 添加副作用，但没有正确处理副作用的清除操作，可能会导致内存泄漏等问题。为了避免这些问题，我们可以使用 useEffect 的第二个参数来指定清理函数。

例如，我们可以使用以下方式使用 useEffect 解决副作用问题：

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => {
      clearInterval(intervalId);
    };
  });

  return (
    <div>
      <p>You clicked {count} times</p>
    </div>
  );
}

四、React Hooks 实战案例

1. 使用 useState`钩子来在函数组件中添加状态

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  return (
    <div>
      <p>Count: {count}</p >
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

2. 使用 useEffect`钩子来在函数组件中添加生命周期方法

import React, { useState, useEffect } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');
  const [isEditing, setIsEditing] = useState(false);

  useEffect(() => {
    fetchTodos();
  }, []);

  const addTodo = (newTodo) => {
    setTodos([...todos, newTodo]);
  };

  const editTodo = (todoToEdit) => {
    setIsEditing(true);
    setInputValue(todoToEdit.content);
  };

3. 一个计数器组件，可以增加、减少和重置计数器的值

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const [isResetting, setIsResetting] = useState(false);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  const reset = () => {
    setIsResetting(true);
    setTimeout(() => {
      setCount(0);
      setIsResetting(false);
    }, 200);
  };

  const handleReset = async () => {
    if (isResetting) {
      return;
    }
    setIsResetting(true);
    await new Promise(resolve => setTimeout(resolve, 200));
    setCount(0);
    setIsResetting(false);
  };

  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
}

这段代码定义了一个名为 Counter 的组件，它使用了 React Hooks 中的 useState 来定义组件的状态。在这个例子中，组件具有两个状态：count 和 isResetting。count 用于存储当前计数器的值，isResetting 用于标识是否正在重置计数器。

组件中定义了三个函数：increment、decrement 和 reset，分别用于增加、减少和重置计数器的值。increment 和 decrement 函数通过调用 useState 中的 setCount 函数来更新计数器的值。reset 函数比较复杂，它需要在重置计数器的过程中显示一个加载状态。因此，它首先将 isResetting 设置为 true，表示正在重置计数器。然后，它使用 setTimeout 函数来延迟重置计数器的操作，并在延迟结束后将 count 设置为 0，同时将 isResetting 设置为 false。

在组件的 JSX 中，我们使用三个按钮来触发这三个函数。其中，Reset 按钮需要调用 handleReset 函数，该函数会先检查 isResetting 是否为 true，如果是，则直接返回；否则，它将等待一段时间后重置计数器并关闭加载状态。

这个例子演示了如何使用 React Hooks 来管理组件的状态，以及如何使用函数式编程的方法来处理组件中的副作用（如重置过程中的加载状态）。通过这种方式，我们可以编写更加简洁、易于理解和维护的组件代码。

除了上述的计数器功能，我们还可以扩展这个 Counter 组件，以演示 React Hooks 的更多特性。

使用 useReducer 和 Redux

我们可以使用 useReducer 钩子来替换上述的 useState，以实现更复杂的状态管理。例如，我们可以将 count 和 isResetting 合并为一个状态对象，并使用一个 reducer 函数来管理这个状态对象。这样，我们可以更方便地进行状态更新和管理。

使用 useContext

我们可以使用 useContext 钩子来将 React 的 Context API 引入到组件中。例如，我们可以创建一个 CounterContext，用于存储计数器的状态和操作函数。然后，在 Counter 组件中使用 useContext 钩子来获取这个上下文，以获取当前计数器的状态和操作函数。这样，我们可以将计数器的状态和操作函数传递给子组件，让子组件也能够使用它们。

使用自定义 Hooks

我们可以使用自定义 Hooks 来将多个 Hooks 组合在一起，以实现更复杂的功能。例如，我们可以创建一个名为 useCounter 的自定义 Hook，它将上面的 useState、useReducer 和 useContext 组合在一起，并提供一个简单的 API 来管理计数器的状态和操作函数。这样，我们可以让其他组件更方便地使用计数器的功能。

通过这些扩展，我们可以更全面地了解 React Hooks 的基本用法和实际应用。同时，我们也可以将这些知识和技能应用到实际的开发中，以提高我们的开发效率和代码质量。

添加样式和美化

为了使计数器更加美观，我们可以添加一些样式和美化效果。例如，我们可以使用外部 CSS 样式表或者内部样式块来设置计数器的背景颜色、文本颜色、边框等样式。我们还可以使用 CSS 动画来添加一些动态效果，例如在计数器数值改变时显示渐变效果。

测试和调试

为了确保计数器组件的正确性和稳定性，我们需要进行测试和调试。我们可以使用各种测试工具和技术，例如单元测试、集成测试和调试工具等。通过测试和调试，我们可以发现和修复计数器组件中的错误和问题，从而提高组件的质量和可靠性。

总结

通过以上的扩展，我们可以看到 React Hooks 的强大功能和灵活性。它不仅提供了简洁的状态管理方式，还支持自定义 Hooks、Context API 和 Redux 等高级特性。这些特性使得我们能够编写更加简洁、易于理解和维护的组件代码，并实现更复杂的功能。同时，我们还需要注意测试和调试的重要性，以确保组件的正确性和稳定性。

好书推荐： React Hooks实战（Web开发与设计）

使用React Hooks后，你很快就会发现，代码变得更具有组织性且更易于维护。React Hooks是旨在为用户提供跨组件的重用功能和共享功能的JavaScript函数。利用React Hooks， 可以将组件分成多个函数、管理状态和副作用，并且不必声明类即可调用React内置的功能。而且，上述所有的操作，都不涉及重新调整组件的层级。

《React Hooks实战》将指导你使用hook开发性能优秀、可复用度高的React组件。首先，你将学习如何使用hook创建组件代码。接下来，你会亲自实现一个资源预订应用程序，这个示例演示了如何管理本地状态、应用程序状态以及类似请求数据之类的副作用。书中的代码示例以及图表可帮助你更加轻松地学习hook。

内容简介

主要内容

●构建 可调用React功能的函数组件

●管理本地状态、共享状态以及应用程序状态

●学习内置hook、自定义hook以及第三方hook

●利用React Query加载、 更新和缓存数据

●利用代码 分割和React Suspense请求数据并提升页面体验

作者简介

John Larsen从20世纪80年代开始从事编程工作，最开始是在Commodore VIC-20上编写Basic，随后又涉猎了Java、PHP、C#以及JavaScript等领域。他还编写了同样由曼宁出版社出版的Get Programming with JavaScript一书。他在英国当了25年的数学老师，为高中生讲授计算机知识，并为学校开发与教学类、学习类以及沟通有关的Web程序。

目录

第Ⅰ部分 React Hooks介绍及应用

第1章 逐渐演进的React 3

1.1 什么是React 3

1.1.1 用组件构建UI 4

1.1.2 同步状态和UI 6

1.1.3 理解组件的类型 9

1.2 React中的新增功能 11

1.3 可以为函数式组件添加状态的React Hooks 12

1.3.1 有状态的函数式组件：更少的代码，更好的组织结构 12

1.3.2 自定义hook：更易于代码复用 14

1.3.3 第三方的hook提供了完备的、经过良好测试的功能 17

1.4 通过Concurrent模式和Suspense获得更好的UX 18

1.4.1 Concurrent模式 19

1.4.2 Suspense 20

1.5 全新的React发布渠道 21

1.6 本书读者对象 21

1.7 开始吧 22

1.8 本章小结 22

第2章 使用useState hook管理组件的状态 23

2.1 搭建预订管理应用程序 24

2.1.1 通过create-react-app生成应用程序的框架 26

2.1.2 编辑四个关键文件 27

2.1.3 为应用程序添加数据库文件 30

2.1.4 创建页面组件和UserPicker.js文件 31

2.2 通过useState存储、使用和设置值 32

2.2.1 给变量赋新值并不会更新UI 33

2.2.2 调用useState返回一个值和一个updater函数 36

2.2.3 调用updater函数替换之前的状态值 40

2.2.4 将函数传递给useState作为初始值 43

2.2.5 设置新状态时需要使用之前的状态 44

2.3 多次调用useState以处理多个状态值 46

2.3.1 使用下拉菜单设置状态 46

2.3.2 使用复选框设置状态 49

2.4 复习函数式组件概念 52

2.5 本章小结 55

第3章 使用useReducer hook管理组件的状态 57

3.1 在响应一个事件时更新多个状态值 58

3.1.1 不可预测的状态变化会将用户带离焦点 58

3.1.2 通过可预测的状态变化让用户沉浸在电影中 59

3.2 通过useReducer管理更复杂的状态 61

3.2.1 使用reducer及一个预定义的action集更新状态 62

3.2.2 为BookablesList组件构建reducer 64

3.2.3 使用useReducer访问组件状态并分派action 67

3.3 通过函数生成初始状态 70

3.3.1 引入WeekPicker组件 71

3.3.2 创建用以处理日期和星期的工具函数 72

3.3.3 构建帮助组件管理日期的reducer 73

3.3.4 向useReducer hook传递初始化函数 74

3.3.5 使用WeekPicker更新BookingsPage 75

3.4 复习useReducer的相关概念 76

3.5 本章小结 79

第4章 处理副作用 81

4.1 通过简单示例探讨useEffect API 82

4.1.1 在每次渲染后运行副作用 82

4.1.2 仅当组件被挂载时运行副作用 84

4.1.3 通过返回一个函数清理副作用 86

4.1.4 通过指定依赖项控制effect的运行时间 88

4.1.5 总结调用useEffect hook的方式 91

4.1.6 在浏览器重绘之前调用useLayoutEffect运行effect 91

4.2 获取数据 92

4.2.1 新建一个db.json文件 92

4.2.2 设置JSON服务器 92

4.2.3 通过useEffect hook获取数据 94

4.2.4 使用async和await 96

4.3 获取BookablesList组件的数据 97

4.3.1 测试数据加载的过程 97

4.3.2 更新reducer以管理加载中状态和错误状态 98

4.3.3 创建一个用于加载数据的辅助函数 100

4.3.4 加载可预订对象 102

4.4 本章小结 103

第5章 使用useRef hook管理组件状态 105

5.1 更新状态但不触发重新渲染 106

5.1.1 对比useState和useRef在更新状态值时的区别 106

5.1.2 调用useRef 108

5.2 在ref中保存计时器ID 109

5.3 保存DOM元素的引用 112

5.3.1 在事件响应中将焦点设置到指定元素上 112

5.3.2 利用ref控制文本框 115

5.4 本章小结 118

第6章 管理应用程序的状态 119

6.1 向子组件传递共享状态 120

6.1.1 通过设置子组件的prop传递父组件的状态 120

6.1.2 从父组件接收状态作为prop 121

6.1.3 从父组件接收updater函数作为prop 123

6.2 拆分组件 125

6.2.1 将组件视为大型应用程序的一部分 125

6.2.2 在一个页面上组织多个组件 126

6.2.3 创建BookableDetails组件 127

6.3 共享useReducer返回的状态和dispatch函数 129

6.3.1 在BookablesView组件中管理状态 130

6.3.2 从reducer中删除一个action 131

6.3.3 在BookablesList组件中接收状态和dispatch函数 131

6.4 共享useState返回的状态和updater函数 134

6.4.1 在BookablesView组件中管理选定的可预订信息 135

6.4.2 在BookablesList中接收可预订信息和updater函数 136

6.5 使用useCallback传递函数以避免重复定义 141

6.5.1 使用prop传入的函数作为依赖项 142

6.5.2 使用useCallback hook维护函数的标识 143

6.6 本章小结 144

第7章 使用useMemo管理性能 147

7.1 厨子不喜欢制作一人份的小蛋糕 148

7.1.1 使用高开销算法生成变位词 149

7.1.2 避免多余的函数调用 151

7.2 通过useMemo记忆化高开销函数 152

7.3 在Bookings页面上组织组件 153

7.3.1 使用useState管理选定的可预订对象 155

7.3.2 使用useReducer和useState管理选定的星期和预订信息 155

7.4 使用useMemo高效创建预订信息网格组件 158

7.4.1 生成时间段和日期的网格 158

7.4.2 生成预订信息的查询对象 161

7.4.3 提供数据加载函数getBookings 163

7.4.4 创建BookingsGrid组件并调用useMemo 164

7.4.5 在useEffect中获取数据时处理多个响应竞争的情况 167

7.5 本章小结 172

第8章 使用Context API管理状态 175

8.1 从上层的组件树中获取状态 176

8.1.1 当页面首次加载时显示一条行为召唤的消息 177

8.1.2 当用户选定预订信息时显示预订信息详情 178

8.1.3 显示一个用于编辑用户预订信息的按钮——问题 179

8.1.4 显示一个用于编辑用户预订信息的按钮——解决方案 180

8.2 使用自定义的provider和多个context 185

8.2.1 将对象用作context provider的值 186

8.2.2 将状态移到自定义provider中 187

8.2.3 使用多个context 191

8.2.4 为context指定一个默认值 195

8.3 本章小结 195

第9章 创建自定义hook 197

9.1 将功能提取到自定义hook中 199

9.1.1 重新组织通用功能 201

9.1.2 在组件外部声明自定义hook 202

9.1.3 在自定义hook中调用自定义hook 203

9.2 遵循hook的规则 205

9.2.1 仅在组件的最顶层调用hook 206

9.2.2 只从React函数式组件中调用hook 206

9.2.3 使用ESLint插件检查hook的规则 206

9.3 更多关于自定义hook的示例 207

9.3.1 使用useWindowSize hook获取窗口尺寸 207

9.3.2 使用useLocalStorage hook获取/设置值 209

9.4 使用自定义hook消费context值 210

9.5 使用自定义hook封装数据请求 213

9.5.1 开发useFetch hook 213

9.5.2 使用useFetch hook返回的data、status和error属性 214

9.5.3 创建专用的数据请求hook：useBookings 216

9.6 本章小结 220

第10章 使用第三方hook 223

10.1 利用React Router访问URL中的状态 224

10.2 获取和设置查询字符串中的查询参数 233

10.3 使用React Query让数据获取过程更流畅 242

10.4 本章小结 254

第Ⅱ部分 揭秘React Concurrent特性

第11章 利用Suspense进行代码分割 259

11.1 利用import函数动态导入代码 260

11.2 利用lazy和Suspense动态导入组件 264

11.3 利用错误边界捕获异常 273

11.4 本章小结 278

第12章 整合数据请求和 Suspense 281

12.1 使用Suspense请求数据 282

12.2 整合React Query、Suspense和错误边界 292

12.3 使用Suspense加载图片 294

12.4 本章小结 299

第13章 实验特性：useTransition、useDeferredValue和SuspenseList 301

13.1 在不同状态间更顺滑地过渡 302

13.2 使用SuspenseList管理多个回退UI 309

13.3 Concurrent模式及未来 313

13.4 本章小结 314

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

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

相关文章

竞赛选题 深度学习的智能中文对话问答机器人

竞赛选题 深度学习的智能中文对话问答机器人

文章目录 0 简介1 项目架构2 项目的主要过程2.1 数据清洗、预处理2.2 分桶2.3 训练 3 项目的整体结构4 重要的API4.1 LSTM cells部分&#xff1a;4.2 损失函数&#xff1a;4.3 搭建seq2seq框架&#xff1a;4.4 测试部分&#xff1a;4.5 评价NLP测试效果&#xff1a;4.6 梯度截断…
阅读更多...
thinkphp 自定义错误页面

thinkphp 自定义错误页面

在访问无效的UI 这个效果不好&#xff0c;要改成自定义的 <?php namespace app\controller;class ErrorController {public function __call($method,$args){return error request!;} }之后就是提示
阅读更多...
【第2章 Docker容器基础入门】 课程介绍 + docker容器介绍

【第2章 Docker容器基础入门】 课程介绍 + docker容器介绍

一、课程介绍 1.1、容器运行时 1.2、官网 1.3、私有镜像 二、什么是 Docker &#xff1f; 2.1 Docker 的思想来自于集装箱&#xff0c;集装箱解决了什么问题&#xff1f; 2.2 、K8S 1.25版本之后可能废弃docker&#xff0c;为什么还需要学习docker&#xff1f; 一、课程介…
阅读更多...
Docker学习——⑧

Docker学习——⑧

文章目录 1、什么是 Docker Compose(容器编排)2、为什么要 Docker Compose&#xff1f;3、Docker Compose 的安装4、Docker Compose 的功能和使用场景5、Docker Compose 文件&#xff08;docker-compose.yml&#xff09;5.1 文件语法版本5.2 文件基本结构及常见指令 6、Docker …
阅读更多...
Postgresql数据类型-数据类型转换

Postgresql数据类型-数据类型转换

PostgreSQL数据类型转换主要有三种方式&#xff1a;通过格式化函数、CAST函数、::操作符&#xff0c;下面分别介绍。 通过格式化函数进行转换 PostgreSQL提供一系列函数用于数据类型转换&#xff0c;如表所示。 通过CAST函数进行转换将varchar字符类型转换成text类型&#xf…
阅读更多...
【excel技巧】如何取消excel隐藏？

【excel技巧】如何取消excel隐藏？

Excel工作表中的行列隐藏了数据&#xff0c;如何取消隐藏行列呢&#xff1f;今天分享几个方法给大家 方法一&#xff1a; 选中隐藏的区域&#xff0c;点击右键&#xff0c;选择【取消隐藏】就可以了 方法二&#xff1a; 如果工作表中有多个地方有隐藏的话&#xff0c;还是建…
阅读更多...
使用select实现定时任务

使用select实现定时任务

selectOutOfTime.c里边的代码如下&#xff1a; #include<stdio.h> #include<sys/time.h> #include<sys/types.h> #include<unistd.h> #include <string.h>#define BUF_SIZE 100int main(void){fd_set reads;struct timeval tv;int errorNum;cha…
阅读更多...
Elasticsearch7 入门 进阶

Elasticsearch7 入门 进阶

1、全文检索 1.1、数据分类 按数据分类的话&#xff0c;主要可以分为以下三类&#xff1a; 结构化数据&#xff1a;固定格式、有限长度&#xff0c;比如mysql存的数据非结构化数据&#xff1a;不定长、无固定格式&#xff0c;比如邮件、Word文档、日志等半结构化数据&#xf…
阅读更多...
超详细！必看！！STM32--系统滴答SysTick

超详细！必看！！STM32--系统滴答SysTick

一、SysTick是什么&#xff1f; Systick定时器是一个24bit的倒计时&#xff08;向下计数&#xff09;定时器&#xff0c;功能就是实现简单的延时。 SysTick 是一种系统定时器&#xff0c;通常在嵌入式系统中使用。它是 ARM Cortex-M 处理器的一个特殊定时器&#xff0c;用于提…
阅读更多...
Kvaser CAN硬件在Top Dutch Solar的遥测系统中发挥重要作用

Kvaser CAN硬件在Top Dutch Solar的遥测系统中发挥重要作用

Top Dutch Solar Racing&#xff08;荷兰顶级太阳能赛车队&#xff09;是2023年Bridgestone World Solar Challenge&#xff08;普利司通世界太阳能挑战赛&#xff09;的参赛车队之一&#xff0c;其赛车上搭载的Kvaser Ethercan HS是为基于Wifi的实时遥测系统捐赠的。Kvaser Me…
阅读更多...
读写分离（基于mycat）和全同步复制

读写分离（基于mycat）和全同步复制

一、mycat实现读写分离&#xff08;VIP机制&#xff09; &#xff08;一&#xff09;配置主从复制 &#xff08;二&#xff09;部署mycat 1、安装Java 2、下载mycat安装包 3、解压mycat包 4、设置变量环境 5、启动mycat &#xff08;三&#xff09;客户端连接数据库 1、安装…
阅读更多...
初冬喜事：星融元成都办事处开业啦！

初冬喜事：星融元成都办事处开业啦！

立冬过去不久&#xff0c;我国大部分地区气温就随双十一打了五折。寒冬时分吃火锅温暖身心&#xff0c;红火的锅底也为生活增添不少喜气&#xff0c;今天就有一桩喜事——星融元成都办事处开业啦&#xff01; 星融元成都办事处位于成都市高新区锦城大道666号奥克斯广场C座2007…
阅读更多...
【LeetCode】挑战100天 Day11（热题+面试经典150题）

【LeetCode】挑战100天 Day11（热题+面试经典150题）

【LeetCode】挑战100天 Day11&#xff08;热题面试经典150题&#xff09; 一、LeetCode介绍二、LeetCode 热题 HOT 100-132.1 题目2.2 题解 三、面试经典 150 题-133.1 题目3.2 题解 一、LeetCode介绍 LeetCode是一个在线编程网站&#xff0c;提供各种算法和数据结构的题目&…
阅读更多...
9种高效提速的transformer魔改版本

9种高效提速的transformer魔改版本

Transformer目前已经成为人工智能领域的主流模型&#xff0c;应用非常广泛。然而Transformer中注意力机制计算代价较高&#xff0c;随着序列长度的增加&#xff0c;这个计算量还会持续上升。 为了解决这个问题&#xff0c;业内出现了许多Transformer的魔改工作&#xff0c;以优…
阅读更多...
（.htaccess文件特性）[MRCTF2020]你传你呢 1

（.htaccess文件特性）[MRCTF2020]你传你呢 1

题目环境&#xff1a; 不难看出是一道文件上传漏洞 上传一句话木马文件burpsuite进行抓包<?php eval($_POST[shell]);?> 命名为PHP文件格式 Repeater进行重放 尝试了其它后缀进行绕过都没有成功 通过 application/x-php内容类型&#xff0c;可以看出被识别出是PHP文件&…
阅读更多...
【C++】类和对象(3)--初始化列表(再谈构造函数)

【C++】类和对象(3)--初始化列表(再谈构造函数)

目录 一 引入 二 初始化列表概念 三 初始化列表特性 1 引用和const 2 混合使用 3 自定义成员情况 四 初始化列表中的初始化顺序 五 总结 一 引入 构造函数体赋值 class Date { public:Date(int year, int month, int day){_year year;_month month;_day day;} priv…
阅读更多...
TSINGSEE青犀视频平台EasyCVR自定义可视化页面一览

TSINGSEE青犀视频平台EasyCVR自定义可视化页面一览

视频监控TSINGSEE青犀视频平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;在视频监控播放上&#xff0c;视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放&#xff0c;可同时播放多路视频流&#xff0c;也能支…
阅读更多...
数据结构—队列的实现

数据结构—队列的实现

前言&#xff1a;上次我们已经学习了数据结构中一个重要的线性表—栈&#xff0c;那么我们这一次就来学习另外一个重要的线性表—队列。 目录&#xff1a; 一、 队列的概念 二、 队列的实现&#xff1a; 1.队列的创建 三、 队列的操作 1.初始化队列 2.队尾入队列 3.队头出队列…
阅读更多...
KOSMOS-G-图像文本结合控制生成

KOSMOS-G-图像文本结合控制生成

文章目录 摘要引言算法多模态语言建模图像解码器对齐微调instruction 实验结论 论文&#xff1a; 《Kosmos-G: Generating Images in Context with Multimodal Large Language Models》 github&#xff1a; https://github.com/microsoft/unilm/tree/master/kosmos-g 摘要 当…
阅读更多...
朋友过生日送什么葡萄酒好呢

朋友过生日送什么葡萄酒好呢

现在葡萄酒不但是活跃气氛、制造仪式感的酒精饮品&#xff0c;也是朋友之间礼尚往来的最佳礼品。有人问&#xff0c;朋友过生日送什么葡萄酒好呢&#xff1f;云仓酒庄的品牌雷盛红酒LEESON分享人们觉得红葡萄似乎太严肃&#xff0c;白葡萄酒颜色又太清淡&#xff0c;送一款什么…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023