<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[spray_wave的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/spray_wave</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; spray_wave]]></copyright><item><title><![CDATA[echarts所遇到的问题，个人记录]]></title><link>https://blog.youkuaiyun.com/spray_wave/article/details/140752965</link><guid>https://blog.youkuaiyun.com/spray_wave/article/details/140752965</guid><author>spray_wave</author><pubDate>Sun, 28 Jul 2024 17:23:25 +0800</pubDate><description><![CDATA[font-size 支持 rem，但是其余的属性如height，width等不支持。aniamtion属性设置为false，]]></description><category></category></item><item><title><![CDATA[js复制一段文案]]></title><link>https://blog.youkuaiyun.com/spray_wave/article/details/140752769</link><guid>https://blog.youkuaiyun.com/spray_wave/article/details/140752769</guid><author>spray_wave</author><pubDate>Sun, 28 Jul 2024 16:55:35 +0800</pubDate><description><![CDATA[点击按钮，复制一段文案]]></description><category></category></item><item><title><![CDATA[笔记：CSRF攻击概念和防范手段]]></title><link>https://blog.youkuaiyun.com/spray_wave/article/details/138128781</link><guid>https://blog.youkuaiyun.com/spray_wave/article/details/138128781</guid><author>spray_wave</author><pubDate>Tue, 23 Apr 2024 15:56:33 +0800</pubDate><description><![CDATA[攻击者构造一个恶意网站或者通过其他方式诱使用户访问这个网站，该网站中包含一个针对目标网站的请求。然后，攻击者通过各种手段，例如诱骗用户点击链接、嵌入图片或脚本等，使用户在其浏览器中发送该请求。由于用户已经在目标网站上进行了认证，浏览器会自动在请求中包含相应的凭证（如Cookie），使该请求看起来像是用户自己发送的。例如，攻击者可以更改用户的账户信息、发出支付请求、删除重要数据，甚至转移用户的资产、篡改网站数据等。总的来说，CSRF攻击是一种隐蔽性很强的攻击方式，它利用了用户对自己的信任。]]></description><category></category></item><item><title><![CDATA[笔记：XSS攻击概念和防范手段]]></title><link>https://blog.youkuaiyun.com/spray_wave/article/details/138128217</link><guid>https://blog.youkuaiyun.com/spray_wave/article/details/138128217</guid><author>spray_wave</author><pubDate>Tue, 23 Apr 2024 15:37:06 +0800</pubDate><description><![CDATA[具体来说，XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。其原理是攻击者向有XSS漏洞的网站中输入恶意的HTML代码，当其他用户浏览该网站时，该段HTML代码会自动执行，从而达到攻击的目的，如盗取用户的Cookie、破坏页面结构、重定向到其它网站等。XSS攻击有多种形式，包括恶意重定向攻击、假冒网站攻击、注入点击劫持攻击、散布虚假的警告信息、纵向钓鱼攻击、跨站脚本搜索攻击以及恶意广告攻击等。]]></description><category></category></item><item><title><![CDATA[flex弹性盒常用属性汇总]]></title><link>https://blog.youkuaiyun.com/spray_wave/article/details/136810535</link><guid>https://blog.youkuaiyun.com/spray_wave/article/details/136810535</guid><author>spray_wave</author><pubDate>Mon, 18 Mar 2024 17:46:18 +0800</pubDate><description><![CDATA[值>=0，默认是0即使有剩余空间也不拉伸，值越大，占据剩余空间的份额就越大值>-=0, 默认是1当父元素空间不足时所有子元素的等比收缩，值越大收缩比例越大flex-basis: auto | width的相关单位（px，百分比，max-content等）默认值是auto，基于设置的width和height，当width和flex-basis同时存在时，flex-basis优先级更高。]]></description><category></category></item><item><title><![CDATA[前端系统设计个人总结]]></title><link>https://blog.youkuaiyun.com/spray_wave/article/details/136734527</link><guid>https://blog.youkuaiyun.com/spray_wave/article/details/136734527</guid><author>spray_wave</author><pubDate>Fri, 15 Mar 2024 11:21:13 +0800</pubDate><description><![CDATA[系统设计是一个定义系统架构、模块、接口和数据满足特定需求的过程。]]></description><category></category></item><item><title><![CDATA[fetch请求如何中断]]></title><link>https://blog.youkuaiyun.com/spray_wave/article/details/136714272</link><guid>https://blog.youkuaiyun.com/spray_wave/article/details/136714272</guid><author>spray_wave</author><pubDate>Thu, 14 Mar 2024 16:26:32 +0800</pubDate><description><![CDATA[通过AbortController中断fetch请求]]></description><category></category></item><item><title><![CDATA[Array常用方法合集]]></title><link>https://blog.youkuaiyun.com/spray_wave/article/details/136339844</link><guid>https://blog.youkuaiyun.com/spray_wave/article/details/136339844</guid><author>spray_wave</author><pubDate>Wed, 28 Feb 2024 16:56:56 +0800</pubDate><description><![CDATA[forEach是一个比较特殊的遍历函数，乍一看它的结构和map、filter等很像，但是它却没有返回值，并且不支持continue和break，它的return其实是起到了continue的作用，用于跳出此次循环，而break则要通过，try{}catch(e){}来实现。此方法和indexOf相反，indexOf是从左向右查，lastIndexOf是从右向左查，可返回某个指定的值在数组中从右边起第一个出现的位置。howmany： 可选。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。]]></description><category></category></item><item><title><![CDATA[useRef有什么用？]]></title><link>https://blog.youkuaiyun.com/spray_wave/article/details/136239425</link><guid>https://blog.youkuaiyun.com/spray_wave/article/details/136239425</guid><author>spray_wave</author><pubDate>Thu, 22 Feb 2024 18:07:34 +0800</pubDate><description><![CDATA[结果如图，会发现timer一直是null，这是因为每次setState之后，组件都会重新运行一遍，然后let timer = null；这句话透露出一个信息，不需要渲染的值可以用useRef引用，那需要渲染的值用什么引用呢？改变 ref 不会触发重新渲染，所以 ref 不适合用于存储期望显示在屏幕上的信息。如有需要，使用 state 代替。通过这个例子就能看出useRef的一个功能，那就是引用一个值，使其跳过组件的重新渲染过程。useRef是一个React Hook，它能帮助引用一个不需要渲染的值。]]></description><category></category></item><item><title><![CDATA[如何使用useMemo来优化性能]]></title><link>https://blog.youkuaiyun.com/spray_wave/article/details/136216695</link><guid>https://blog.youkuaiyun.com/spray_wave/article/details/136216695</guid><author>spray_wave</author><pubDate>Wed, 21 Feb 2024 18:26:27 +0800</pubDate><description><![CDATA[此时，count的变化就影响不到sum了，另外有一点要注意，此时的sum是单纯的一个数值，不是函数，useMemo的返回值是一个计算结果！可以看到当你点击按钮的时候，sum也在持续触发中，此时由于sum中的计算量过大，造成了明显的卡顿现象。一个没有任何参数的 calculation 函数，像这样 () =>，并且返回任何你想要的计算结果。一个由包含在你的组件中并在 calculation 中使用的所有值组成的 依赖列表。第二个参数是依赖项，类似于useEffect的用法，可以看一下下面的代码。]]></description><category></category></item><item><title><![CDATA[结合memo简述useCallback的使用场景]]></title><link>https://blog.youkuaiyun.com/spray_wave/article/details/136169866</link><guid>https://blog.youkuaiyun.com/spray_wave/article/details/136169866</guid><author>spray_wave</author><pubDate>Mon, 19 Feb 2024 15:56:51 +0800</pubDate><description><![CDATA[这是因为，组件每次渲染的时候，其中的函数都会被重新创建，React.memo使用的是浅比较，所以看似作为props的fn没有发生变化，其实它已经是一个新的fn了。useCallback能够将函数缓存起来，只依赖于给定的状态值来确定该函数是否需要重新创建，避免父组件每次更新都创建的这种情况。此时你再点击 父组件值加一  的这个按钮，会发现，即使子组件已经被memo包裹了，子组件还是触发了渲染。但是如果传入子组件的props中包含了一个函数的话，会发生什么事呢？通过这个例子，我们能看到，当。]]></description><category></category></item><item><title><![CDATA[useEffect的依赖项是Object时，即使依赖项的值没发生变化，仍然触发了useEffect]]></title><link>https://blog.youkuaiyun.com/spray_wave/article/details/136059016</link><guid>https://blog.youkuaiyun.com/spray_wave/article/details/136059016</guid><author>spray_wave</author><pubDate>Tue, 06 Feb 2024 18:02:17 +0800</pubDate><description><![CDATA[产生上述情况的原因是，useEffect的Object.is方法是通过“===”进行比较的，基础数据类型比较的是值，而引用类型比较的是内存中的引用地址，所以看似值没有变化，但是引用地址变了，就也会触发useEffect。那么问题来了，当依赖项是引用类型的时候，会发生什么呢？关于useEffect首先需要知道以下三种情况。如何解决这个问题呢？]]></description><category></category></item><item><title><![CDATA[setState是同步还是异步？]]></title><link>https://blog.youkuaiyun.com/spray_wave/article/details/136041450</link><guid>https://blog.youkuaiyun.com/spray_wave/article/details/136041450</guid><author>spray_wave</author><pubDate>Mon, 05 Feb 2024 16:29:27 +0800</pubDate><description><![CDATA[React 18 版本之前，如以下两个代码块。在合成事件和生命周期钩子函数中都是异步的。React 18 版本之后，都是异步的。在原生事件和定时器中都是同步的。]]></description><category></category></item><item><title><![CDATA[Antd的Select使用tagRender时，手动点选删除一个tag，界面展示上会同时消失两个的解决方法]]></title><link>https://blog.youkuaiyun.com/spray_wave/article/details/125396499</link><guid>https://blog.youkuaiyun.com/spray_wave/article/details/125396499</guid><author>spray_wave</author><pubDate>Tue, 21 Jun 2022 18:39:33 +0800</pubDate><description><![CDATA[Antd的Select使用tagRender时，手动点选删除一个tag，界面展示上会同时消失两个的解决方法，给Tag添加key]]></description><category></category></item><item><title><![CDATA[chrome 的Input框自动填充自带背景色的解决方法]]></title><link>https://blog.youkuaiyun.com/spray_wave/article/details/124715395</link><guid>https://blog.youkuaiyun.com/spray_wave/article/details/124715395</guid><author>spray_wave</author><pubDate>Wed, 11 May 2022 17:48:20 +0800</pubDate><description><![CDATA[使用阴影遮挡，我这里是使用的白色阴影，根据需要可以更改颜色
            input:-webkit-autofill {
                -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
           }


]]></description><category></category></item><item><title><![CDATA[js 混合排序（同时存在数字、字母、汉字、特殊符号等）]]></title><link>https://blog.youkuaiyun.com/spray_wave/article/details/124499470</link><guid>https://blog.youkuaiyun.com/spray_wave/article/details/124499470</guid><author>spray_wave</author><pubDate>Sun, 01 May 2022 10:00:00 +0800</pubDate><description><![CDATA[先将原始数据进行分类，然后分别排序重组，主要用到 localeCompare]]></description><category></category></item><item><title><![CDATA[content-disposition 获取filename是乱码，处理方法]]></title><link>https://blog.youkuaiyun.com/spray_wave/article/details/124443935</link><guid>https://blog.youkuaiyun.com/spray_wave/article/details/124443935</guid><author>spray_wave</author><pubDate>Wed, 27 Apr 2022 09:56:56 +0800</pubDate><description><![CDATA[出现这种情况， 一般都是由于设置的文件名中存在中文导致的
通过decodeURI进行解码，可获取到中文文件名
const fileName = decodeURI(res.headers?.get('content-disposition')).split('filename=')[1]


]]></description><category></category></item><item><title><![CDATA[js快速造些假数据]]></title><link>https://blog.youkuaiyun.com/spray_wave/article/details/120812567</link><guid>https://blog.youkuaiyun.com/spray_wave/article/details/120812567</guid><author>spray_wave</author><pubDate>Sun, 17 Oct 2021 16:39:22 +0800</pubDate><description><![CDATA[使用new Array（）直接造，比如造100个，1~100的随机数

Math.floor(Math.random()*(1-100)+100)//1~100的随机数
let data = Array.from(new Array(100),(x,i)=&gt;Math.floor(Math.random()*(1-100)+100))
console.log(data)
//[
  96, 95, 10, 99,  9,  2, 83, 44, 26, 40, 71, 42,
  23, 86, 73.]]></description><category></category></item><item><title><![CDATA[记录一个echarts demo社区，海量echarts图表Demo，适用于大屏]]></title><link>https://blog.youkuaiyun.com/spray_wave/article/details/120434400</link><guid>https://blog.youkuaiyun.com/spray_wave/article/details/120434400</guid><author>spray_wave</author><pubDate>Thu, 23 Sep 2021 14:35:13 +0800</pubDate><description><![CDATA[Make A Pie

]]></description><category></category></item><item><title><![CDATA[基于antd的Table写了一个可扩展列表格]]></title><link>https://blog.youkuaiyun.com/spray_wave/article/details/120412598</link><guid>https://blog.youkuaiyun.com/spray_wave/article/details/120412598</guid><author>spray_wave</author><pubDate>Wed, 22 Sep 2021 13:46:21 +0800</pubDate><description><![CDATA[在一些情景下，当Table需要展现的Columns过多时，单纯的滚动条已经无法满足用户的交互体验，此时可能更需要如图所示的可扩展列表格


代码如下，只是一个简单的demo，可根据具体场景打磨细节
import "./styles.css";
import "antd/dist/antd.css";
import * as React from "react";
import { Table, Checkbox, Button, Modal } from "antd";
const { useState,.]]></description><category></category></item></channel></rss>