【React】React学习：从初级到高级（三）

3 状态管理

随着应用不断变大，应该更有意识的去关注应用状态如何组织，以及数据如何在组件之间流动。冗余或重复的状态往往是缺陷的根源。

3.1 用State响应输入

3.1.1 声明式地考虑UI

总体步骤如下：

  1. 定位组件中不同的视图状态

  2. 确定是什么触发了这些 state 的改变

    • 人为输入，人为输入一般需要事件处理函数
    • 计算机输入

  3. 表示内存中的 state（需要使用 useState）

    • 需要让“变化的部分”尽可能的少，可以先从必须的状态开始
    • 刚开始若不确定可以设置多一些视图状态，之后不断尝试重构state

  4. 删除任何不必要的 state 变量

    • 这个 state 是否会导致矛盾？

    • 相同的信息是否已经在另一个 state 变量中存在？

    • 你是否可以通过另一个 state 变量的相反值得到相同的信息？

      Reducer 可以合并多个状态变量到一个对象中并巩固所有相关的逻辑！

  5. 连接事件处理函数去设置 state

    • 创建事件处理函数去设置 state 变量。

同时展示大量的视图状态，这样的页面通常被称作living styleguide或者storybook

挑战：这个表单在两种模式间切换：编辑模式，你可以看到输入框；查看模式，你只能看到结果。按钮的标签会根据你所处的模式在“编辑”和“保存”两者中切换。当你改变输入框的内容时，欢迎信息会最下面实时更新。

import {useState} from 'react';export default function EditProfile() {const [display, setDisplay] = useState(false);const [person, setPerson] = useState({firstName: 'Joe',lastName: 'Stan'});function handleFirstNameChange(e) {setPerson({...person,[e.target.name]: e.target.value})}function handleLastNameChange(e) {setPerson({...person,[e.target.name]: e.target.value})}return (<form onSubmit={e => {e.preventDefault(),setDisplay(!display)}}><label>First name:{' '}{display ? <input name="firstName"value={person.firstName}onChange={handleFirstNameChange} /> :<b>{person.firstName}</b>}</label><label>Last name:{' '}{display ? <input name="lastName" value={person.lastName}onChange={handleLastNameChange} /> :<b>{person.lastName}</b>}</label><button type="submit">{display ? 'Save' : 'Edit'} Profile</button><p><i>Hello, {person.firstName} {person.lastName}!</i></p></form>);
}

updateDOM函数展示了当你设置 state 时，React 在幕后都做了什么.

// index.js
let firstName = 'Jane';
let lastName = 'Jacobs';
let isEditing = false;function handleFormSubmit(e) {e.preventDefault();setIsEditing(!isEditing);
}function handleFirstNameChange(e) {setFirstName(e.target.value);
}function handleLastNameChange(e) {setLastName(e.target.value);
}function setFirstName(value) {firstName = value;updateDOM();
}function setLastName(value) {lastName = value;updateDOM();
}function setIsEditing(value) {isEditing = value;updateDOM();
}function updateDOM() {if (isEditing) {editButton.textContent = 'Save Profile';hide(firstNameText);hide(lastNameText);show(firstNameInput);show(lastNameInput);} else {editButton.textContent = 'Edit Profile';hide(firstNameInput);hide(lastNameInput);show(firstNameText);show(lastNameText);}firstNameText.textContent = firstName;lastNameText.textContent = lastName;helloText.textContent = ('Hello ' +firstName + ' ' +lastName + '!');
}function hide(el) {el.style.display = 'none';
}function show(el) {el.style.display = '';
}let form = document.getElementById('form');
let editButton = document.getElementById('editButton');
let firstNameInput = document.getElementById('firstNameInput');
let firstNameText = document.getElementById('firstNameText');
let lastNameInput = document.getElementById('lastNameInput');
let lastNameText = document.getElementById('lastNameText');
let helloText = document.getElementById('helloText');
form.onsubmit = handleFormSubmit;
firstNameInput.oninput = handleFirstNameChange;
lastNameInput.oninput = handleLastNameChange;
/* index.html */
<form id="form"><label>First name:<b id="firstNameText">Jane</b><inputid="firstNameInput"value="Jane"style="display: none"></label><label>Last name:<b id="lastNameText">Jacobs</b><inputid="lastNameInput"value="Jacobs"style="display: none"></label><button type="submit" id="editButton">Edit Profile</button><p><i id="helloText">Hello, Jane Jacobs!</i></p>
</form><style>
* { box-sizing: border-box; }
body { font-family: sans-serif; margin: 20px; padding: 0; }
label { display: block; margin-bottom: 20px; }
</style>

3.2 选择state结构

3.1.1 构建state的原则

  • 合并关联的 state

    • 如果某两个 state 变量总是一起变化，则将它们统一成一个 state 变量可能更好
    • 另一种情况是，将数据整合到一个对象或一个数组中时，不知道需要多少个 state 片段

  • 避免互相矛盾的 state

  • 避免冗余的 state

    • “镜像”一些 prop 属性会导致混淆，建议使用常量

      function Message({ messageColor }) {const color = messageColor;

      只有当想要 忽略特定 props 属性的所有更新时，将 props “镜像”到 state 才有意义。按照惯例，prop 名称以 initial 或 default 开头，以阐明该 prop 的新值将被忽略：

      function Message({ initialColor }) {// 这个 `color` state 变量用于保存 `initialColor` 的 **初始值**。// 对于 `initialColor` 属性的进一步更改将被忽略。const [color, setColor] = useState(initialColor);

  • 避免重复的 state

  • 避免深度嵌套的 state

3.3 在组件间共享状态（状态提升）

当编写一个组件时，你应该考虑哪些信息应该由父组件控制（通过传递 props），哪些信息应该由内部state控制（通过 state）。

进行状态提升的步骤：

  1. 从子组件中 移除 state 。
  2. 从父组件 传递 props。
  3. 为子组件的共同父组件添加 state ，并将其与事件处理函数一起向下传递

3.4 对state进行保留和重置

React 使用树形结构来对开发者创造的 UI 进行管理和建模。

在这里插入图片描述

3.4.1 state与树中的某个位置相关联

根据组件在 UI 树中的位置，React 将它所持有的每个 state 与正确的组件关联起来。 React 在移除一个组件时，也会销毁它的 state。下面是一个组件的添加与删除。

在这里插入图片描述
在这里插入图片描述

只要一个组件还被渲染在 UI 树的相同位置，React 就会保留它的 state。 如果它被移除，或者一个不同的组件被渲染在相同的位置，那么 React 就会丢掉它的 state。

3.4.2 相同位置的相同组件会保留state

更新 App 的状态不会重置 Counter，因为 Counter 始终保持在同一位置。

import { useState } from 'react';export default function App() {const [isFancy, setIsFancy] = useState(false);return (<div>{isFancy ? (<Counter isFancy={true} /> ) : (<Counter isFancy={false} /> )}<label><inputtype="checkbox"checked={isFancy}onChange={e => {setIsFancy(e.target.checked)}}/>使用好看的样式</label></div>);
}function Counter({ isFancy }) {const [score, setScore] = useState(0);const [hover, setHover] = useState(false);let className = 'counter';if (hover) {className += ' hover';}if (isFancy) {className += ' fancy';}return (<divclassName={className}onPointerEnter={() => setHover(true)}onPointerLeave={() => setHover(false)}><h1>{score}</h1><button onClick={() => setScore(score + 1)}>加一</button></div>);
}

在这里插入图片描述

对 React 来说重要的是组件在 UI 树中的位置,而不是在 JSX 中的位置！

3.4.3 相同位置的不同组件会重置state

import { useState } from 'react';export default function App() {const [isPaused, setIsPaused] = useState(false);return (<div>{isPaused ? (<p>待会见！</p> ) : (<Counter /> )}<label><inputtype="checkbox"checked={isPaused}onChange={e => {setIsPaused(e.target.checked)}}/>休息一下</label></div>);
}function Counter() {const [score, setScore] = useState(0);const [hover, setHover] = useState(false);let className = 'counter';if (hover) {className += ' hover';}return (<divclassName={className}onPointerEnter={() => setHover(true)}onPointerLeave={() => setHover(false)}><h1>{score}</h1><button onClick={() => setScore(score + 1)}>加一</button></div>);
}

在这里插入图片描述

当 Counter 变为 p 时，Counter 会被移除，同时 p 被添加。

在这里插入图片描述

当切换回来时，p 会被删除，而 Counter 会被添加。

刚开始 <div> 的第一个子组件是一个 Counter。但是当切换成 p 时，React 将 Counter 从 UI 树中移除了并销毁了它的状态。

当在相同位置渲染不同的组件时，组件的整个子树都会被重置

在这里插入图片描述

当 section 变为 div 时，section 会被删除，新的 div 被添加

在这里插入图片描述

当切换回来时，div 会被删除，新的 section 被添加。

如果想在重新渲染时保留 state，几次渲染中的树形结构就应该相互“匹配”。

3.4.4 在相同位置重置相同组件的state

  • 方法1：将组件渲染在不同位置(适用于只有少数几个组件)

在这里插入图片描述

  • 方法2：使用key赋予每个组件一个明确的身份

    {isPlayerA ? (<Counter key="Taylor" person="Taylor" />
) : (<Counter key="Sarah" person="Sarah" />
)}

    请记住 key 不是全局唯一的。它们只能指定 父组件内部 的顺序。

3.4.5 使用key重置表单

给Chat组件添加一个 key,就可以保证每次选择一个不同的收件人时，Chat组件包括其下方树中的state就会被重新创建。

<Chat key={to.id} contact={to} />

3.4.6 为被移除的组件保留state

比如聊天应用

  • 如果UI比较简单，就可以使用CSS把其他聊天隐藏起来
  • 进行状态提升，让父组件保存信息
  • 使用其他数据源

3.5 迁移状态逻辑至Reducer中

3.5.1 使用reducer整合状态逻辑

Reducer 是处理状态的另一种方式。你可以通过三个步骤将 useState 迁移到 useReducer：

  1. 将设置状态的逻辑 修改 成 dispatch 的一个 action；

    比如下面这段代码：

    function handleAddTask(text) {setTasks([...tasks,{id: nextId++,text: text,done: false,},]);
}function handleChangeTask(task) {setTasks(tasks.map((t) => {if (t.id === task.id) {return task;} else {return t;}}));
}function handleDeleteTask(taskId) {setTasks(tasks.filter((t) => t.id !== taskId));
}

    移除所有状态设置逻辑，只留下三个事件处理函数。通过事件处理函数 dispatch 一个 action来指明 “用户刚刚做了什么”。（状态更新逻辑则保存在其他地方！)，修改后的代码如下:

    function handleAddTask(text) {dispatch(// action 对象{type: 'added',id: nextId++,text: text,});
}function handleChangeTask(task) {dispatch({type: 'changed',task: task,});
}function handleDeleteTask(taskId) {dispatch({type: 'deleted',id: taskId,});
}

    action 对象可以有多种结构。

    按照惯例，通常会添加一个字符串类型的 type 字段来描述发生了什么，并通过其它字段传递额外的信息。type 是特定于组件的，在这个例子中 added 和 addded_task 都可以。选一个能描述清楚发生的事件的名字！

    dispatch({// 针对特定的组件type: 'what_happened',// 其它字段放这里
});

  2. 编写 一个 reducer 函数；

    reducer 函数就是你放置状态逻辑的地方。它接受两个参数，分别为当前 state 和 action 对象，并且返回的是更新后的 state:

    function yourReducer(state, action) {// 给 React 返回更新后的状态
}

    在这个例子中，要将状态设置逻辑从事件处理程序移到 reducer 函数中，你需要：

    1. 声明当前状态（tasks）作为第一个参数；
    2. 声明 action 对象作为第二个参数；
    3. 从 reducer 返回 下一个 状态（React 会将旧的状态设置为这个最新的状态）。
    function tasksReducer(tasks, action) {if (action.type === 'added') {return [...tasks,{id: action.id,text: action.text,done: false,},];} else if (action.type === 'changed') {return tasks.map((t) => {if (t.id === action.task.id) {return action.task;} else {return t;}});} else if (action.type === 'deleted') {return tasks.filter((t) => t.id !== action.id);} else {throw Error('未知 action: ' + action.type);}
}

    上面语句用了if/else语句，但在reducers中使用switch语句更加一目了然：

    function tasksReducer(tasks, action) {switch (action.type) {case 'added': {return [...tasks,{id: action.id,text: action.text,done: false,},];}case 'changed': {return tasks.map((t) => {if (t.id === action.task.id) {return action.task;} else {return t;}});}case 'deleted': {return tasks.filter((t) => t.id !== action.id);}default: {throw Error('未知 action: ' + action.type);}}
}

  3. 在组件中 使用 reducer。

事件处理程序只通过派发 action 来指定 发生了什么，而 reducer 函数通过响应 actions 来决定 状态如何更新。

3.5.2 对比useState和useReducer

  • 代码体积：UI组件少可以用useState,组件复杂用useReducer
  • 可读性：依据状态更新逻辑复杂程度而定，简单时useState，复杂时useReducer
  • 可调试性：useReducer更佳，可以通过打印日志来调试
  • 可测试性：reducer函数是一个纯函数，可以单独进行测试

3.5.3 编写一个好的reducer函数

  • reducer必须是一个纯函数
  • 每个action都描述了一个单一的用户交互，即便它会引发多个数据的变化

3.5.4 使用Immer简化reducers

引入useImmerReducer:

import { useImmerReducer } from 'use-immer';

使用draft.函数修改state:

function tasksReducer(draft, action) {switch (action.type) {case 'added': {draft.push({id: action.id,text: action.text,done: false,});break;}case 'changed': {const index = draft.findIndex((t) => t.id === action.task.id);draft[index] = action.task;break;}case 'deleted': {return draft.filter((t) => t.id !== action.id);}default: {throw Error('未知 action：' + action.type);}}
}

3.6 使用Context深层传递参数

Context 允许父组件向其下层无论多深的任何组件提供信息，而无需通过 props 显式传递。

  1. 创建context

    // LevelContext.js
import { createContext } from 'react';export const LevelContext = createContext(1);

  2. 使用context

    import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';export default function Heading({ children }) {const level = useContext(LevelContext);// ...
}

  3. 提供context

    用 context provider 包裹起来 以提供 LevelContext 给它们：

    import { LevelContext } from './LevelContext.js';export default function Section({ level, children }) {return (<section className="section"><LevelContext.Provider value={level}>{children}</LevelContext.Provider></section>);
}

Context 让你可以编写“适应周围环境”的组件，并且根据在哪 （或者说 在哪个 context 中）来渲染它们不同的样子。不同的 React context 不会覆盖彼此。Context 会穿过中间的任何组件。

3.6.1 context的使用场景

  • 主题： 如果你的应用允许用户更改其外观（例如暗夜模式），你可以在应用顶层放一个 context provider，并在需要调整其外观的组件中使用该 context。
  • 当前账户： 许多组件可能需要知道当前登录的用户信息。将它放到 context 中可以方便地在树中的任何位置读取它。
  • 路由： 大多数路由解决方案在其内部使用 context 来保存当前路由。
  • **状态管理：**通常 将 reducer 与 context 搭配使用来管理复杂的状态并将其传递给深层的组件来避免过多的麻烦。

3.7 使用Reducer和Context拓展应用

步骤：

  1. 创建 context。
  2. 将 state 和 dispatch 放入 context。
  3. 在组件树的任何地方 使用 context。

为子组件提供 state 和 dispatch 函数：

  1. 创建两个 context (一个用于 state,一个用于 dispatch 函数)。

    import { createContext } from 'react';export const TasksContext = createContext(null);
export const TasksDispatchContext = createContext(null);

  2. 让组件的 context 使用 reducer。

    export function TasksProvider({ children }) {const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);return (<TasksContext.Provider value={tasks}><TasksDispatchContext.Provider value={dispatch}>{children}</TasksDispatchContext.Provider></TasksContext.Provider>);
}
// 也可以从 TasksContext.js 中导出使用 context 的函数：
export function useTasks() {return useContext(TasksContext);
}export function useTasksDispatch() {return useContext(TasksDispatchContext);
}

  3. 使用组件中需要读取的 context。

    // 组件可以通过以下函数读取 context：
const tasks = useTasks();
const dispatch = useTasksDispatch();

像 useTasks 和 useTasksDispatch 这样的函数被称为自定义 Hook， 如果你的函数名以 use 开头，它就被认为是一个自定义 Hook。

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

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

相关文章

C++零碎记录（四）

C++零碎记录（四）

6. 深拷贝与浅拷贝 ① 浅拷贝&#xff1a;简单的赋值拷贝操作。 ② 深拷贝&#xff1a;在堆区重新申请空间&#xff0c;进行拷贝操作。 ③ 浅拷贝&#xff0c;如下图所示&#xff0c;带来的问题就是堆区的内存重复释放。 ④ 深拷贝&#xff0c;如下图所示&#xff0c;在堆区…
阅读更多...
深度学习-4-二维目标检测-YOLOv5源码测试与训练

深度学习-4-二维目标检测-YOLOv5源码测试与训练

本文采用的YOLOv5源码是ultralytics发行版3.1 YOLOv5源码测试与训练 1.Anaconda环境配置 1.1安装Anaconda Anaconda 是一个用于科学计算的 Python 发行版&#xff0c;支持 Linux, Mac, Windows, 包含了众多流行的科学计算、数据分析的 Python 包。 官方网址下载安装包&…
阅读更多...
pdf怎么编辑文字？了解一下这几种编辑方法

pdf怎么编辑文字？了解一下这几种编辑方法

pdf怎么编辑文字&#xff1f;PDF文件的普及使得它成为了一个重要的文件格式。然而&#xff0c;由于PDF文件的特性&#xff0c;它们不可直接编辑&#xff0c;这就使得PDF文件的修改变得比较麻烦。但是&#xff0c;不用担心&#xff0c;接下来这篇文章就给大家介绍几种编辑pdf文字…
阅读更多...
go语言基本操作---三

go语言基本操作---三

变量的内存和变量的地址 指针是一个代表着某个内存地址的值。这个内存地址往往是在内存中存储的另一个变量的值的起始位置。Go语言对指针的支持介于java语言和C/C语言之间&#xff0c;它即没有想Java语言那样取消了代码对指针的直接操作的能力&#xff0c;也避免了C/C语言中由…
阅读更多...
Redis面试题(笔记)

Redis面试题(笔记)

目录 1.缓存穿透 2.缓存击穿 3.缓存雪崩 小结 4.缓存-双写一致性 5.缓存-持久性 6.缓存-数据过期策略 7.缓存-数据淘汰策略 数据淘汰策略-使用建议 数据淘汰策略总结 8.redis分布式锁 setnx redission 主从一致性 9.主从复制、主从同步 10.哨兵模式 服务状态监…
阅读更多...
最快1个月录用！9月SCI/SSCI/EI刊源表已更新！

最快1个月录用！9月SCI/SSCI/EI刊源表已更新！

2023年9月SCI/SSCI/EI期刊目录更新 2023年9月份刊源表已更新&#xff01;计算机、医学、工程、环境、SSCI均有新增期刊&#xff0c;1区(TOP)&#xff0c;最快1个月录用&#xff0c;好刊版面紧俏&#xff0c;切莫错失机会&#xff01; 01 计算机领域 02 医学与制药领域 03 工…
阅读更多...
桌面应用小程序，一种创新的跨端开发方案

桌面应用小程序，一种创新的跨端开发方案

Qt Group在提及2023年有桌面端应用程序开发热门趋势时&#xff0c;曾经提及三点&#xff1a; 关注用户体验&#xff1a;无论您是为桌面端、移动端&#xff0c;还是为两者一起开发应用程序&#xff0c;有一点是可以确定的&#xff1a;随着市场竞争日益激烈&#xff0c;对产品的期…
阅读更多...
Python爬取天气数据并进行分析与预测

Python爬取天气数据并进行分析与预测

随着全球气候的不断变化&#xff0c;对于天气数据的获取、分析和预测显得越来越重要。本文将介绍如何使用Python编写一个简单而强大的天气数据爬虫&#xff0c;并结合相关库实现对历史和当前天气数据进行分析以及未来趋势预测。 1 、数据源选择 选择可靠丰富的公开API或网站作…
阅读更多...
电子科大软件系统架构设计——面向对象建模基础

电子科大软件系统架构设计——面向对象建模基础

文章目录 面向对象建模基础UML建模语言UML模型图用例图活动图类图顺序图通信图状态机图构件图部署图包图对象图组合结构图扩展图交互概览图时间图 BPMN建模语言业务建模定义模型元素流对象活动事件网关 流数据人工制品泳池和泳道 建模案例订单采购流程建模电商系统订货业务流程…
阅读更多...
搭建最简单的SpringBoot项目

搭建最简单的SpringBoot项目

1、创建maven项目 2、引入父pom <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.7.15</version> </parent> 3、引入springboot-web依赖 <dependency…
阅读更多...
React【React是什么？、创建项目 、React组件化、 JSX语法、条件渲染、列表渲染、事件处理】(一)

React【React是什么？、创建项目 、React组件化、 JSX语法、条件渲染、列表渲染、事件处理】(一)

文章目录 React是什么&#xff1f; 为什么要学习React React开发前准备 创建React项目 React项目结构简介 React组件化 初识JSX 渲染JSX描述的页面 JSX语法 JSX的Class与Style属性 JSX生成的React元素 条件渲染&#xff08;一&#xff09; 条件渲染 &#xff0…
阅读更多...
系统架构技能之设计模式-工厂模式

系统架构技能之设计模式-工厂模式

一、开篇 本文主要是讲述设计模式中最经典的创建型模式-工厂模式&#xff0c;本文将会从以下几点对工厂模式进行阐述。 本文将会从上面的四个方面进行详细的讲解和说明&#xff0c;当然会的朋友可以之处我的不足之处&#xff0c;不会的朋友也请我们能够相互学习讨论。 二、摘…
阅读更多...
Java后端开发面试题——企业场景篇

Java后端开发面试题——企业场景篇

单点登录这块怎么实现的 单点登录的英文名叫做&#xff1a;Single Sign On&#xff08;简称SSO&#xff09;,只需要登录一次&#xff0c;就可以访问所有信任的应用系统 JWT解决单点登录 用户访问其他系统&#xff0c;会在网关判断token是否有效 如果token无效则会返回401&am…
阅读更多...
C#循环定时上传数据，失败重传解决方案，数据库标识

C#循环定时上传数据，失败重传解决方案，数据库标识

有些时候我们需要定时的上传一些数据库的数据&#xff0c;在数据不完整的情况下可能上传失败&#xff0c;上传失败后我们需要定时在重新上传失败的数据&#xff0c;该怎么合理的制定解决方案呢&#xff1f;下面一起看一下&#xff1a; 当然本篇文章只是提供一个思路&#xff0…
阅读更多...
SAP-PP:基础概念笔记-5（物料主数据的MRP1~4视图）

SAP-PP:基础概念笔记-5（物料主数据的MRP1~4视图）

文章目录 前言一、MRP1视图Base Unit of Measure&#xff08;UoM&#xff09;MRP 组采购组ABC 指示器Plant-Specific Material Status 特定的工厂物料状态MRP 类型 MRP TypeMRP 类型 MRP TypeMaster Production Scheduling(MPS) 主生产计划基于消耗的计划(CBP)再订货点Reorder-…
阅读更多...
uni-app点击复制指定内容（点击复制）

uni-app点击复制指定内容（点击复制）

官方api uni.setClipboardData(OBJECT) uni.setClipboardData({data: 要被复制的内容,success: function () {console.log(success);} });
阅读更多...
Liquid UI和Fiori的区别

Liquid UI和Fiori的区别

主要围绕以下几个方面就Liquid UI和Firor来进行比较&#xff1a; 开发周期开发成本稳定性和支援性平台架构 影响Firor决策的因素&#xff1a; 复杂的编程过程&#xff0c;Fiori对开发人员要求高&#xff0c;开发难度大&#xff0c;而Liquid UI让开发人员不需要懂SAP后端&…
阅读更多...
yolov5运行过程遇到的小问题（随时更新）

yolov5运行过程遇到的小问题（随时更新）

1.关于git的问题 解决办法&#xff1a;插入下面代码 import os os.environ["GIT_PYTHON_REFRESH"] "quiet"2.页面太小无法完成操作 解决办法: 如果不好使再考虑降低Batch_Size大小或者调整虚拟内存可用硬盘空间大小&#xff01;&#xff08;调整虚拟内存…
阅读更多...
整理mongodb文档:分页

整理mongodb文档:分页

个人博客 整理mongodb文档:分页 个人博客&#xff0c;求关注&#xff0c;如果文章不够清晰&#xff0c;麻烦指出。 文章概叙 本文主要讲下在聚合以及crud的find方法中如何使用limit还有skip进行排序。 分页的情况很经常出现&#xff0c;这也是这篇博客诞生的理由。 数据准备…
阅读更多...
Vue组件之间传值

Vue组件之间传值

聊一聊vue里面组件之间的传值 首先总结一下vue里面传值的几种关系&#xff1a; 如上图所示, A与B、A与C、B与D、C与F组件之间是父子关系&#xff1b; B与C之间是兄弟关系&#xff1b;A与D、A与E之间是隔代关系&#xff1b; D与F是堂兄关系&#xff0c;针对以上关系 我们把组件…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023