<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[a_l_f_的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/a_l_f_</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; a_l_f_]]></copyright><item><title><![CDATA[替换嵌套数组（树结构）某一对象]]></title><link>https://blog.youkuaiyun.com/a_l_f_/article/details/125219016</link><guid>https://blog.youkuaiyun.com/a_l_f_/article/details/125219016</guid><author>a_l_f_</author><pubDate>Fri, 10 Jun 2022 12:05:42 +0800</pubDate><description><![CDATA[替换嵌套数组（树结构）某一对象]]></description><category></category></item><item><title><![CDATA[爬坑！！antd中select组件的defaultValue取不到数据问题]]></title><link>https://blog.youkuaiyun.com/a_l_f_/article/details/120951565</link><guid>https://blog.youkuaiyun.com/a_l_f_/article/details/120951565</guid><author>a_l_f_</author><pubDate>Mon, 25 Oct 2021 15:02:24 +0800</pubDate><description><![CDATA[爬坑！！antd中select组件的defaultValue相关问题
需求一：是这样的，想要在下拉菜单的框里首先显示一个默认值，默认下拉菜单的第一项，而不是placeholder。
但是由于下拉菜单是请求回来的数据，因为你不能在页面渲染的时候就直接展示出数据，所以有了一个解决办法！使用key！！！让key值等于defaultValue的值。
const [activites, setActivites] = useState([]);
...
useEffect(() =&gt; {
	setActivit]]></description><category></category></item><item><title><![CDATA[redux基础入门学习总结]]></title><link>https://blog.youkuaiyun.com/a_l_f_/article/details/119351548</link><guid>https://blog.youkuaiyun.com/a_l_f_/article/details/119351548</guid><author>a_l_f_</author><pubDate>Tue, 03 Aug 2021 15:41:28 +0800</pubDate><description><![CDATA[redux基础学习总结
​      redux是对状态统一进行管理，如果你的项目非常小，不需要使用redux。在开发过程中，如果你感觉你的状态不好管理，此时你就要想到，需要使用redux统一管理状态了。
三大原则
Redux 遵守下面三大原则：


单一数据源
在 Redux 中，所有的状态都放到一个 store 里面，一个应用中一般只有一个 store。在Redux这个对象上，有一个api，叫createStore，Redux.createStore就可以创建一个仓库。需要给仓库分配一个叫reducer]]></description><category></category></item><item><title><![CDATA[react基础入门级学习总结]]></title><link>https://blog.youkuaiyun.com/a_l_f_/article/details/119351237</link><guid>https://blog.youkuaiyun.com/a_l_f_/article/details/119351237</guid><author>a_l_f_</author><pubDate>Tue, 03 Aug 2021 15:37:26 +0800</pubDate><description><![CDATA[react基础入门级学习总结
组件
​		对于react来说核心是组件，声明组件有两种方式，**一种是通过类创建，一种是通过函数创建。**通过类创建的组件中可以放状态，这类组件叫有状态组件。通过函数创建的组件不可以放状态，这类组件叫无状态组件。
通过类创建一个组件：
&lt;script type="text/babel"&gt;
    class MyHeader extends React.Component{
        render(){    // 需要返回一个jsx
           ]]></description><category></category></item><item><title><![CDATA[react hooks初学者入门总结]]></title><link>https://blog.youkuaiyun.com/a_l_f_/article/details/118934088</link><guid>https://blog.youkuaiyun.com/a_l_f_/article/details/118934088</guid><author>a_l_f_</author><pubDate>Tue, 20 Jul 2021 16:07:38 +0800</pubDate><description><![CDATA[react hooks 学习之路
近期接触react hooks，在这里总结一下学习之路。总的来说，react hooks的学习就是几个方法的学习，废话不多说，起飞！
useState
之前写的类组件是有状态组件，我们通过setState去更改状态，但是hook是使用的函数组件，函数组件是无状态组件，但是我们想在函数组件中维护自己的状态，该怎么办？所以就遇到了useState这个方法，不仅可以维护自己的state,还可以通过state去控制UI的展示！
import React, { useState } ]]></description><category></category></item><item><title><![CDATA[React中父子传参以及兄弟传参]]></title><link>https://blog.youkuaiyun.com/a_l_f_/article/details/118900569</link><guid>https://blog.youkuaiyun.com/a_l_f_/article/details/118900569</guid><author>a_l_f_</author><pubDate>Mon, 19 Jul 2021 17:06:47 +0800</pubDate><description><![CDATA[React中父子传参以及兄弟传参
由于之前都是使用vue开发，今天遇到了这个react中父子传参的问题，所以就来研究一下。话不多说，直奔主题！
父传子(通过props属性)
直接上代码！
父组件
import React from 'react';
import Children from './Children';
class Father extends React.Component{
    constructor(){
        super();

    }
    render(){
 ]]></description><category></category></item><item><title><![CDATA[回流和重绘]]></title><link>https://blog.youkuaiyun.com/a_l_f_/article/details/110407119</link><guid>https://blog.youkuaiyun.com/a_l_f_/article/details/110407119</guid><author>a_l_f_</author><pubDate>Mon, 30 Nov 2020 21:47:54 +0800</pubDate><description><![CDATA[回流和重绘
浏览器的渲染过程
本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘，如果大家想直接看如何减少回流和重绘，可以跳到后面。

从上面这个图上，我们可以看到，浏览器渲染过程如下：


解析HTML，生成DOM树，解析CSS，生成CSSOM树


将DOM树和CSSOM树结合，生成渲染树(Render Tree)


Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）


Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
]]></description><category></category></item><item><title><![CDATA[ES6新增新操作数组的方法]]></title><link>https://blog.youkuaiyun.com/a_l_f_/article/details/110402037</link><guid>https://blog.youkuaiyun.com/a_l_f_/article/details/110402037</guid><author>a_l_f_</author><pubDate>Mon, 30 Nov 2020 19:49:29 +0800</pubDate><description><![CDATA[ES6新增新操作数组的方法
1、find()：
传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它，并且终止搜索。
const arr = [1, "2", 3, 3, "2"]
console.log(arr.find(n =&gt; typeof n === "number")) // 1

2、findIndex()：
传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它的下标，终止搜索。
const arr = [1, "2", 3, 3, "2"]
console.log]]></description><category></category></item><item><title><![CDATA[常用数组操作方法（未完待续）]]></title><link>https://blog.youkuaiyun.com/a_l_f_/article/details/110400054</link><guid>https://blog.youkuaiyun.com/a_l_f_/article/details/110400054</guid><author>a_l_f_</author><pubDate>Mon, 30 Nov 2020 19:45:04 +0800</pubDate><description><![CDATA[常用数组操作方法
一、concat()
concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，仅会返回被连接数组的一个副本。
var arr1 = [1,2,3];
var arr2 = [4,5];
var arr3 = arr1.concat(arr2);
console.log(arr1); //[1, 2, 3]
console.log(arr3); //[1, 2, 3, 4, 5]

二、join()
join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔]]></description><category></category></item><item><title><![CDATA[正则表达式完整总结，收藏起来]]></title><link>https://blog.youkuaiyun.com/a_l_f_/article/details/110395256</link><guid>https://blog.youkuaiyun.com/a_l_f_/article/details/110395256</guid><author>a_l_f_</author><pubDate>Mon, 30 Nov 2020 19:21:57 +0800</pubDate><description><![CDATA[正则表达式完整总结，收藏起来
1. 概述
正则表达式（regular expression）是一种表达文本模式（即字符串结构）的方法。
创建方式有两种方式：
一种是使用字面量，以斜杠表示开始和结束。
var regex = /xyz/

另一种是使用RegExp构造函数。
var regex = new RegExp('xyz'); 

它们的主要区别是，第一种方法在引擎编译代码时，就会新建正则表达式，第二种方法在运行时新建正则表达式，所以前者的效率较高。而且，前者比较便利和直观，所以实际应用中，基本上都采]]></description><category></category></item><item><title><![CDATA[聊一聊JS的立即调用函数]]></title><link>https://blog.youkuaiyun.com/a_l_f_/article/details/110394727</link><guid>https://blog.youkuaiyun.com/a_l_f_/article/details/110394727</guid><author>a_l_f_</author><pubDate>Mon, 30 Nov 2020 18:44:30 +0800</pubDate><description><![CDATA[聊一聊JS的IIFE
定义
IIFE: Immediately Invoked Function Expression，意为立即调用的函数表达式，也就是说，声明函数的同时立即调用这个函数。
对比一下，这是不采用IIFE时的函数声明和函数调用：
function foo(){
  var a = 10;
  console.log(a);
}
 
foo();

下面是IIFE形式的函数调用：
(function foo(){
  var a = 10;
  console.log(a);
})();

函数]]></description><category></category></item><item><title><![CDATA[js中attribute和property区别]]></title><link>https://blog.youkuaiyun.com/a_l_f_/article/details/110387528</link><guid>https://blog.youkuaiyun.com/a_l_f_/article/details/110387528</guid><author>a_l_f_</author><pubDate>Mon, 30 Nov 2020 14:32:40 +0800</pubDate><description><![CDATA[js中attribute和property区别
Attribute
Attribute是HTML上设置的属性，在HTML中显式地设置，或者通过setAttribute()方法设置。

比如这样一段HTML代码，实际上它有三个attribute属性，我们可以打印出来看看：


对于Attribute而言，它有三个常用的方法setAttribute()、getAttribute()以及removeAttribute()：

对于用setAttribute()和removeAttribute()方法设置和删除的属]]></description><category></category></item><item><title><![CDATA[快速、简洁讲明Vue中v-for循环key的作用]]></title><link>https://blog.youkuaiyun.com/a_l_f_/article/details/110382171</link><guid>https://blog.youkuaiyun.com/a_l_f_/article/details/110382171</guid><author>a_l_f_</author><pubDate>Mon, 30 Nov 2020 11:17:51 +0800</pubDate><description><![CDATA[快速、简洁讲明Vue中v-for循环key的作用
概要
关于v-for中的key问题，其实这已经是个很常见的问题了，基本网上一搜一大把，面试的时候也常常会被问到，讲这个问题可能会设计DOM与虚拟DOM，还有很重要的Diff算法。
作用(重头戏)
我们都知道，Vue很大的一个特点就是双向数据绑定，数据一旦改变，那么页面就渲染新的数据呈现在页面上。
那么问题来了，对于用v-for渲染的列表数据来说，数据量可能一般很庞大，而且我们经常还要对这个数据进行一些增删改操作。
假设我们给列表增加一条数据，整个列表都要重新]]></description><category></category></item><item><title><![CDATA[webpack的异步加载原理及分包策略]]></title><link>https://blog.youkuaiyun.com/a_l_f_/article/details/110376129</link><guid>https://blog.youkuaiyun.com/a_l_f_/article/details/110376129</guid><author>a_l_f_</author><pubDate>Mon, 30 Nov 2020 11:03:29 +0800</pubDate><description><![CDATA[webpack的异步加载原理及分包策略
webpack 异步加载原理
webpack ensure 有人称它为异步加载，也有人称为代码切割，他其实就是将 js 模块给独立导出一个.js 文件，然后使用这个模块的时候，再创建一个 script 对象，加入到 document.head 对象中，浏览器会自动帮我们发起请求，去请求这个 js 文件，然后写个回调函数，让请求到的 js 文件做一些业务操作。
举个例子

需求：main.js 依赖两个 js 文件：A.js 是点击 aBtn 按钮后，才执行的逻辑，B.]]></description><category></category></item><item><title><![CDATA[函数中的this的四种绑定形式 — 大家准备好瓜子，我要讲故事啦~~]]></title><link>https://blog.youkuaiyun.com/a_l_f_/article/details/110352445</link><guid>https://blog.youkuaiyun.com/a_l_f_/article/details/110352445</guid><author>a_l_f_</author><pubDate>Sun, 29 Nov 2020 20:44:42 +0800</pubDate><description><![CDATA[函数中的this的四种绑定形式 — 大家准备好瓜子，我要讲故事啦~~
【故事】有一个年轻人叫"迪斯"（this）,有一天，迪斯不小心穿越到一个叫 “伽瓦斯克利”（javascript）的 异世界，此时此刻迪斯身无分文， 他首先要做的事情就是——找到他的住宿的地方——调用函数的对象

this的默认绑定
【故事——线路1】如果迪斯（this）直到天黑前都没有找到能收留自己的住所，他眼看就要过上非洲难民的生活， 这时候，一位乐善好施的魔法师村长——window救世主一般地出现了：先住在我家吧！

当一个函数没有]]></description><category></category></item><item><title><![CDATA[最全Vue知识点（基础到进阶，覆盖vue3）]]></title><link>https://blog.youkuaiyun.com/a_l_f_/article/details/110342117</link><guid>https://blog.youkuaiyun.com/a_l_f_/article/details/110342117</guid><author>a_l_f_</author><pubDate>Sun, 29 Nov 2020 20:23:15 +0800</pubDate><description><![CDATA[最全Vue知识点（基础到进阶，覆盖vue3）

基础篇
说说你对MVVM的理解

Model-View-ViewModel的缩写，Model代表数据模型，View代表UI组件,ViewModel将Model和View关联起来
数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据

Vue2.x响应式数据/双向绑定原理

Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据。其中，View变化更新Data，可以通过事件监听的方式来实现，所以 V]]></description><category></category></item><item><title><![CDATA[CSS3新特性]]></title><link>https://blog.youkuaiyun.com/a_l_f_/article/details/110291866</link><guid>https://blog.youkuaiyun.com/a_l_f_/article/details/110291866</guid><author>a_l_f_</author><pubDate>Sat, 28 Nov 2020 20:39:07 +0800</pubDate><description><![CDATA[CSS3新特性
选择器
:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
:nth-child(even) /* 按照偶数 */
:nth-child(odd)  /* 按照奇数 */
:disabled /* 选择每个禁用的E元素 */
:checked /* 选择每个被选中的E元素 */
:not(selector) /* 选择非 selector 元素的每个元素 */
]]></description><category></category></item><item><title><![CDATA[H5新增特性]]></title><link>https://blog.youkuaiyun.com/a_l_f_/article/details/110291271</link><guid>https://blog.youkuaiyun.com/a_l_f_/article/details/110291271</guid><author>a_l_f_</author><pubDate>Sat, 28 Nov 2020 20:25:22 +0800</pubDate><description><![CDATA[H5新增特性
H5新增标签




标签
描述




header
定义了文档的头部区域


footer
定义了文档的尾部区域


section
定义文档中的节（section、区段）


nav
定义文档的导航


aside
定义页面的侧边栏内容


article
定义页面独立的内容区域


detailes
用于描述文档或文档某个部分的细节


summary
标签包含 details 元素的标题


dialog
定义对话框，比如提示框


H5新增表单 Input 输入类型




inp]]></description><category></category></item><item><title><![CDATA[跨域问题的思考]]></title><link>https://blog.youkuaiyun.com/a_l_f_/article/details/110263180</link><guid>https://blog.youkuaiyun.com/a_l_f_/article/details/110263180</guid><author>a_l_f_</author><pubDate>Sat, 28 Nov 2020 17:47:47 +0800</pubDate><description><![CDATA[跨域问题的思考
什么是跨域？
首先我们需要知道什么是跨域，跨域指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器对JavaScript 施加的安全限制。协议，域名，端口，三者有一不一样，就是跨域

如何解决跨域问题
JSONP
　　JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
response 添加 ]]></description><category></category></item><item><title><![CDATA[js中关于setTimeout异步的思考]]></title><link>https://blog.youkuaiyun.com/a_l_f_/article/details/110260524</link><guid>https://blog.youkuaiyun.com/a_l_f_/article/details/110260524</guid><author>a_l_f_</author><pubDate>Sat, 28 Nov 2020 10:45:43 +0800</pubDate><description><![CDATA[js中关于setTimeout的思考
首先看看下面的代码会打印出什么？
 for(var i =0;i&lt;5;i++){
        setTimeout(function(){
            console.log(i);
        },1000);
    }

控制台在一秒后输出5次5

这里和浏览器的事件队列和事件循环机制有关系。
也就是说，setTimeout是一个宏任务，它在事件队列里排在了script标签这个宏任务的后面。
浏览器会先执行第一个宏任务，也就是读取scri]]></description><category></category></item></channel></rss>