React Hooks实战：Web开发与设计

目录

前言

一、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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

数据分析的流程：CRISP-DM方法和SEMMA方法

数据分析的流程：CRISP-DM方法和SEMMA方法

CRISP-DM方法 SEMMA方法 角色与职责&#xff1a;EDIT数字化模型
阅读更多...
【Android】画面卡顿优化列表流畅度五之下拉刷新上拉加载更多组件RefreshLayout修改

【Android】画面卡顿优化列表流畅度五之下拉刷新上拉加载更多组件RefreshLayout修改

之前也写过类似组件的介绍&#xff1a; 地址&#xff1a;下拉刷新&上拉加载更多组件SmartRefreshLayout 本来打算用这个替换的&#xff0c;但在进行仔细研究发现不太合适。功能都很好&#xff0c;但嵌入不了当前的工程体系里。原因就是那啥体制懂的都懂。这样的组件需要改…
阅读更多...
11-13 /11-14代理模式 AOP

11-13 /11-14代理模式 AOP

调用者 代理对象 目标对象 代理对象除了可以完成核心任务&#xff0c;还可以增强其他任务,无感的增强 代理模式目的: 不改变目标对象的目标方法的前提,去增强目标方法 分为:静态代理,动态代理 静态代理 有对象->前提需要有一个类&#xff0c;那么我们可以事先写好一个类&a…
阅读更多...
游戏缺失XINPUT1_3.dll的解决方法，一招搞定dll报错问题

游戏缺失XINPUT1_3.dll的解决方法，一招搞定dll报错问题

当您尝试玩游戏或运行某个软件时&#xff0c;可能会遇到系统报错提示“XINPUT1_3.dll丢失”。这个错误通常是由于缺少或损坏了XINPUT1_3.dll文件导致的。“XINPUT1_3.dll”是一个动态链接库&#xff08;Dynamic Link Libraries&#xff0c;简称DLL&#xff09;文件。它是微软公…
阅读更多...
Blazor 附件上传和下载功能

Blazor 附件上传和下载功能

效果图 page "/uploadFile" inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment WebHostEnvironment inject ToastService ToastService inject DownloadService DownloadService<h3>UploadFile</h3><Button OnClick"ButtonClick" C…
阅读更多...
Linux虚拟机的安装

Linux虚拟机的安装

文章目录 1. 准备虚拟机2. 安装所需软件3. 上传项目文件4. 配置项目环境5. 安装项目依赖6. 数据库设置7. 启动项目8. 测试项目9. 设置域名和DNS&#xff08;可选&#xff09;10. 定期维护11. 使用反向代理&#xff08;可选&#xff09;12. 安全性加固13. 使用容器化技术&#x…
阅读更多...
间歇性工作的时钟波形对行sdc约束怎么写

间歇性工作的时钟波形对行sdc约束怎么写

我正在「拾陆楼」和朋友们讨论有趣的话题&#xff0c;你⼀起来吧&#xff1f; 拾陆楼知识星球入口 如下图&#xff0c;紫色部分波形间歇式工作&#xff0c;如果要写约束应该怎么写&#xff1f; 答&#xff1a;按照最小周期写即可&#xff0c;只看active的部分&#xff0c;至于…
阅读更多...
springboot+maven多环境动态配置，以及编译失败的解决方案

springboot+maven多环境动态配置，以及编译失败的解决方案

一、前言 在我们的项目开发过程中一般会有多套的环境&#xff0c;比如比较常见的会有三套&#xff1a; dev &#xff08;研发环境&#xff09;&#xff0c;test(测试环境)&#xff0c;prod&#xff08;生产环境&#xff09;。 application.yml 是主配置文件&#xff0c;当在不…
阅读更多...
【带头学C++】----- 六、结构体 ---- 6.6 结构体的指针成员

【带头学C++】----- 六、结构体 ---- 6.6 结构体的指针成员

6.5结构体指针变量 结构体的指针变量:本质是变量只是该变量保存的是结构体变量的地址 6.5.1结构体指针变量的定义 通过指针&#xff0c;可以访问到我们结构体变量的值 可以通过 -> 符号 访问到结构体变量 6.5.2 结构体数组元素的指针变量 指针变量保存结构体数组元素…
阅读更多...
Vue3弹性布局（Flex）

Vue3弹性布局（Flex）

效果如下图&#xff1a;在线预览 APIs 参数说明类型默认值必传width区域总宽度string | number‘auto’falseverticalflex 主轴的方向是否垂直&#xff0c;vertical 使用 flex-direction: columnbooleanfalsefalsewrap设置元素单行显示还是多行显示&#xff1b;参考 flex-wrap…
阅读更多...
《线性代数》科教版教材必会习题

《线性代数》科教版教材必会习题

出一期比较尴尬的博客——有关线代教材的课后题总结~ 之所以说尴尬&#xff0c;主要有两个主要原因&#xff1a;这本科教版第三版的教材&#xff0c;整体看起来并不是那么舒服&#xff0c;甚至被我们的老师吐槽过&#xff0c;更好地选择时同济版的那本紫书——我们学校的新生这…
阅读更多...
AWTK实现汽车仪表Cluster/DashBoard嵌入式GUI开发（六）：FREERTOS移植

AWTK实现汽车仪表Cluster/DashBoard嵌入式GUI开发（六）：FREERTOS移植

前言： 一般的GUI工程都需要一个操作系统，可能是linux，重量级的，也可能是FreeRTOS，轻量级的。 一句话理解那就是工程就是FreeRTOS task任务的集合。 一个main函数可以看到大框架： 很显然，除了第一个是硬件配置的初始化，中间最重要的部分就是要创建任务。而一个任务主…
阅读更多...
扫码下载视频怎么做？适用多种格式视频文件

扫码下载视频怎么做？适用多种格式视频文件

现在将视频制作二维码来展示的应用场景越来越多&#xff0c;企业、学校、个人、产品等等很多内容都会使用视频二维码。可能有些小伙伴用来生成二维码的视频只能查看不能下载&#xff0c;导致在使用时受到限制&#xff0c;那么想要制作可以下载视频二维码的小伙伴&#xff0c;下…
阅读更多...
【unity】网格描边方法

【unity】网格描边方法

【unity】网格描边方法 介绍对模型四边网格的三种描边方法&#xff1a;包括纯Shader方法、创建网格方法和后处理方法。于增强场景中3D模型的轮廓&#xff0c;使其在视觉上更加突出和清晰。这种效果可以用于增强三维场景中的物体、角色或环境&#xff0c;使其在视觉上更加吸引人…
阅读更多...
Javaweb开发 利用servlet+jsp+jdbc+tomcat数据库实现登录功能

Javaweb开发 利用servlet+jsp+jdbc+tomcat数据库实现登录功能

前言&#xff1a;很久没更新了&#xff0c;今天给大家分享一个Java web的小案例&#xff0c;是一个登录页面&#xff0c;利用Login控制类和JDBC连接数据库&#xff0c;并判断用户名密码是否正确&#xff0c;项目最终部署在Tomcat上。 先看效果 正文 一、前期工作 1.首先我们…
阅读更多...
云课五分钟-02第一个代码复现-终端甜甜圈C++

云课五分钟-02第一个代码复现-终端甜甜圈C++

前篇 云课五分钟-01课程在哪里-无需安装网页直达- 代码复现通过云课&#xff0c;会非常快捷。 视频 云课五分钟-02第一个代码复现-终端甜甜圈C 文本 如何使用g 使用g编译和链接C程序的基本步骤如下&#xff1a; 编写源代码&#xff1a;首先&#xff0c;你需要编写C源代码&…
阅读更多...
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 …
阅读更多...
【C#学习】串口编程

【C#学习】串口编程

文章目录 第一步&#xff1a;加入串口控件第二步&#xff1a;加入模块第三步&#xff1a;编写相关函数功能获取所有串口资源设置和打开关闭串口发送字符串&#xff08;string&#xff09;发送byte检查串口状态接受byte查询所有可用串口 第一步&#xff1a;加入串口控件 第二步&…
阅读更多...
Elasticsearch7 入门 进阶

Elasticsearch7 入门 进阶

1、全文检索 1.1、数据分类 按数据分类的话&#xff0c;主要可以分为以下三类&#xff1a; 结构化数据&#xff1a;固定格式、有限长度&#xff0c;比如mysql存的数据非结构化数据&#xff1a;不定长、无固定格式&#xff0c;比如邮件、Word文档、日志等半结构化数据&#xf…
阅读更多...
Git 工作流程、工作区、暂存区和版本库

Git 工作流程、工作区、暂存区和版本库

目录 Git 工作流程 Git 工作区、暂存区和版本库 基本概念 Git 工作流程 本章节我们将为大家介绍 Git 的工作流程。 一般工作流程如下&#xff1a; 克隆 Git 资源作为工作目录。在克隆的资源上添加或修改文件。 如果其他人修改了&#xff0c;你可以更新资源。在提交前查看…
阅读更多...
最新文章

Copyright @ 2022~2023