踩坑笔记

bug记录：
封装公共函数 const { validateCode, loading, onLogin } = useValidateCode()

const {data:validateCode }=useRequest() // ahooks网路请求函数
onLogin :()=>{}//登陆函数

无法缓存记忆函数，<login/>父-><input />子两个组件调用useValidateCodevalidateCode为空问题
解决方案：

// 函数外定义常量：validateCodeCache
const {data:defaultValidateCode }=useRequest() // ahooks网路请求函数
const validateCode = validateCodeCache ?? defaultValidateCode

注：不同组件refs调用 ahooks网路请求函数会导致未触发useValidateCodevalidateCode数据更新问题（不是同一个函数实例）

Cannot read property 'hash' of undefined[html-webpack-plugin]/lib/compiler.js:265:30：
升级版本至4.5.2

@action.bound使用场景：
async awiat会破坏流，导致this指向丢失，因此需要action.bound或箭头函数绑定this

react重构为next传参问题(原state修改为session传递参数)：
React Router-简单原理

state施加了 2MiB 的大小限制，如果您需要更多空间，建议您使用 sessionStorage或者localStorage

Q：为什么我会在我的函数中看到陈旧的 props 和 state ？
A：React hooks 组件内部的函数只会拿到定义它的那次渲染的props和state
查询问题：
React中获取不到useState的最新值
React Hook 中 useState 异步回调获取不到最新值及解决方案

antd的datepicker之汉化

import locale from 'antd/lib/date-picker/locale/zh_CN';
import 'moment/locale/zh-cn';
...
<RangePicker locale={locale}/>

Q：js中防抖、节流函数如何获取原函数的返回值

  const debounceCallback = debounce(
    (callback) => {
      callback();
    },
    1000,
    { leading: true, trailing: true },
  );
  const _originRunAsync = (params?: any) => {
    return new Promise((resolve, reject) => {
      // @ts-ignore
      debounceCallback?.(() => fetchReceive(params).then(resolve).catch(reject));
    });
  };

查询资料：

js中防抖、节流函数如何获取原函数的返回值？

利用回调函数和Promise，参考ahooks源码3.0（2.0不支持）。

防抖/节流模式下，runAsync 可以返回正常 Promise。

ahooks-useRequest 探究

I can't reference an image in Next.js，next.js图片引入问题

import macbookIphone from '../../assets/images/mac-iphone.jpg';
 // const macbookIphone = require('../../assets/images/mac-iphone.jpg')
 //Ref: next/image
 // or 

拓展：require vs require .default

require('../../assets/images/mac-iphone.jpg').default