是草莓味的啊-CSDN博客

原创 vue 实现批量引入组件

也可以选择动态使用组件，通过component的is来规定使用的那个组件，这样就可以将使用哪个组件放到query里面来表示啦。id：是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到。keys: 也是一个函数，他返回的是一个数组，该数组是由所有可能被上下文模块解析的请求对象组成。resolve: 是一个函数，他返回的是被解析模块的id ，接受一个参数request。directory：说明需要检索的目录 ,你要引入文件的目录。1.webpack的api。

2024-08-21 10:29:23 686 1

原创面试题总结

总的来说，‌选择使用map还是forEach取决于你的具体需求：‌如果你需要生成一个新的数据结构，‌并且希望保持原始数据的完整性，‌应使用map；‌例如，‌对于简单的父子组件通信，‌使用props和回调函数就足够了；‌Context可以在树中向下传递数据（‌从父组件到子树）‌，‌但需要配合回调函数来向上传递数据（‌从子树到父组件）‌。前端跨域问题的解决方法主要包括jsonp、‌CORS、‌代理、‌postMessage、‌WebSocket协议跨域、‌nginx代理跨域、‌nodejs中间件代理跨域等。

2024-07-18 15:26:26 922 1

原创 sftp+ssh+nginx部署

进入配置文件命令：cd /etc/nginx。使用软件：xshell、putty。编辑：vim nginx.conf。用户名：root 密码：xx。用户名：root 密码：xx。

2024-05-30 15:25:09 387

原创 React hooks - useContext

组件树的嵌套关系为：App => Wrapper => LevelA => LevelB => LevelC。因此在 LevelA、LevelB 和 LevelC 组件中，都可以使用 context 中的数据。核心思路：每个 Context 都创建一个对应的 Wrapper 组件，在 Wrapper 组件中使用 Provider 向 children 注入数据。保证父组件中代码的单一性和Provider的通用性，解决父组件中侵入了 <AppContext.Provider> 的问题，

2024-05-28 09:48:15 488

原创 React hooks - useReducer

从 use-immer 中导入 useImmerReducer 函数，并替换掉 React 官方的 useReducer 函数的调用。修改 reducer 函数中的业务逻辑，case 代码块中不需要 return 新对象了，可在 prevState 上进行修改。因为 Immer 内部会复制并返回新对象。

2024-05-23 19:11:10 538

原创 React hooks - useLayoutEffect

因为点击按钮时，num 更新为 0，但此时页面不会渲染，而是等待 useLayoutEffect 内部状态修改后才会更新页面，所以不会出现闪烁。将useEffect改成useLayoutEffect后数字不再闪烁。

2024-05-23 09:41:16 683

原创 React hooks - 自定义hooks

自定义封装鼠标位置的 hook自定义封装秒数倒计时的 hook在 src 目录下新建 hooks/index.ts 模块，自定义hooks都写在这里，自定义hooks都以use开头const [position, setPosition] = useState({ x: 0, y: 0 }) // 鼠标的位置if(timeId!}, delay)}, [])return position // 返回鼠标的位置。

2024-05-23 09:38:33 556

原创 React hooks - useEffect

/ 第二个参数是可选的依赖项数组，这个数组中的每一项内容都会被用来进行渲染前后的对比，依赖项发生变化时，才会重新执行副作用函数。将中止信号与请求绑定：fetch( ‘请求路径’ , { signal: controller.signal })实际应用：当前组件中使用了定时器或绑定了事件监听程序，可以在返回的函数中清除定时器或解绑监听程序。如果不在组件卸载时清理定时器，下一次再显示时会再创建一个新的定时器，就会有两个定时器都打印位置。中止请求：controller.abort()

2024-05-23 09:35:37 628

原创 React hooks - forwardRef+useImperativeHandle

当向外暴露{ name: ‘liulongbin’, age: 22 }时，childRef.current为{ name: ‘liulongbin’, age: 22 }// 第二个参数是一个函数，子组件将自己内部的方法或值作为对象返回，并自动绑定到父组件定义的并传给子组件的 ref 上。// 第三个参数是函数依赖的值（可选）,createHandle中用到的子组件内部定义的变量也需要作为依赖项。ref 用来获取实例，但函数组件不存在实例，所以ref无法获取函数式组件的实例。

2024-05-23 09:28:50 895

原创 React hooks - useRef

useRef 函数返回一个可变的 ref 对象，该对象只有一个 current 属性。可以在调用 useRef 函数时为其指定初始值。并且这个返回的 ref 对象在组件的整个生命周期内保持不变。

2024-05-23 09:24:52 584

原创 React hooks - useState

在hooks出现之前，react的函数式组件也叫做无状态组件（函数里面无法创建属于自己的状态，只能使用props接收）一个管理状态的 hooks，能让函数组件拥有自己的状态，实现状态的初始化、读取、更新。

2024-05-23 09:21:57 389 1

原创 react如何保留上一次的值

【代码】react如何保留上一次的值。

2024-02-29 10:25:02 545

原创如何设置页面恢复运行事件触发回调

由于 Android 原生的 resume 和 pause 事件不能区分是压后台导致还是页面切换导致，所以 pageResume 和 pagePause 事件是通过 JSAPI 调用记录回调的，仅适用于同一个 session 内 Window 之间的互相切换。当一个 WebView 界面重新回到栈顶时，例如从后台被唤起、锁屏界面恢复、从下个页面回退，会触发页面恢复运行（resume）事件。如果这个界面是通过 popWindow 或 popTo 到达，且传递了 data 参数，则此页可以获取到这些参数。

2024-02-20 17:41:07 394

原创接口请求没有到达后端，被缓存怎么办

解决方法：在请求的headers中加 ‘Cache-Control’: ‘no-cache’ }

2023-11-22 11:13:02 292

原创参与活动如何进行地区的限制

移动端限制拿到管理端配置的数据并进行格式化，得到数据为[‘河南省洛阳市’, ‘北京市’, ‘河南省郑州市’]const area = this.details?.area?.map(it => it?.map(item => item?.split(',')?.[1]))?.map(it => it?.join('')) || []使用高德获取经纬度（需要引入高德库：https://webapi.amap.com/maps），如果是app也可以调用jsapi获取经纬度ex

2023-11-21 18:10:08 393

原创虚拟dom及diff算法之 —— h函数和diff函数

新虚拟dom和老虚拟dom进行diff算法（精细化比较），算出如何最小量更新，最后反映到真实dom上diff是发生在虚拟dom上的。

2023-11-04 18:45:14 201

原创虚拟dom及diff算法之 —— snabbdom

源码：https://github.com/snabbdom/snabbdom。

2023-11-04 16:45:35 570

原创 Vue的虚拟dom和diff算法

因为oldStart于newStart比对成功了，oldStart向右移一位，newStart向右移一位，此时oldStart的位置大于oldEnd的位置，比较结束。但是新节点还剩下一个d节点，就创建d节点，放在新节点所在的位置，如果比较结束后新节点的个数比较少的话，就需要删除真实dom中的元素。oldStart（b节点）先与newStart（b节点）比较，相同，将真实Dom的b节点移动到新节点所在的位置。oldStart先与newEnd比较，相同，将真实Dom的a节点移动到新节点所在的位置。

2023-11-04 16:09:15 356

原创 css中页面元素隐藏

1.设置height，width，margin，padding，border等属性为0，overflow：hidden。2.postion:absolute top:-9999px 将元素移除可视区域。

2023-10-28 14:32:20 334 1

原创单/多文本溢出省略

【代码】单/多文本溢出省略。

2023-10-28 14:19:29 102

原创 html和css中图片加载与渲染的规则是什么？

和设置background-image的元素祖先元素设置display:none时，background-image不会渲染也不会加载，而img和picture引入的图片不会渲染但会加载。和设置background-image的元素遇到display:none时，图片会加载，但不会渲染。样式文件中background-image引入的图片，如果匹配不到DOM元素，图片不会加载。2.加载css，遇到background-image时，不加载图片，放入样式树中。，会加载图片，放入dom树中。

2023-10-28 13:51:43 858

原创 em/px/rem/vh/vw单位的区别

相对于当前对象内文本的字体尺寸，如未设置对行内文本字体的尺寸，则相对于浏览器的默认字体（1em=16px）vh：将窗口的高度分为100等份，100vh表示满高，50vh表示一般的高度，vw同理表示窗口的宽度。%与vh和vw的区别在于，相对于的父元素不同，%是相对于父元素，而vh和vw是相对于窗口。position:absolute 元素：相对于已定位的父元素。只相对于html根元素font-size的值来计算。em值不是固定的，会继承父级元素的大小。普通元素：正常理解的父元素。

2023-10-28 13:36:55 94

原创前端跨页面通信，你知道哪些方法？

2.get：share worker收到消息后将保存的数据通过postMessage传给注册他的页面，也就是让页面通过get来主动获取（同步）消息。使用用户不可见的iframe作为桥，由于iframe与父页面组件可以通过origin来忽略同源限制，因此可以在页面中嵌入iframe。在移动端中，由于使用的是Webview，可以使用Webview提供的Cookie共享功能实现。：跨页面通信时无法主动通知所有的页面，所以我们采用轮询的方式来拉取最新的数据。接下来你就可以在浏览器打开两个tab页愉快的进行通讯啦。

2023-10-28 12:53:51 764