Monch Lee ~
Monch Lee ~
**惯性滚动**（momentum-based scrolling）一词我们并不陌生，从浏览器到桌面应用，再到移动 App，几乎所有涉及到滚动的一些场景，都能见到它的身影。惯性滚动最早出现在 IOS 系统中，当用户的滑动手势结束，手指离开屏幕后，**页面滚动不会马上停止而是会根据滑动时的速度，滑动手势的强烈程度，继续保持一段时间的滚动效果**，当页面滚动到顶部/底部时，还有可能触发 “惯性回弹” 的效果，  ## -webkit-overflow-scrolling IOS 系统的 [Safari](https://www.apple.com/safari/) 浏览器最早支持了这一特性，我们可以为元素设置 `-webkit-overflow-scrolling: touch` 属性，让其支持惯性滚动，在 [Safira 13+ 的版本](https://developer.apple.com/documentation/safari-release-notes/safari-13-release-notes) 中，所有可滚动的框架或设置 overflow 滚动的元素默认支持了惯性滚动， ```css .view { -webkit-overflow-scrolling: touch; } ```...
 > 全文约 2000 字，读完大约需要 5 分钟 # 可能是最好的 this 解析了... 今天我们就来啃下这个你可能害怕但又不得不去吃的瓜，`this` ! ## 找对象 首先， **this 在大多数情况下是一个对象，也有可能是 undefined 或其他值**。 什么情况下，`this` 是 `undefined` ？函数运行在严格模式下，应用默认绑定规则的时候： ```js var a = 1; function...
今天我们来聊一个老生常谈的话题，跨域！ **又是跨域，烦不烦 ？网上跨域的文章那么多，跨的我眼睛都疲劳了，不看了不看了** 🤣 别走...我尽量用最简单的方式将常见的几种跨域解决方案给大家阐释清楚，相信认真看完本文，以后不管是作为受试者还是面试官，对于这块的知识都能够游刃有余。 ## 什么是“跨源” **不是讲跨域吗 ？怎么又来个“跨源” ？字都能打错的 ？** 😄...稍安勿躁，其实我们平常说的跨域是一种狭义的请求场景，简单来说，就是“跨“过[浏览器的同源策略](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)去请求资“源”，所以我们叫它“跨源”也没啥问题。那么， 跨源，源是什么？**浏览器的同源策略** 什么是同源？**协议，域名，端口都相同就是同源** 干巴巴的，能不能举个栗子？**栗子:)，有的有的**： ```js const url = 'https://www.google.com:3000' ``` 比如上面的这个 URL，协议是：**https**，域名是 **`www.google.com`**，端口是 **3000**。 不同源了会怎么样？**会有很多限制，比如**： - Cookie，LocalStorage，IndexDB 等存储性内容无法读取 -...
React 作为一个优秀的前端框架，在架构上融合了**数据驱动视图、组件化、函数式编程、面向对象、Fiber** 等经典设计哲学，在底层技术选型上涉及了 **JSX、虚拟 DOM** 等经典解决方案，在周边生态上至少涵盖了**状态管理和前端路由**两大领域的最佳实践，此外，它还自建了**状态管理机制与事件系统**，创造性地在前端框架中引入了 **Hooks** 思想...React 十年如一日的稳定输出背后，有太多值得我们去吸收和借鉴的东西。 最近在读修言的[《深入浅出搞定 React》](https://kaiwu.lagou.com/course/courseInfo.htm?courseId=510#/detail/pc?id=4849)，笔者的文笔和文风都非常有趣，又不乏干货，重读几遍后仍收获满满，这个系列是基于上述读物的笔记和自己一些思考，整理出来后分享给大家。本系列大概有 15 篇，如果觉得有帮助可以给个 star，如果发现问题请不吝在对应文章的评论区指正。 ### 文章列表 - [React进阶系列之JSX](https://github.com/campcc/blog/issues/28) - [React进阶系列之生命周期](https://github.com/campcc/blog/issues/29) - [React进阶系列之数据流](https://github.com/campcc/blog/issues/30) - [React进阶系列之Hooks设计动机](https://github.com/campcc/blog/issues/31) - [React进阶系列之Why Hooks?](https://github.com/campcc/blog/issues/33)
当我们由浅入深地认知一样新事物地时候，往往需要遵循 “Why-What-How” 的一个认知过程，这三者往往是相辅相成、缺一不可的。某种层面上，对于一个工程师而言，他/她对 “Why” 的执着程度，很大程度上能反映其职业天花板的高度。 ## Motivation 我们先从 Why 开始，聊聊 React Hooks 设计的动机。 Hooks 在 React 16.8 后被推而广之，在这之前，组件多以**类组件**和**无状态的函数组件**形式为主，而 Hooks 正是 React 团队在真刀真枪的 React 组件开发实践中，逐渐认识到的一个改进点，这背后其实涉及对**类组件**和**函数组件**两种组件形式的思考和侧重。因此，你首先得知道，什么是类组件、什么是函数组件，并完成这两种组件形式的辨析。 ### 类组件 基于 ES6 Class 的写法，通过继承...
 本篇我们来深入一个问题，**Why React Hooks？** [上一篇](https://github.com/campcc/blog/issues/31)我们几乎花了通篇的文字阐述了 Hooks 的设计理念，最后的结论是 **函数组件从设计思想上来看，更加契合 React 的理念**，这可以作为上述问题的一个答案，除此之外，还有哪些理由可以作为我们去使用 React Hooks 的原因吗？ ## Why Hooks？ 以 “Why xxx” 开头的问题，往往都没有标准答案，但会有一些关键的“点”，除了设计理念层面，还有以下原因， - 告别难以理解的 Class - 解决业务逻辑难以拆分的问题 - 使状态逻辑复用变得简单可行 接下来我们就上述三个点展开来看一下，Why Hooks？ ###...
## 数据流 React 的核心特征是 **数据驱动视图**，这个特征在业内有一个非常有名的函数式来表达： ```bash UI = render(data) UI = f(data) ``` React 的视图会随着数据的变化而变化，我们说的组件通信其实就是组件之间建立的数据上的连接，这背后是一套环环相扣的 React 数据流解决方案。 ### 基于 props 的单向数据流 基于 props 传参，可以实现简单的父子，子父和兄弟组件通信，所谓单向数据流，指的就是当前组件的 state 以 props 的形式流动时，只能流向组件树中比自己层级更低的组件。React 中的单向数据流场景包括， -...
React 作为一个优秀的前端框架，在架构上融合了**数据驱动视图、组件化、函数式编程、面向对象、Fiber** 等经典设计哲学，在底层技术选型上涉及了 **JSX、虚拟 DOM** 等经典解决方案，在周边生态上至少涵盖了**状态管理和前端路由**两大领域的最佳实践，此外，它还自建了**状态管理机制与事件系统**，创造性地在前端框架中引入了 **Hooks** 思想...React 十年如一日的稳定输出背后，有太多值得我们去吸收和借鉴的东西。 题外：关于学习，我认为，学习的本质是重复。 ## JSX 三问 如果你不能很好地回答下面的问题，那你可能把 JSX 想的过于简单了。 **1. JSX 的本质是什么？它和 JS 之间到底是什么关系？** JSX 是 Javascript 的语法扩展，它和模板语言很接近，但是充分具备 Javascript 的能力，通过 Babel 等编译工具编译后 JSX...
React 生命周期已经是一个老生常谈的话题了，几乎没有哪一门 React 入门教材会省略对组件生命周期的介绍。然而，入门教材在设计上往往追求的是“简单省事、迅速上手”，这就导致许多同学对于生命周期知识的刻板印象为“背就完了、别想太多”。 “背就完了”这样简单粗暴的学习方式，或许可以帮助你理解“What to do”，到达“How to do”，但却不能帮助你去思考和认知“Why to do”。作为一个专业的 React 开发者，我们必须要求自己在知其然的基础上，知其所以然。 以史为镜，可以知兴衰，React 生命周期经历了 V15, V16.3, V16.4 等多个版本的迭代，我们有必要对这版本的生命周期进行探讨、比对和总结，通过搞清楚一个又一个的“Why”，来**建立系统而完善的生命周期知识体系**。 ### 生命周期背后的设计思想有哪些？ 组件化和虚拟 DOM ### 虚拟 DOM 在整个 React 工作流中有哪些作用？ 虚拟...
文字溢出怎么展示，你的需求是什么？单行还是多行？截断，省略，自定义样式，自适应高度？在这里你都能找到答案。接下来我会由浅入深，从原理到实现，带你一步步揭开多行省略的面纱。我们先从最简单的单行溢出省略开始， ## 热身，单行省略 这是一个全宇宙统一的方案，没有太多的魔法，[戳我查看示例](https://codepen.io/lycheelee/pen/abJvJXg) ```css /* 原理：设置文字不换行，溢出后隐藏，截断显示省略符 */ .ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } ```  如何实现多行省略呢？先从最简单的 `line-clamp` 开始吧。 ## 最简单的多行省略，line-clamp 通过 CSS 属性 `-webkit-line-clamp ` 可以把块容器中的内容限制为指定的行数，[示例](https://codepen.io/lycheelee/pen/KKWzWWg?editors=1100)...