前端 - Page 2 of 12

React 18 自定义 Hook 获取 useState 最新值

原理：通过同步更新 useRef 来获取最新值

1

2

3

4

5

6

7

8

9

10

11

// util.ts

export const useRefState = (init: any = null) => {

const [state, setState] = useState(init);

const stateRef = useRef(init);

const setProxy = (newVal: any) => {

stateRef.current = newVal;

setState(newVal);

};

const getState = () => stateRef.current;

return [state, setProxy, getState];

};

使用：

1

2

3

4

5

6

7

import { useRefState } from "util"

const [state, setState, getState] = useRefState(0)

state // state 值，变动后更新DOM

setState // setState，变动 state

getState() // 获取最新值

2024-07-03by SKILLNULL React, 前端阅读(2799)评论(0)

处理报错 ResizeObserver loop completed with undelivered notifications.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

// 处理报错 ResizeObserver loop completed with undelivered notifications.

export const handlerResizeObserverError = () => {

const debounce = (callback: (...args: any[]) => void, delay: number) => {

let tid: any;

return function (...args: any[]) {

const ctx = self;

tid && clearTimeout(tid);

tid = setTimeout(() => {

callback.apply(ctx, args)

}, delay)

}

const _ = (window as any).ResizeObserver;

(window as any).ResizeObserver = class ResizeObserver extends _ {

constructor(callback: (...args: any[]) => void) {

callback = debounce(callback, 20)

super(callback)

}

2024-04-26by SKILLNULL JavaScript, 前端阅读(3289)评论(0)

JS获取浏览器宽高的兼容写法

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElemen[……]

2023-08-07by SKILLNULL JavaScript, 前端阅读(3725)评论(0)

ios滚动列表白屏问题

移动端分页列表，在ios上滚动加载分页时候，使用scrollTop，会引起白屏问题。

看不少文章说是使用了-webkit-overflow-scrolling: touch;引起的硬件加速问题。亲测删除问题仍然存在。

1

2

3

4

5

this.$nextTick(() => {

window.scrollTo(0, 1);

window.scrollTo(0, 0);

})

[cr[……]

2023-07-12by SKILLNULL Browser Compatibility, HTML&CSS, JavaScript, Vue, 前端阅读(4736)评论(0)

js正则匹配以$开头和结尾的内容，并改变颜色

1

2

3

4

5

let res = "$你好你好$"

res = res.replace(/\$(?<=\$).*?(?=\$)\$/g,

`<span onclick="((params)=>{

console.log(params)

})('$&')" style="color: dodgerblue;padding: 0 5px;">$&</span>`)

2023-06-27by SKILLNULL JavaScript, 前端阅读(3298)评论(0)

移动端100vh的问题与解决方案

之所以100vh在移动端出现问题，原因大致如上图，真搞不懂，为什么总是有反人类的设计出现。

经过多方参考，实测有效的方案如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<style>

:root {

--vh: 1vh;

}

</style>

!(function (n, e) {

function setViewHeight() {

var windowVH = e.innerHeight / 100;

n.documentElement.style.setProperty('--vh', windowVH + 'px');

}

var i = 'orientationchange' in window ? 'orientationchange' : 'resize';

n.addEventListener('DOMContentLoaded', setViewHeight);

e.addEventListener(i, setViewHeight);

})(document, window)

</script>

使用：
[crayon-6993adb24d51588193416[……]

2023-03-30by SKILLNULL Browser Compatibility, HTML&CSS, 前端阅读(8032)评论(0)

You are currently using minified code outside of NODE_ENV === ‘production’. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build.

You are currently using minified code outside of NODE_ENV === ‘production’. This means that you are running a slower development build of Redux. You c[……]

2022-04-28by SKILLNULL React, 前端阅读(3554)评论(0)

Runtime compilation is not supported in this build of Vue. Configure your bundler to alias “vue” to “vue/dist/vue.esm-bundler.js”.

vite.config.ts中添加

1

2

3

4

5

6

resolve: {

// 文件系统路径的别名

alias: {

'vue': 'vue/dist/vue.esm-bundler.js'

}

2022-02-14by SKILLNULL Vue 阅读(3813)评论(0)

vue3开启eslint报错：ESLint error: Parsing error: ‘＞‘ expected

.eslint.js中添加

1

2

3

4

'parser': 'vue-eslint-parser',

'parserOptions': {

'parser': '@typescript-eslint/parser'

}

2022-01-09by SKILLNULL Vue 阅读(4851)评论(0)

Uncaught SyntaxError: The requested module ‘/node_modules/.vite/vue-router.js?v=2f0f3daf’ does not provide an export named ‘VueRouter’

Uncaught SyntaxError: The requested module ‘/node_modules/.vite/vue-router.js?v=2f0f3daf’ does not provide an export named ‘VueRouter’
[crayon-6993ad[……]

2022-01-05by SKILLNULL Vue 阅读(3603)评论(0)

2026年二月
一	二	三	四	五	六	日
« 1月
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28