Passion is Energy-CSDN博客

原创 useCallback Vs useMemo 中，第二个参数传入空数组和不传的区别

1. 引用For both useMemo and useCallback (which is essentially just a special case of useMemo), if the second argument is an empty array, the value will be memoized once and always returned.If the second argument is omitted, the value will never be memoi

2021-11-23 11:01:08 5370

原创 NodeJS 处理 HTTP request method is case-sensitive

code1. json-server middleware (后端处理非 Restful api 的中间件）module.exports = (req, res, next) => { // 不管前端发起的请求有没有区分大小写， i.e post or POST, req.method 必须是 POST （大写） if (req.method === 'POST' && req.path === '/login') { if (req.body.us

2021-11-20 12:44:18 539

原创 forwardRef, useImperativeHandle 用于调用子组件的方法

代码App.jsimport { useRef } from "react";import Child from "./Components/Child";const App = () => { const childRef = useRef(); return ( <div> <Child ref={childRef} /> <button onClick={() => childRef.current.displ

2021-10-13 14:13:49 329

原创为什么不在 constructor或者 componentWillMount 请求数据？

为什么不在 constructor?官网说明，在 concurrent 模式下， constructor 会被执行多次！constructor 是用于初始化 class 的初始状态，不建议有副作用的逻辑在里面！面向对象里， class 的 constructor 是用于存放一些具有确定性的属性和方法！为什么不在 componentWillMount?如果服务端渲染，componentWillMount 会被服务端渲染一次，前端渲染一次。componentWillMount 这个生命函数钩子在

2021-10-10 19:13:27 581

原创 commonJS Vs es6 Modules

1. 模块化好处：防止了全局变量污染、文件依赖等问题的产生AMD 和 CMD 适用于浏览器端的 Javascript 模块化CommonJS 适用于服务器端的 Javascript 模块化ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范。2. commonJS2.1 导出语法在自定义模块中，可以使用 module.exports 对象，将模块内的成员共享出去，供外界使用外界用 require() 方法导入自定义模块时，得到的就是 module.exports

2021-09-25 00:36:38 99

原创 npm vs npx

1. examplepreviousnpm install -g @vue/clivue create my-projectnownpx @vue/cli create --default my-project2. 结论之前，用 npm 安装包，要先全局安装它，然后执行 cli 的全局指令去创建项目现在，npx 会自动执行紧跟着的包，然后直接执行指令，去创建项目之前，如果 cli 不是 global 安装，还要去精确定位到它在 nodeModules 下具体的位置，在

2021-09-24 15:38:11 119

原创 any, never, unknown的区别

any => unknown => neverany: 没有类型校验，当开发者不希望 ts在编译时做 typechecking, 而且希望 ts 相信这行代码是 ok的known: known 是 is safer than any. 当值是 known，不允许对它做任何操作，看代码：function f1(a: any) { a.b(); // ok ???? , any 允许这么做，就算 a 可能只是一个数字，它并没有 b 方法}function f2(a:

2021-09-22 16:11:32 954

原创 enum 枚举的使用

1. code1) tstest.tsenum Direction { Up, Down, Left, Right,}console.log(Direction[0]); // 可以传入 Direction.Up,输出 0; 传入 Direction[0] 输出 "Up"// 定义方法function display(direction: Direction) { console.log(direction);}display(Direction.Up);

2021-09-20 12:03:03 331

原创空对象和 any 区别

1. 区别任何值可以赋值给 any除了 null 和 undefined 不能赋值，其它可以2. 赋值给 {}string | number | boolean | object | {[key:string]: any} | Object | any[]// 不报错const test1: {} = 'hello'const test2: {} = 123const test3: {} = falseconst test4: {} = {foo:'bar'}undef

2021-09-19 20:48:04 273

原创原生图片懒加载和 react组件封装图片懒加载

1. 原生图片懒加载<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <

2021-09-18 14:02:18 426

原创 connect, mapStateToProps, mapDispatchToProps

1. 结构1.1 四个文件store.jsChild.jsxindex.jsApp.js1.2 两个 packagereduxreact-redux1.3 一个HOCconnect(mapStateToProps, mapDispatchToProps)(Child);接收两个参数，通过 props 传递给 Child 组件，返回一个全新的 Component2. codestore.jsimport { createStore } from "redux";

2021-09-18 10:46:57 553

原创结合 useContext 和 useReducer,完成简单的共享状态

1.结构1.1 三个文件App.jsChild.jsxGrandChild.jsx1.2 两个 hooksuseReduceruseContext2. 代码App.jsimport { createContext, useReducer } from "react";import Child from "./Child";/* 定义 reducer */const initialState = { count: 0 };const myReducer = (sta

2021-09-18 09:42:05 218

原创切换 tabs,记忆滚动条

1. 测试滚动条在那个 tag 的代码function findScroller(element) { element.onscroll = function() { console.log(element)} Array.from(element.children).forEach(findScroller);}findScroller(document.body);2. 记忆滚动条的原理保持每个 tab 下的包裹内容的滚动条是独立的不能是 body 或者 tab 下的内容，公

2021-09-18 00:36:21 582

原创 Token 的失效处理和无感刷新的两种方法

1. 通过 timeStamp, 超过时间，就用 refresh-token去更换新的 token — 基于 vue 实现在路由前置守卫处理定义路由前置守卫router.beforeEach((to, from, next) => { next()})登录成功存时间戳import { setItem } from '@/utils/storage.js'setItem('TOKENDATE', Date.now())进入路由之前进行判断tokenimport { get

2021-09-13 23:32:32 3852 2

原创在普通 js文件中，需要使用 history, 遇到的两个坑！！！

1. 在安装 react-router-dom 的时候，自带安装 history 包，直接 import 即可history:object1.1 起因：在看文档的时候，看到 demo 中 import 了 history 包。于是乎，我就先去 yarn add history 。没想到，在点击页面的时候，页面先是空白的，必须手动刷新，才会出现正常的当前页面内容。1.2 处理：yarn remove react-router-domyarn add react-router-dom1

2021-09-13 23:00:01 742

原创 history.replace() Vs history.push() 区别

1. history 原理用户访问的页面地址会保存到一个栈中（LIFO 后进先出)2. history 的 go()/home ==> /home/qa ===> /home/videohistory.go(-1) // 返回前一个页面，history.go(-2) 往前翻回第二个页面history.go(1) // 前进一个页面3. history 的 replace() 和 push()History Push: The user can go forward

2021-09-13 12:16:23 11175

原创（clientHeight, offsetHeight, scrollHeight）, scrollTop

1.clientHeight, offsetHeight, scrollHeight 定义clientHeight:returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or marginoffsetHeight:is a measurement which includes the element borders,

2021-09-13 09:02:19 127

原创 useRef 的两种用法，一是用来操作 DOM,另一种是用来保持数据的持久性

1. 操作 DOM2. 保持数据持久性2.1 why?因为每次 render, ref 是不会改变的2.2 用于 websocket中，能够在 useEffect 外取得 clientimport Icon from "@/components/Icon";import Input from "@/components/Input";import Navbar from "@/components/Navbar";import { useSelector } from "react-redu

2021-09-13 00:22:37 2352

翻译为什么上传文件要用 formdata

为什么上传文件要使用multipart/form-dataThe encoding type application/x-www-form-urlencoded is inefficient for sending large quantities of binary data or text containing non-ASCII characters. Thus, a new media type,multipart/form-data, is proposed as a way of effici

2021-09-12 12:05:11 978

原创 input 和 textarea，在进去页面，自动获取光标 ----- reactjs

1. input 获取光标import classNames from "classnames";import React, { useEffect, useRef } from "react";import { root } from "./index.module.scss";export default function Input({ extra, onExtraClick, className, ...rest }) { /******************************

2021-09-12 10:48:27 1787

原创为什么token要存在localstorage,然后通过redux/vuex去获取？

一.两个原因：localStorage:优点：持久，能够永久存储的缺点：不是响应式的vuex / redux优点：响应式的缺点：不持久，存储在内存中，刷新就会丢失。

2021-09-10 19:58:19 988

原创封装的组件，没有通过 Route 标签包裹，如何取得 history

一. 场景1. 目前，有两个页面，Home and Login, 只有它们两个被 <route> 标签包裹<Router> <div className="App"> <Suspense fallback={<div>...loading</div>}> <Switch> &l

2021-09-09 11:02:11 230

原创 store.subscribe需要先定义，后执行；可以定义多次 subscribe

1. codeimport { createStore } from "redux";const reducer = (state = 0, action) => { switch (action.type) { case "add": return state + 1; default: return state; }};const store = createStore(reducer);console.log(store);s

2021-09-08 11:41:10 2235

原创用 useRef() 去解决 react-hook ”闭包陷阱“

1. 出现问题1.1 code// jsx <h1 onClick={handleClick}>{count}</h1> <button onClick={() => setCount(count + 1)}>click {count}</button>// 状态，属性 const [count, setCount] = useState(0); const handleClick = () => { se

2021-09-08 10:26:12 501

原创简单请求 Vs 复杂请求

1. 简单请求1.1 简单请求方法getposthead1.1.2 get 和 head 请求区别The HTTP HEAD and GET methods are identical, except that for HEAD requests, the server does not return a response body but still specifies the size of the response content using the Content-Length

2021-09-06 15:51:04 1598 1

原创 e.target Vs e.currentTarget 区别

1.背景知识1.1 事件冒泡和事件捕获在 DOM tree 上，事件自上而下是事件捕获阶段，事件自下而上是事件冒泡阶段。如果要利用这个事件执行机制，只能二选一。2. Show u code!!!html<div onClick={handleClick}> <button onClick={handleBtnClick}>click</button> </div>js // d

2021-09-06 14:23:19 127

原创 export default const a = 1 这样是语法错误！！！

export default1) 为什么这样写，会报语法错误？？可以把 default 作为一个类似 const, let 这样的声明 variable 的保留字。如果 export default const a = 1, 其中 default 就像 let, 变成 export let const a = 1这样就会报 syntax error因此，如果没有 default 保留字，就可以正常使用，如：export const Chlild = () = () =

2021-09-05 17:51:45 625

原创 redux 流程分析

Redux is a predictable state container for JavaScript apps.It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experienc

2021-09-04 23:19:45 154

空空如也

空空如也