<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[我本可以]]></title><description><![CDATA[是曾迷失，而今归途。]]></description><link>https://blog.youkuaiyun.com/wangfeijiu</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; wangfeijiu]]></copyright><item><title><![CDATA[你真的知道useCallBack怎么用吗?]]></title><link>https://blog.youkuaiyun.com/wangfeijiu/article/details/139580104</link><guid>https://blog.youkuaiyun.com/wangfeijiu/article/details/139580104</guid><author>wangfeijiu</author><pubDate>Tue, 11 Jun 2024 10:53:54 +0800</pubDate><description><![CDATA[而父组件重新构建的时候，会重新构建父组件中的所有函数（旧函数销毁，新函数创建，等于更新了函数地址），新的函数地址传入到子组件中被。的本质工作不是在依赖不变的情况下阻止函数创建，而是在依赖不变的情况下不返回新的函数地址而返回旧的函数地址。但这里的问题是，你要传个其他变量进去这也就走的通了，但是传入的是函数，会重新渲染。并不能阻止函数重新创建,它只能通过依赖决定返回新的函数还是旧的函数,从而在依赖不变的情况下保证函数地址不变。的作用不是阻止函数创建，而是在依赖不变的情况下返回旧函数地址（保持地址不变）。]]></description><category></category></item><item><title><![CDATA[前端路由 SPA MPA SSR]]></title><link>https://blog.youkuaiyun.com/wangfeijiu/article/details/138381023</link><guid>https://blog.youkuaiyun.com/wangfeijiu/article/details/138381023</guid><author>wangfeijiu</author><pubDate>Wed, 01 May 2024 22:46:47 +0800</pubDate><description><![CDATA[在传统的多页应用中，每个页面都是由服务器返回的独立 HTML 页面。用户在浏览网站时，通过点击链接或提交表单等操作，会向服务器发送请求，服务器返回相应的 HTML 页面，然后浏览器加载并显示该页面。

而在前端路由中，整个应用通常只有一个 HTML 页面，称为单页应用（Single-Page Application，SPA）。当用户与应用交互时，不再向服务器请求新的页面，而是通过前端 JavaScript 代码动态地切换和更新页面的内容。]]></description><category></category></item><item><title><![CDATA[优化浏览器主线程执行的几个API，着重讲解 requestIdleCallback 与 requestAnimationFrame]]></title><link>https://blog.youkuaiyun.com/wangfeijiu/article/details/137948341</link><guid>https://blog.youkuaiyun.com/wangfeijiu/article/details/137948341</guid><author>wangfeijiu</author><pubDate>Mon, 22 Apr 2024 12:05:56 +0800</pubDate><description><![CDATA[为了提高浏览器的性能和用户体验，现代浏览器采用了一些技术来优化主线程的执行。本文将提供浏览器因JS耗时任务导致页面卡顿的部分解决方案。
  - `setTimeout` 延迟加载  （使用不当可能适得其反）
 - `web worker` 多线程 （不能操作dom，主要计算密集型的任务）
 - `requestIdleCallback` 帧空闲时运行 （react18带🔥的，低优先级任务）
 - `requestAnimationFrame` 每帧都会运行 （主要做动画效果调优）]]></description><category></category></item><item><title><![CDATA[UmiJS基础&UmiJS+Dva]]></title><link>https://blog.youkuaiyun.com/wangfeijiu/article/details/114914712</link><guid>https://blog.youkuaiyun.com/wangfeijiu/article/details/114914712</guid><author>wangfeijiu</author><pubDate>Sat, 20 Mar 2021 23:18:05 +0800</pubDate><description><![CDATA[Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。你可以将它简单的理解为一个专注性能的类 next.js 前端框架，并通过约定、自动生成和解析代码等方式来辅助开发，减少我们开发者的代码量。]]></description><category></category></item><item><title><![CDATA[DvaJS学习（dva = React-Router + Redux + Redux-saga）]]></title><link>https://blog.youkuaiyun.com/wangfeijiu/article/details/114756439</link><guid>https://blog.youkuaiyun.com/wangfeijiu/article/details/114756439</guid><author>wangfeijiu</author><pubDate>Wed, 17 Mar 2021 05:22:19 +0800</pubDate><description><![CDATA[dva 是体验技术部开发的 React 应用框架，将上面三个 React 工具库包装在一起，简化了 API，让开发 React 应用更加方便和快捷。
dva = React-Router + Redux + Redux-saga

数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 通过serve]]></description><category></category></item><item><title><![CDATA[redux-saga学习]]></title><link>https://blog.youkuaiyun.com/wangfeijiu/article/details/114764838</link><guid>https://blog.youkuaiyun.com/wangfeijiu/article/details/114764838</guid><author>wangfeijiu</author><pubDate>Tue, 16 Mar 2021 00:50:33 +0800</pubDate><description><![CDATA[如果redux需要用到 side effect 异步操作,redux-thunk 和 redux-saga 绝对是目前两个最受欢迎的中间件插件。

redux-saga是一个用于管理redux应用异步操作的中间件，redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理，可以用来代替redux-thunk中间件。]]></description><category></category></item><item><title><![CDATA[MockJs学习&React+Axios+MockJs实战例子]]></title><link>https://blog.youkuaiyun.com/wangfeijiu/article/details/114681010</link><guid>https://blog.youkuaiyun.com/wangfeijiu/article/details/114681010</guid><author>wangfeijiu</author><pubDate>Sat, 13 Mar 2021 05:24:59 +0800</pubDate><description><![CDATA[MockJs可以生成随机数据，拦截 Ajax 请求。

Mock.js 的语法规范包括两部分：
- 数据模板定义规范（Data Template Definition，DTD）
- 数据占位符定义规范（Data Placeholder Definition，DPD）

Mock.mock( rURL, function( options ) )当拦截到匹配 rurl 的请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。]]></description><category></category></item><item><title><![CDATA[React Hook学习]]></title><link>https://blog.youkuaiyun.com/wangfeijiu/article/details/114616769</link><guid>https://blog.youkuaiyun.com/wangfeijiu/article/details/114616769</guid><author>wangfeijiu</author><pubDate>Thu, 11 Mar 2021 04:58:05 +0800</pubDate><description><![CDATA[Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
Hook 是一些可以让你在函数组件里“钩入”(hook) React state 及生命周期等特性的函数。Hook 在 class 内部是不起作用的。
Hooks的出现是为了解决 React 长久以来存在的一些问题：

- 在组件之间复用状态逻辑很难
- 复杂组件变得难以理解
- 难以理解的 class]]></description><category></category></item><item><title><![CDATA[React Context 上下文对象]]></title><link>https://blog.youkuaiyun.com/wangfeijiu/article/details/114621030</link><guid>https://blog.youkuaiyun.com/wangfeijiu/article/details/114621030</guid><author>wangfeijiu</author><pubDate>Wed, 10 Mar 2021 23:45:42 +0800</pubDate><description><![CDATA[Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言。

Context 通过组件树提供了新的传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。]]></description><category></category></item><item><title><![CDATA[React Diff算法]]></title><link>https://blog.youkuaiyun.com/wangfeijiu/article/details/114558030</link><guid>https://blog.youkuaiyun.com/wangfeijiu/article/details/114558030</guid><author>wangfeijiu</author><pubDate>Tue, 09 Mar 2021 06:19:16 +0800</pubDate><description><![CDATA[- Tree Diff：采用分层求异的策略，将新旧两棵DOM树按照层级对应的关系进行对比，这样只需要对树进行一次遍历，就能够找到哪些元素是需要更新的。
- Component Diff：查看两个组件的类型是否相同。如果类型不同，则需要更新，更新时先把旧的组件删除，再创建一个新的组件插入之前删除的位置。类型相同时，暂时不需要更新。
- Element Diff：通过设置唯一key值，对元素diff进行优化。（组件类型相同时看内部元素）元素发生了改变，则找到需要修改的元素，有针对性进行修改。]]></description><category></category></item><item><title><![CDATA[React Router新版本入门学习]]></title><link>https://blog.youkuaiyun.com/wangfeijiu/article/details/114433273</link><guid>https://blog.youkuaiyun.com/wangfeijiu/article/details/114433273</guid><author>wangfeijiu</author><pubDate>Mon, 08 Mar 2021 23:02:17 +0800</pubDate><description><![CDATA[近几年单页应用（Single Page Web Application，SPA）发展迅猛，前端控制路由变为主流，单页应用也是前端路由的主要使用场景。

react-router是React中用来实现路由的第三方JavaScript库，也是基于React开发的。它拥有简单API和强大的路由处理机制，如代码缓冲加载、动态路由匹配，以及建立正确的位置过渡处理。它可以快速地在应用中添加视图和数据流，保持页面展示内容和URL的同步。]]></description><category></category></item><item><title><![CDATA[Redux学习 & React+Redux实战（connect方法各个参数解读）]]></title><link>https://blog.youkuaiyun.com/wangfeijiu/article/details/113977958</link><guid>https://blog.youkuaiyun.com/wangfeijiu/article/details/113977958</guid><author>wangfeijiu</author><pubDate>Sat, 06 Mar 2021 07:10:37 +0800</pubDate><description><![CDATA[Redux 是 JavaScript 应用程序的状态容器，提供可预测的状态管理。
在Redux中，所有的数据（比如`state`）都是保存在`store`的容器中，一个应用也只能有一个store容器。`store`本质是一个状态树，保存了所有对象的状态。任何UI组件都可以直接通过`store`访问特定对象的状态。

要想更改对象的状态，需要分发一个`action`-- (`store.dispatch(action)`)。分发在这里意味着将可执行信息发送到`store`。当一个`store`接收到一个`ac]]></description><category></category></item><item><title><![CDATA[简单了解 前端构架模式MVC与MVVM]]></title><link>https://blog.youkuaiyun.com/wangfeijiu/article/details/114298330</link><guid>https://blog.youkuaiyun.com/wangfeijiu/article/details/114298330</guid><author>wangfeijiu</author><pubDate>Wed, 03 Mar 2021 07:27:17 +0800</pubDate><description><![CDATA[MVC（Model View Controller），是Model（模型）－View（视图）－Controller（控制器）的缩写。MVC不是框架，不是设计模式，也不是软件架构，而是一种架构模式。MVC的出现是为了让应用的业务逻辑、数据和界面显示分离的方法来组织代码。

Model-View-ViewModel的缩写，而本质上还是MVC的改进版。其设计思想是关注Model变化，让MVVM框架去自动更新DOM。MVVM要求View不能和Model直接通信。]]></description><category></category></item><item><title><![CDATA[React组件全方位学习]]></title><link>https://blog.youkuaiyun.com/wangfeijiu/article/details/113931123</link><guid>https://blog.youkuaiyun.com/wangfeijiu/article/details/113931123</guid><author>wangfeijiu</author><pubDate>Tue, 02 Mar 2021 12:18:48 +0800</pubDate><description><![CDATA[在React中，组件是应用程序的基石，页面中所有的界面和功能都是由组件堆积而成的。合理的组件设计有利于降低系统各个功能的耦合性，并提高功能内部的聚合性。

在React中，可以使用花括号{}把JavaScript表达式放入其中运行，放入{}中的代码会被当作JavaScript代码进行处理。

在React中，数据流是单向流动的，从父节点向子节点传递（自上而下）。]]></description><category></category></item><item><title><![CDATA[React事件处理——为什么React事件处理函数需要手动绑定this？手动绑定this方法有几种？]]></title><link>https://blog.youkuaiyun.com/wangfeijiu/article/details/114198965</link><guid>https://blog.youkuaiyun.com/wangfeijiu/article/details/114198965</guid><author>wangfeijiu</author><pubDate>Sun, 28 Feb 2021 14:28:37 +0800</pubDate><description><![CDATA[`onClick: this.handleClick`，相当于`onClick = {function}`，`onClick`是一个"中间变量"，用来接收`this.handleClick`的函数体，也就是说`this.handleClick`作为一个回调函数传给另一个函数（点击事件处理函数）调用，这样会造成回调函数中的隐式丢失。]]></description><category></category></item><item><title><![CDATA[React入门学习]]></title><link>https://blog.youkuaiyun.com/wangfeijiu/article/details/113867996</link><guid>https://blog.youkuaiyun.com/wangfeijiu/article/details/113867996</guid><author>wangfeijiu</author><pubDate>Mon, 22 Feb 2021 21:53:51 +0800</pubDate><description><![CDATA[用于构建用户界面的 JavaScript 库,React不是一个MVC框架，而是一个用于构建组件化UI的库，是一个前端界面开发工具


React源于Facebook内部PHP框架XHP的一个分支，在每次有请求进入时会渲染整个页面。而React的出现就是为了把这种重新渲染整个页面的PHP式工作流，带入客户端应用，在使用React构建用户界面时，只需定义一次，就能将其复用在其他多个地方。当状态改变时，无须做出任何操作，它会自动、高效地更新界面。从此开发人员只需要关心维护应用内的状态，而不需要再关注DOM节点.]]></description><category></category></item><item><title><![CDATA[一文搞懂MySQL事务（数据库事务隔离级别）]]></title><link>https://blog.youkuaiyun.com/wangfeijiu/article/details/113763439</link><guid>https://blog.youkuaiyun.com/wangfeijiu/article/details/113763439</guid><author>wangfeijiu</author><pubDate>Tue, 09 Feb 2021 14:52:19 +0800</pubDate><description><![CDATA[事务就是用户定义的一系列数据库操作，这些操作可以视为一个完成的逻辑处理工作单元，要么全部执行，要么全部不执行，是不可分割的工作单元。
一般来说，事务是必须满足4个条件（ACID）：原子性、一致性、隔离性、持久性。- 脏读读取到的是一个未提交的数据，不可重复读读取到的是前一个事务提交的数据
- 不可重复读的重点是修改： 同样的条件，你读取过的数据，再次读取出来发现值不一样了
- 幻读的重点在于新增或者删除：同样的条件，第 1 次和第 2 次读出来的记录数不一样
事务提交方式：显示提交、隐示提交、自动提交]]></description><category></category></item><item><title><![CDATA[一文搞懂MySQL索引（清晰明了）]]></title><link>https://blog.youkuaiyun.com/wangfeijiu/article/details/113409719</link><guid>https://blog.youkuaiyun.com/wangfeijiu/article/details/113409719</guid><author>wangfeijiu</author><pubDate>Mon, 08 Feb 2021 12:23:32 +0800</pubDate><description><![CDATA[索引是对数据库表中一列或多列的值进行排序的一种结构。MySQL索引的建立对于MySQL的高效运行是很重要的，索引可以大大提高MySQL的检索速度。
MySQL中常用的索引结构（索引底层的数据结构）有：B-TREE ，B+TREE ，HASH  等。
MySQL 的索引有两种分类方式：逻辑分类和物理分类。
对于InnoDB和MyISAM而言，主键索引是根据主关键字来构建的B+树存储结构，辅助索引则是根据辅助键来构造的B+树存储结构，彼此的索引树都是相互独立的。]]></description><category></category></item><item><title><![CDATA[MySQL体系构架、存储引擎和索引结构]]></title><link>https://blog.youkuaiyun.com/wangfeijiu/article/details/112454405</link><guid>https://blog.youkuaiyun.com/wangfeijiu/article/details/112454405</guid><author>wangfeijiu</author><pubDate>Sat, 30 Jan 2021 01:25:19 +0800</pubDate><description><![CDATA[MySQL的体系构架划分为：1.网络接入层 2.服务层 3.存储引擎层 4.文件系统层。</br>

MySQL中的数据用各种不同的技术存储在文件（或者内存）中。每一种技术都使用不同的存储机制、索引技巧、锁定水平并且最终提供广泛的不同的功能和能力。</br>

InnoDB存储引擎中有页（Page）的概念，页是数据库管理磁盘的最小单位，InnoDB存储引擎中默认每个页的大小为16kb，每次读取磁盘时都将页载入内存中。</br

Mysql数据库中的常见索引有多种方式，例如Hash索引，B-树索引，B+树索引]]></description><category></category></item><item><title><![CDATA[Node.js集成MongoDB之Mongoose详细入门]]></title><link>https://blog.youkuaiyun.com/wangfeijiu/article/details/112385296</link><guid>https://blog.youkuaiyun.com/wangfeijiu/article/details/112385296</guid><author>wangfeijiu</author><pubDate>Sun, 10 Jan 2021 04:12:39 +0800</pubDate><description><![CDATA[Mongoose，是MongoDB的一个对象模型工具，是基于node-mongodb-native开发的MongoDB的nodejs驱动，也目前是Node.js操作 MongoDB的首选库。

Schema：模型类的骨架，通过Schema可以生成模型类，通过模型类可以生成文档。
 Model：由Schema产生的构造器，具有属性和行为。Modal的每一个实例就是MongoDB的一个文档。
Instance：Model的实例，通过new Model()得到，也就是MongoDB的一个文档。]]></description><category></category></item></channel></rss>