5 个用于 React 项目的延迟加载库1. react-lazyloadreact-lazyload 可用于延迟加载 React 应用程序中的任何类型的组件。它是 React 社区中最流行的延迟加载库之一,支持装饰器和服务器端渲染。其特点如下:
具有一组属性,使用户能够自定义组件的功能。
提供诸如 forceCheck 之类的实用程序来显示隐藏的内容,这些内容在没有调整大小或滚动事件的情况下变得可见。
开箱即用支持水平延迟加载。
只为所有延迟加载的组件实现两个事件监听器,进一步优化性能。
GitHub:github.com/twobin/reac…
2. react-lazy-loadreact-lazy-load 是一个 React 组件,可用于以可预测的方式延迟加载内容。它相对较快,具有最小的包大小(缩小为 6KB)。其特点如下:
自动检测滚动容器,例如带有滚动条的
,因此甚至可以在滚动容器内使用。
允许用户设置阈值以从视口的任何一侧开始内容加载,使用诸如 offsetVertical、offsetHorizontal、offsetTop、offset ...
前言用过 oh-my-zsh 的小伙伴都知道有非常好看的主题和插件,其中我最喜欢的就是一个插件就是显示自己输入过的命令,但是在 windows 下面的命令行没有发现这个功能一直让我敲代码的快感 -1,一次偶然的机会发现 Powerline 有类似的功能以此介绍了大家
可能遇到的问题
Restricted 执行策略不允许任何脚本运行。
AllSigned 和 RemoteSigned 执行策略可防止 Windows PowerShell 运行没有数字签名的脚本。
本主题说明如何运行所选未签名脚本(即使在执行策略为 RemoteSigned 的情况下),还说明如何对 脚本进行签名以便您自己使用。
有关 Windows PowerShell 执行策略的详细信息,请参阅 about_Execution_Policy。
解决方案 :
管理员打开 powershell
12get-executionpolicyset-executionpolicy remotesigned
一路 Y 即可
Powerline 安装安装完成的效果
字体文件开始安装之前请先安装字体文件
Releases · ...
前端路由实现方式路由需要实现三个功能:
当浏览器地址变化时,切换页面;
点击浏览器【后退】、【前进】按钮,网页内容跟随变化;
刷新浏览器,网页加载当前路由对应内容;
在单页面 web 网页中, 单纯的浏览器地址改变, 网页不会重载,如单纯的 hash 网址改变网页不会变化,因此我们的路由主要是通过监听事件,并利用 js 实现动态改变网页内容,有两种实现方式:
hash 模式:监听浏览器地址 hash 值变化,执行相应的 js 切换网页;
history 模式:利用 history API 实现 url 地址改变,网页内容改变;
它们的区别最明显的就是 hash 会在浏览器地址后面增加#号,而 history 可以自定义地址。
hash 模式使用 window.location.hash 属性及窗口的 onhashchange 事件,可以实现监听浏览器地址 hash 值变化,执行相应的 js 切换网页。下面具体介绍几个使用过程中必须理解的要点:
hash 指的是地址中#号以及后面的字符,也称为散列值。hash 也称作锚点,本身是用来做页面跳转定位的。如 http:// ...
JavaScript 中的浮点数大多数编程语言都有几种数值型数据类型,但是 JavaScript 却只有一种。你可以使用 typeof 运算符查看数字的类型。不管是整数还是浮点数,JavaScript 都将它们简单地归类为数字。
123typeof 10; // numbertypeof 10.1; // numbertypeof -10.1; // number
事实上,JavaScript 中所有的数字都是双精度浮点数。这是由IEE 754标准制定的 64 位编码数字—即 “doubles” 。
那么 JavaScript 是如何表达整数的呢?
请先记住一个概念 : 双精度浮点数能完美地表示高达 53 位精度的整数,范围大小为 -2^53—-2^53 的所有整数都是有效的双精度浮点数
因此,尽管 JavaScript 中缺少明显的整数类型,但是完全可以进行整数运算。
大多数的算术运算符可以使用整数、实数或两者的组合进行计算。
12345console.log(0.1 * 1.9); // 0.19;console.log(-10 + 11); // 1console.log(20 ...
[[toc]]
React 介绍用于构建用户界面的 JavaScript 库
声明式React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据改变时 React 能有效地更新并正确地渲染组件。
以声明式编写 UI,可以让你的代码更加可靠,且方便调试。
组件化创建拥有各自状态的组件,再由这些组件构成更加复杂的 UI。
组件逻辑使用 JavaScript 编写而非模板,因此你可以轻松地在应用中传递数据,并使得状态与 DOM 分离。
一次学习,随处编写无论你现在正在使用什么技术栈,你都可以随时引入 React 来开发新特性,而不需要重写现有代码。
React 还可以使用 Node 进行服务器渲染,或使用 React Native 开发原生移动应用。
React 初体验使用 React 的 2 种方式1.自行配置1.1 https://zh-hans.reactjs.org/docs/add-react-to-a-website.html
123456789101112131415161718192021<!doctype html><html ...
Redux和 vuex 一样为了解决组件之间的通信问题而使用的架构
设计思想
Web 应用是一个状态机,视图与状态是一一对应的。
所有的状态,保存在一个对象里面。
Redux 核心理念1. 通过store来保存数据
2. 通过action来修改数据
3. 通过reducer将store和action串联起来 reducer(state=initialState) {}
12345678 ------------- ---------> | Component | --------- | ------------- | | ⬇------------- ------------- -------------| Store | <---- | Reducer | <---- | Action |------------ ...
父传子props 传数据父
12345678910111213import ClassProps from "./components/ClassProps";import FunctionProps from "./components/FunctionProps";function App() { return ( <div className="App"> <ClassProps name="张三" age={18} /> <FunctionProps name="梨花" age={20} /> </div> );}export default App;
子
123456789101112131415161718192021222324252627282930313233343536373839404142import React fro ...
防抖所谓防抖,就是指触发事件后 n 秒后才执行函数,如果在 n 秒内又触发了事件,则会重新计算函数执行时间
1234567891011121314function debounce(fn, daytime) { let timer; clearInterval(timer); timer = setTimeout(() => { fn(); }, daytime);}function fn() { console.log("fn");}let result = debounce(fn, 10);console.log(result);
节流所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。
123456789101112131415function throttle(fn, dalay) { let start = 0; return () => { let now = new Date().getTime(); if (now - ...
[[toc]]
了解 Sql使用的工具本文档的代码都是在 MySQL 8.0.23 版本下面运行的MySQL 下载地址 znavicat 数据库可视化工具
数据库数据库这个术语的用法很多,(从 SQL 的角度来看),数据库是一个以某种有组织的方式存储的数据集合。最简单的办法是将数据库想象为一个文件柜。这个文件柜是一个存放数据的物理位置,不管数据是什么也不管数据是如何组织的。如果你使用 navicat 查看数据库,那么你可以在下面查看到数据库
::: warning 注意数据库概念混淆
人们通常用数据库这个术语来代表他们使用的数据库软件,这是不正确的,也因此产生了许多混淆。确切地说,数据库软件应称为数据库管理系统(DBMS)。数据库是通过 DBMS 创建和操纵的容器,而具体它究竟是什么,形式如何,各种数据库都不一样。
:::
表拥有了数据库我们就可以把数据存储在表中,表是一个存储数据的容器,它可以是一个文件,也可以是一个数据库中的一个表。
表是一种结构化的文件,可用来存储某种特定类型的数据。
数据库中的每个表都有一个名字来标识自己。这个名字是唯一的,即数据库中没有其他表具有相同的名字。 ...