萨尔茨堡的树枝

state到底是同步还是异步的batchUpdate 批量更新概念，以及批量更新被打破的条件。 类组件 setState1setState(obj,callback) 第一个参数：当 obj 为一个对象，则为即将合并的 state ；如果 obj 是一个函数，那么当前组件的 state 和 props 将作为参数，返回值用于合并新的 state。 第二个参数 callback ：callback 为一个函数，函数执行上下文中可以获取当前 setState 更新后的最新 state 的值，可以作为依赖 state 变化的副作用函数，可以用来做一些基于 DOM 的操作。 12345678/* 第一个参数为function类型 */ this.setState((state,props)=>{ return { number:1 } }) /* 第一个参数为object类型 */ this.setState({ number:1 },()=>{ console.log(this.state. ...

在 React 世界里，一切皆组件，我们写的 React 项目全部起源于组件。组件可以分为两类，一类是类（ Class ）组件，一类是函数（ Function ）组件。 React组件结构123456789101112131415161718192021222324252627282930/* 类 */ class testClass { sayHello=()=>console.log('hello, world') } /* 类组件 */export default class FreshHot extends React.PureComponent<Partial<any>> { state={ message:`hello ，world!` } sayHello=()=> this.setState({ message : 'hello, change' }) componentDidMount() { // ...

jsxJSX 元素节点会被编译成 React Element 形式，使用React.creatElement方法。 createElement 参数： 第一个参数：如果是组件类型，会传入组件对应的类或函数；如果是 dom 元素类型，传入 div 或者 span 之类的字符串。 第二个参数：一个对象，在 dom 类型中为标签属性，在组件类型中为 props 。 其他参数：依次为 children，根据顺序排列。 举个例子： 12345<div> <TextComponent /> <div>hello,world</div> let us learn React!</div> 上面的代码会被 babel 先编译成： 12345React.createElement("div", null, React.createElement(TextComponent, null), React.createElement("div" ...

我们都知道在 React 组件中向子组件传递数据很容易，但是如何向 props.children 传递数据呢？ 最近在做一个倒计时组件，就涉及到向 props.children()传参，实际上ButtonGroup/CheckboxGroup 等组件也时常会遇到相同的情况，所以今天我们来探究一下props.children()。 向子组件传参将需要传递的数据放到props里面即可，例如： 123<div className={styles.header}> <HeadSwiper bannerList={productImgList}/></div> 上面示例就是简单的向HeadSwiper传递图片列表数据。 通过props.children()传参这里以倒计时组件为例，countDown组件需要将计算后的时分秒传给他的子元素，子元素通过一个回调函数获取这个参数，如下所示： 12345678910111213141516171819202122232425// layoutconst renderCoun ...

webpack核心概念： entry 入口 一般是src/index.js output webpack的输出 最终构建出来的静态文件 loader 模块代码转换的工作由 loader 来处理 loader是一个转换器，负责把某种文件格式的内容转换成 webpack 可以支持打包的模块。 plugin 插件 plugin 用于处理更多其他的一些构建任务 mode 构建模式 webpack开发环境最基础的构建需求 构建我们发布需要的 HTML、CSS、JS 文件 使用 CSS 预处理器来编写样式 引用图片 使用 Babel 来支持 ES 新特性 本地提供静态服务以方便开发调试 webpack5 css 背景图片无法加载问题的解决思路：webpack5 增加了asset mudule（资源模块）https://blog.csdn.net/Coralpapy/article/details/119419137 webpack的初衷是让js支持模块化管理。所谓 webpack 构建的起点，本质上也是一个 module，而我们在设置好 webpack 后，开发的过程亦是在写一个个的业务 mo ...

HTTP1HTTP1缺点 高延迟 — 队头阻塞(Head-Of-Line Blocking) 无状态特性 — 阻碍交互 明文传输 — 不安全性 不支持服务端推送 PS: 队头阻塞是指当顺序发送的请求序列中的一个请求因为某种原因被阻塞时，在后面排队的所有请求也一并被阻塞，会导致客户端迟迟收不到数据； 无状态是指协议对于连接状态没有记忆能力。纯净的 HTTP 是没有 cookie 等机制的，每一个连接都是一个新的连接。 Header里携带的内容过多，”大头儿子“； HTTP/1.1在传输数据时，所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份，这在一定程度上无法保证数据的安全性。 只能从客户端向服务器端发起请求。 SPDY协议谷歌公开了自行研发的 SPDY 协议，主要解决HTTP/1.1效率不高的问题。HTTP1.1主要问题就是安全不足和性能不高。 HTTP2HTTP2新特性 二进制传输 HTTP/2 将请求和响应数据分割为更小的帧，并且它们采用二进制编码，二进制协议解析起来更高效。HTTP/2 中，同域名下所有通信都在单个连接上完成，该连接可以承载任意数量的双向数据流 ...

方式一通过contentWindow和contentDocument这两个API: 1234567var iframe = document.getElementById("iframe1");var iwindow = iframe.contentWindow;var idoc = iwindow.document;var idocument = iframe.contentDocument;console.log("window",iwindow);//获取iframe的window对象console.log("document",idoc); //获取iframe的documentconsole.log("html",idoc.documentElement);//获取iframe的html 其中iframe.contentWindow可以获取iframe的window对象,iframe.contentDocument可以获取iframe的document对象。 方式二结合Name属性，通过window提供的frames获取: 1234567<iframe src ="/ ...

let 命令 块级作用域 const 命令 顶层对象的属性 globalThis 对象 let命令for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。 不存在变量提升，即声明之前不可使用。 暂时性死去（TDZ，temporal dead zone）在代码块内，使用let命令声明变量之前，该变量都是不可用的。 不允许重复声明。 总结：ES6 规定暂时性死区和let、const语句不出现变量提升。 块级作用域ES5只有全局作用域和函数作用域，let实际上为 JavaScript 新增了块级作用域。 ES6: 允许在块级作用域内声明函数。 函数声明类似于var，即会提升到全局作用域或函数作用域的头部。 同时，函数声明还会提升到所在的块级作用域的头部。 1234567// 块级作用域内部，优先使用函数表达式{ let a = 'secret'; let f = function () { return a; };} ES6 的块级作用域必须有大括号，如果没有大括号，JavaScri ...

在移动设备中，几乎所有的操作都和触摸有关，而基于这一特性，近年来在移动端中也兴起了一些较为特别的交互方式——手势操作。本文将聚焦于 Web 页面中的各种手势操作。 手势移动端上用户界面的完整性是建立在手势的基础上，手势的应用是在移动设备上的重要用户体验。由于移动端产品屏幕相对来说都比较有限，所以交互设计师需要不断的保证最有效和最便利的手势得以应用。为了合理运用手势，首先我们需要了解什么是手势，手势的定义是什么？ 手势是指人类用语言中枢建立起来的一套用手掌和手指位置、形状的特定语言系统。手持设备中的手势是指，将一系列多点触摸事件综合成为一个单独的事件。我们具体来分析会发现手势其实分为两个状态：接触力和随后的接触活动。 触摸力是用户的手指在屏幕上按压时产生的。例如，如果你在菜单项上点击了一个最基本的手势，你就有一个触摸的操作。接触活动是针对接触力后产生的结果。例如，你对一张图片进行双击，图片就会放大内容。接触的活动可能会和不同的接触力组合，产生不同效果。 手势的目的： 提供真正的便利，而非多一种操作方式 提供有效反馈 不增加认知负担和选择成本（为用户提供一个较好的方案即可，尽量避 ...

本文从动效这一主题入手，主要讲解Canvas通过利用景深和位移变化实现景深动画效果的实现方案，旨在帮助大家开拓更多的动效实现方法。 背景最近去拍了一套照片，后期和摄影师选片聊天的时候对光圈，镜头各种很感兴趣，学习了一个新词汇——景深，恰巧又在掘金看到有博主对前段时间哔哩哔哩的首焦banner的一个研究，发现是用几张图片配合 CSS 实现了景深动效，于是百度找了一些资料，决定用Canvas实现一个简单的景深动效。 景深效果原理在聊景深之前，我们先来聊一聊另外一个比较好理解的词：背景虚化。如果你不知道景深是什么，想必也听说过背景虚化这个词。比如拍摄人像的时候，人像的部分是清楚的，而人像后面的背景是虚的，这样人像就更加凸显出来，这样的效果就是背景虚化。 背景虚化其实就是浅景深的表现。那么到底什么是景深呢？ 景深（DOF），是指在摄影机镜头或其他成像器前沿能够取得清晰图像的成像所测定的被摄物体前后距离范围。 我们以现实中相机为例，相机在成像的时候，存在一个合焦面，只有处于合焦面上的物体成像是最清晰的，而合焦面之外的平面所成的像，是模糊的。 现实世界中的一点在照片上成的像，并不是理想的一个点 ...