_葱-CSDN博客

原创【React Scheduler源码第三篇】React Scheduler原理及手写源码

手写react scheduler源码，彻底搞懂什么是任务切片，什么是时间切片，以及为什么使用MessageChannel而不是setTimeout实现任务调度

2022-09-07 22:26:58 485 1

原创【React Scheduler源码第二篇】React Scheduler用法详解

React Scheduler 基础用法，高优先级任务如何插队，长任务如何切片，任务切片如何中途取消，任务过期等基础知识，为后续手写scheduler源码奠定坚实的基础

2022-09-05 21:23:43 628

原创【React Scheduler源码第一篇】哪些API适合用于任务调度

了解屏幕刷新率，了解哪些API 适合用于React Scheduler任务调度。为后续的手写scheduler源码奠定基础

2022-09-04 23:27:44 340

原创 React基于monaco editor的在线代码编辑器开发

在React项目中集成monaco editor，快来看看如何实现html标签回车自动闭合、html标签未闭合检测、主题定制、右键面板定制等功能

2022-08-27 14:12:45 1769

原创【React源码系列】React Context原理，为什么我建议尽可能少的使用React Redux管理状态

Provider的value变化是如何导致组件跳过sCU而强制更新的？fiber.dependencies的作用是什么？

2022-08-18 00:02:53 553

原创 Fiber 内部：React 中新的协调算法的深入概述

Fiber 内部：React 中新的协调算法的深入概述深入了解 React 的 Fiber 新架构，并了解新协调算法的两个主要阶段。我们将详细了解 React 如何更新 state 和 props 以及处理子节点React 是一个用于构建用户界面的 JavaScript 库。其核心机制在于跟踪组件状态变化并将更新的状态展示到屏幕。在 React 中，我们将此过程称为协调。我们调用 setState 方法，框架会检查状态(state)或属性(props)是否已更改，并重新渲染组件。React 官方文

2022-05-11 11:25:28 393

原创根据给定数组过滤另一个数组

需求描述：给定一个ids数组： const ids= ['op3', 'op1', 'op2', 'op1']; // ids可能会有重复数据给定一个list数据：const list = [ { id: 'op8', name: '分类op8'}, { id: 'op7', name: '分类op7'}, { id: 'op6', name: '分类op6'}, { id: 'op5', name: '分类op5'}, { id: 'op3'

2021-04-20 11:31:41 796

原创 react结合iframe小实践

通过window.open打开一个新页面，在新的页面里嵌入iframe。路由： <Router history={history}> <Switch> <Route path="/Demo" component={Demo} /> <Route path="/iframeDemo/:id" component={IframeDemo} /> </Switch...

2020-07-31 09:28:52 1806

原创 js实现复制并能保留原格式粘贴

使用textarea能粘贴的时候保留原格式。使用input粘贴的时候格式会丢失。 const input = document.createElement('textarea'); document.body.appendChild(input); input.value = “复制我呀”； // input.setAttribute('value', "复制我呀"); input.select(); if (document.

2020-07-01 14:05:50 2492

原创 requestAnimationFrame实现js防抖

timer.jsconst hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function';const now = hasNativePerformanceNow ? () => performance.now() : () => Date.now();export function cancelTimeout(timeo

2020-07-01 11:12:31 552

原创懒加载

import React, { useRef, useEffect, useState } from 'react';import Item from './item';import styles from './index.module.less';const Home = () => { const [itemsObj, setItemObj] = useState({}); const [prevScrollTop, setPrevScrollTop] = useState(0.

2020-06-03 19:18:55 249

原创 nginx知识杂记

Mac下nginx的配置文件默认的路径：/usr/local/etc/nginx/nginx.conf测试配置文件格式是否正确：nginx -t启动nginx，直接在命令行运行nginx就可以启动:nginx重启nginxnginx -s reload停止nginxnginx -s stop以上这些命令在mac上可能需要加上sudo权限。...

2020-05-20 10:44:33 200

原创 React 16.13.1使用useState时会执行两次render的问题

示例使用typescript编写一个简单的hello新建一个Hello.tsx组件：import React, {useState} from 'react'interface IHelloProps { message?: string;}const Hello: React.FC<IHelloProps> = (props) => { console.log('hello before render....') return (

2020-05-10 16:13:08 9789

原创使用express-jwt生成token的demo

const express = require('express')const jwt = require('express-jwt')const jwtSign = require('jsonwebtoken')const cookieParser = require('cookie-parser')const getCookieExpires = () => { cons...

2020-04-18 17:02:24 729

原创 Sequelize之Model实例

Model实例model就是个ES6的class。model的每个实例都是这个model的一个对象，映射到数据库表中的一行。创建一个Model实例尽管model是个类。但是不能直接通过new创建实例，应该通过build方法。const jane = User.build({ name: 'Jane' })build方法是个同步事件，调用build方法并不会创建数据库表中的一行...

2020-04-10 15:16:29 1221

原创 Sequelize之Model模型定义

概念模型是Sequelize中的重要部分。是数据库表的一个抽象。在Sequelize中，模型是一个继承了Model的类。Sequelize中每个模型都有一个名字，这个名字可以不用与数据库表名字相同。默认情况下，数据库表名字是模型名字的复数形式。比如模型名字为User，默认的，数据表名字为Users。这个默认行为可以通过配置改变。模型定义在Sequelize中，Models可以通...

2020-04-10 14:14:56 4848

原创 node.js原生开发服务端项目之使用redis存储session信息实现登录

const http = require('http')const querystring = require('querystring')const redis = require('redis')const getCookieExpires = () => { const d = new Date() d.setTime(d.getTime() + (24 * 60 *...

2020-04-08 16:18:16 378

原创 node.js原生开发服务端项目之使用本地node.js变量存储session信息实现登录

使用session实现登录的思路：1.服务端收到客户端请求，解析请求头获取sessionId。2.如果sessionId不存在，则生成一个唯一的sessionId，生成sessionId的规则可以根据自己需要设置，这里使用时间戳+随机数生成sessionId。并且设置cookie。3.根据sessionId从SESSION_DATA这个全局变量中读取session数据，如果不存在，初始...

2020-04-08 15:48:48 791

原创解决ios滑动穿透问题

function closest(el, selector) { const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector; while (el) { if (matchesSelector.call(el, sel...

2019-12-16 10:47:36 4691

原创 webstorm提示TypeError: this.cliEngine is not a constructor

点击details在控制台显示报错的位置TypeError: this.cliEngine is not a constructor at ESLintPlugin.invokeESLint (/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint...

2019-09-22 12:31:58 35584 7

原创 css实现文字上下滚动轮播效果

效果图：人狠话不多，代码如下：import React from 'react';import styles from './notice.less';class Index extends React.Component { render() { return ( <div className={styles.noticeContainer}&g...

2019-09-02 14:57:56 14970

原创 js压缩图片到指定大小

需求：前端上传图片的时候通常需要提供指定大小以内的图片。比如不大于500KB。思路：利用canvas转blob的时候通过quality控制图片质量，达到压缩的目的。此方法有个缺点。只能对图片格式为jpeg或webp的图片有效。因此压缩的时候canvas.toBlob(callback, mimeType, quality)中的mimeType要设为'image/jpeg'。压缩完成可以自行转成...

2019-09-02 14:23:23 16828 7

原创 IOS微信浏览器点击input元素无反应以及输入框输入后页面不回弹的问题

1.最近在开发微信公众号网页，发现在iOS中，input元素快速点击的时候无法获得焦点，双击或者触摸屏幕的时候才能获取焦点。安卓端没有问题。一开始以为是iOS微信浏览器的兼容问题。后来认真排查了下，发现是我在引入ant-mobile组件库时，同时引入了faskclick.js导致的。下面是ant-mobile官网的介绍：然后我去ant-mobile github上看了下，发现了这个（参考h...

2019-05-29 18:47:07 9238

原创 css实现文字左右滚动效果

<div className={styles.rotaryContainer}> <div className={styles.rotaryBlockFirst}> 注释：自2019年7月起，这是一段很长的文本文本文本文本文本文本文本文本文本文本文本文本文本文本, 本文本文本文本文本文本文本文本文本文本文本文本文...

2019-03-07 14:49:59 21532 2

原创 linux `manpath: can‘t set the locale； make sure $LC_* and $LANG are correct`

问题：解决：sudo locale-gen "en_US.UTF-8"sudo dpkg-reconfigure localessudo vi /etc/default/locale 将里面的内容改为下面内容LANG="en_US.UTF-8"LC_ALL="en_US.UTF-8"

2019-01-22 14:48:58 5338

原创 vue 配置eslint代码检查

1.安装依赖："eslint": "^5.12.0","eslint-config-standard": "^12.0.0","eslint-friendly-formatter": "^4.0.1","eslint-loader": "^2.1.1","eslint-plugin-import": "^2

2019-01-11 15:52:16 30695

转载 vue 项目 webstrom IDE格式化代码规则遵循eslint设置

首先vue-cli生成了一个项目，开启了eslint的检测，但是根据webstorm的快捷格式化代码 ctrl+alt+L会造成eslint报错。解决办法一：编辑器打开文件首先，在编辑器里面要启用eslint 插件在 .eslintrc.js 上右键，菜单底部有一个 "Apply ESLint Code Style Rule" 点它，之后自动格式化就会按照 eslint 的规则...

2019-01-11 12:59:24 2027

原创 Nginx实现反向代理

我在服务器上写了个脚本，跑在8008端口，通过服务器IP+端口：http://120.78.194.45:8080我们能够访问服务器上的服务。如下图，app1.js即是我写的一个简单脚本。通过node启动服务app1.js内容如下：const http = require('http')http.createServer(function(req, res) { res.writ...

2019-01-10 16:55:01 459

原创 node.js项目线上服务器部署

图1 node.js项目线上部署思路图假设我们电脑本地有五个项目：1.静态网站 2.电影网站 3. 手机app 4.微信小程序 5.微信公众号这些应用都是跑在我们电脑本地，谁也看不到。我们需要放到网上供别人使用。首先我们为这五个项目购买一个域名（当然为每个项目单独买一个域名也行），一个域名也可以分出5个二级域名来用。比如我们可以购买imooc.com这个域名。购买域名后需要给域名...

2019-01-09 10:19:23 2810

原创 mac下安装git或者npm install 时遇到xcode-select 识别xcode路径的问题

在mac下使用git或者npm install 时经常遇到下面的问题：xcrun: error: active developer path ("/Applications/Xcode.app/Contents/Developer") does not exist, use `xcode-select --switch path/to/Xcode.app` to specify the Xco...

2019-01-07 10:10:28 6732

原创 JavaScript创建对象之原型模式

我们创建的每个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象。这个对象包含由该函数（构造函数）创建的所有实例共享的属性和方法。如果按照字面意思来理解，那么prototype就是通过调用构造函数而创建的那个对象实例的原型对象。 function SuperType(name) { this.superColors = ['red', 'yellow'] ...

2018-12-12 15:25:43 407

原创 webpack3到webpack4的变化

1.mode。webpack4中通过内置的mode使用相应模式的内置优化。设置mode等于'development'，会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。设置mode等于'production'，会将 process.env.NODE_ENV 的值设为 producti...

2018-11-29 16:43:35 1814

原创 XMLHttpRequest提交form表单数据，包括上传文件

<input id="uploadFile" name="file" type="file"><script> const file = document.getElementById('uploadFile') let formData = new FormData() formData.append('file', file...

2018-11-28 16:49:55 11541 5

原创前端路由基本原理

1.哈希#。借鉴a标签的锚点机制实现页内导航，Url变化后浏览器不刷新。AngularJS 路由允许我们通过不同的 URL 访问不同的内容。通过 AngularJS 可以实现多视图的单页 Web 应用（single page web application，SPA）。通常我们的 URL 形式为http://runoob.com/first/page，但在单页 Web 应用中 Angu...

2018-11-27 10:07:18 435

原创 webpack CleanWebpackPlugin

clean-webpack-plugin能够帮助我们清空指定目录下的内容。默认情况下，只能清空webpack配置文件所在目录里面的内容。如果要清空外面的内容，需要设置allowExternal = true。如下：new CleanWebpackPlugin(['../dist'], { root: __dirname, allowExternal: true })相当于告诉webpac...

2018-11-22 21:05:57 1238

原创 webpack output.publicPath

这篇文章用例子讲解我在webpack的学习过程中遇到的publicPath问题。对于按需加载(on-demand-load)或加载外部资源(external resources)（如图片、文件等）来说，output.publicPath 是很重要的选项。如果指定了一个错误的值，则在加载这些资源时会收到 404 错误。创建项目目录如下：index.js:import './css/...

2018-11-22 14:08:44 4813 7

原创 webpack entry & context

context 是webpack entry的上下文，是入口文件所处的目录的绝对路径。默认情况下，只想过当前项目根目录。新建demo目录如下：运行npx webpack --config ./build/webpack.config.js。控制台打印如下：可见，如果我们不设置context的值，context默认的值就是项目的根目录，即：/Users/lizuncong/Docum...

2018-11-21 21:06:42 5960

原创 webpack 打包后的bundle分析

webpack打包后的bundle文件：app.bundle.js里面其实就是个立即执行函数，类似如下结构：(function (modules){ console.log(modules['app'])})({ 'app': function(){ return 20 }, 'test': function(){ re...

2018-11-21 17:48:56 4290

原创 webpack 相关概念梳理

资源（Asset）：用于图片，字体，媒体，其他类型的文件等。这些文件通常在output中输出为单个文件。bundle: 由多个不同的模块生成，bundle包含了加载和编译过后的最终源文件版本。bundle分离(Bundle Splitting)：优化构建的方法。允许webpack为应用程序生成多个bundle。当其他某些bundle改动时，彼此独立的另一些bundle不受影响。减少需要重新...

2018-11-21 17:31:01 492

原创 npm install安装包常见错误

1.报错：npm ERR! Unexpected end of JSON input while parsing near '...stylish":"1.0.0","gul'解决方法：npm cache clean --force2.警告：npm WARN invalid config registry=""npm WARN invalid config Must be a full...

2018-11-07 10:45:15 19406

空空如也

空空如也