blog
blog copied to clipboard
nanyang24
📒 Yang's Notes & Blog
# Permissions API Desc： The Permissions API allows a web application to be aware of the status of a given permission, to know whether it is granted, denied or if...
# 升级 React 版本 记录/文档 ## Why `React` 目前最新的公开版本为 `16.7`，而 目前项目版本为 `15.5`。 ### 对比有如下重要变化： ### 新核心架构：Fiber （16.0） 异步渲染：周期性地对浏览器执行调度渲染工作的策略。 通过异步渲染，避免阻塞了主线程，实施更快地响应。 异步渲染能够将渲染任务划分为多块，这意味着几乎所有的行为都是同步发生的。 React 16.X 使用浏览器提供的 API 间歇性地检查当前是否还有其他任务需要完成，从而实现了对主线程和渲染过程的间接管理。 例如拖动、onChange等在不考虑防抖情况，以及频繁setState的场景，相对于之前版本，有一定性能的提升。 这意味着 React 可以在更细的粒度上控制组件的绘制过程，从最终的用户体验来讲，用户可以体验到更流畅交互及动画体验。而因为异步渲染涉及到 React...
OK，如果经常有看 React blog 的同学一定对本篇的标题不陌生，这是官方博客是一篇关于使用 `Derived State` 的使用方法建议。 > [react 官方博客指引：You Probably Don't Need Derived State](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html) 看完有些想法，简单记录下 ## 开始 在 React 中，`Derived State` 是产生于生命周期方法中，无论是16.3前的： `componentWillReceiveProps` ，还是16.3之后代替它的、新的方法： `getDerivedStateFromProps`。 所谓的 `Derived State`，意思就是 **`子组件根据父组件传来的...
# React Hooks (Proposal) 在 React v16.7.0 alpha 版本里，提出了一个新的 Feature Proposal ：Hooks ，对社区以及以后前端发展所带来的影响是巨大的。 > 学习 Hooks 的知识需要对 React 生态有较深入的理解 # What is the Hooks ？ Hooks 是 React 内部组件中的一系列特殊函数，直观带来的改变是引入state、生命周期函数、或者其他 React...
# 再读 You Don’t Know JavaScript 上卷 有感笔记 ## 1.1：JS 是 解释语言 or 编译语言 虽然书中强调 **JavaScript 引擎进行编译的步骤和传统的编译语言非常相似** 书中认为 JS 是 编译语言 是基于真正执行前会经历：词法分析、语法分析（转AST）、代码生成 但这步编译其实并不是必须的，只是一种运行引擎的优化措施（如 JIT）。 ### 原因 JavaScript 从短短10天诞生，就是纯粹的解释语言。 作者 **Brendan...
# Memoization # What is memoization? `Memoization` 是一种优化技术，`缓存一些消耗性能的函数执行后的结果，以便在下次使用相同的参数调用相同函数时立即返回结果`。 > 许多编程语言中都有实现。 > `Memoization` 是使 递归 / 迭代函数 运行得更快的编程实践。 它在递归函数中特别有用，因为在递归时调用更可能使用相同的参数调用。以递归 `factorial` 函数为例： ```js function factorial(num) { if(num === 1) { return 1...
> 不同的经历阅历会对同一件事物产生不同的看法 > 一切都是一个 Circle，最后都会归于原点。 # let 声明提升了吗 ## 前言 言归正传，有学过 JS 的都知道 var 可以声明变量，常见的还有ES6的 let/const，以及声明函数的 function 关键字。那么肯定也都了解过 var 的声明提升，那么 let/const是否有声明提升呢？？ 很多人，至少是我，在之前是粗浅地认为 let/const 是没有声明提升的，这样认为的原因是在这两个关键字声明变量之前，是不可以访问这些变量的。 如果之前的理解和我一样，那么你要记住了：**JS中所有变量的声明(包括函数)，都有声明提升的规则** ## 何为 声明提升 在真正理解刚才那句话之前，我们来规范一下之前认为 var...
# 优化处理图片加载过程 > 下班后和同事们吹水、讨论了一下经常逛的技术blog网站，列举了一下，eg.: medium、Reddit、Hacker News、SF、 其中说到了 `medium` 的前端技术很不错，页面做了很多优化点，其中一点就是 加载图片 的时候，图片会有一段高斯模糊的过程，由于用户可以提前感知到图片的大致内容，使得网页加载整个体验非常顺滑。 > 具体流程，可以随便打开medium的帖子感受下（如果想详细看到整个过程。devTools 禁用缓存并限制网速） # 开始 其实有关这部分的 DOM 结构很简单，简化后如下： ```html ``` 下面是实际的例子： ```html <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg"> ``` > 图像大小取决于设备。...
# Resource Representational State Transfer - [Fielding Dissertation: CHAPTER 5: Representational State Transfer (REST)](https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm) - [HTTP/1.1: Status Code Definitions](https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html) - [API design - Microsoft-Azure](https://docs.microsoft.com/en-us/azure/architecture/best-practices/api-design) 用URL定位资源，用HTTP描述操作。
React 16.3 是比较重大的一次版本更新，涉及 `新的lifecycle methods`，`全新的Context Api`，`Ref Api`等 > [详见官方文档](https://reactjs.org/blog/2018/03/29/react-v-16-3.html) 首先吸引到我的当然是生命周期的改变，就来简单谈一下，后面会写详细的帖子关于修改生命周期的原因 # The New Lifecycle 涉及改变的三个 Lifecycle func： 1. `componentWillMount` 2. `componentWillUpdate` 3. `componentWillReceiveProps` 在17.0版本之前，16.3版本开始，这三个 methods 将带有 UNSAFE_ 的前綴来标识，目的当然是为了让我们逐步的去修改项目中有关于这些Lifecycle func的代码，那 React...