holyzheng
尝试了很久trackHeight这个参数，最后发现需要传入number值才能生效，但是文档中却是string。
作者：holyZheng 转载请注明出处 ## DOM > 严格说DOM并不是JavaScript本身的一部分，但是还是在此列出总结。 DOM（文档对象模型）是针对HTML和XML文档的一个**API（应用程序编程接口）**。DOM描述了一个层次化的节点树，允许开发人员添加，移除和修改页面的某一部分。 ### 节点层次 DOM可以将任何html或xml文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型。 常见类型： #### 1. **node类型** JavaScript中所有节点类型都继承自node类型，所以都共享着相同的基本属性和方法，比如 - nodeType，nodeName，nodeValue等属性； - 反映节点关系的childNodes，parentNode，previousSibling，nextSibling，fitstChild，lastChild等属性； - 操作节点的方法appendChild(newNode)，insertBefore(newNode, node)，replaceChild(newNode, node)，removeChild(node)等； - 其他方法 可深浅拷贝节点的 cloneNode() #### 2. **Document类型**...
## JSX JSX其实就是React.createElement的语法糖，不一定要使用，但是推荐使用。因为： 1. JSX可以让我以类似 XML 的方式去开发，比起直接编写React.createElement 要更加简便且可读性更高。 2. babel可以帮我们将JSX转成React.createElement。 3. JSX 比起模版的方法要更加的灵活，语法、指令等概念更少。 ## babel如何将JSX转成React.createElement的 ```JS // babel 深度优先遍历AST，在进入节点的时候调用下面visitor module.exports = function (babel) { var t = babel.types; return { ...
计算机网络相关
> ps：物理层，数据链路层，网络层（IP），运输层（UDP、TCP），应用层（http） [url构成](https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/What_is_a_URL) ## 从在浏览器输入url开始，发送了什么？ ### 1. 进行DNS解析 dns解析就是一个从域名找到对应ip的过程 1. 查看浏览器缓存 2. 查看系统缓存，查看本地hosts文件，查看是否有对应ip 3. 查询路由器缓存和ISP缓存 4. 查询本地DNS服务器 5. 查询域名服务器 （分级查询：根域服务器 -》 顶级域名服务器 -》主域名服务器） ### 2. TCP连接（传输层协议） 拿到ip后，开始进行tcp连接（三次握手，四次挥手） #### 三次握手 **通俗解释**：...
前端演变的理解
作者：holyZheng 转载请注明出处 ## 什么是前端 web应用是一种运行在浏览器中的软件，这些软件的图形用户界面（Graphical User Interface, 即GUI）称为前端。（前端是一种GUI应用） ## 前后端不分离时代 web1.0 早期，前后端开发是一体的，网站开发采用后端为主的mvc模式，前端相当于后端的view层。前端的主要工作是编写页面模板，后端代码根据浏览器请求，读取模板，替换变量，生成静态页面，发送给浏览器。 ## Ajax技术诞生 web2.0 > AJAX不是JavaScript的规范，Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。 2005年 Ajax 正式提出，前后端分工逐渐清晰，前后端协作的关键是Ajax接口。前端不再是后端的模板，前后端分离，网页也从静态网页转为动态网页。前端开始逐渐复杂。 ## 前端mv* 为了降低前端开发的复杂度，出现了大量前端MV*框架比如Backbone，KnockoutJS、AngularJS 等等，对代码进行合理的分层，如models，controllers，view，viewmodel等，让代码各施其职。 ## 前端工程化 随着前后端分工的清晰，前端工作的复杂度的增高，开始出现了前端工程化的概念，前端工程化分为几个阶段...
> ps：本文就来回顾一下webpack中一些常用的优化措施，以及到了webpack5后，有哪些不一样的地方。需要读者对webpack的使用有一定的了解。 1. Persistent Caching. :white_check_mark: --- :heart_eyes: 2. Automatic Node.js Polyfills Removed. :white_check_mark: --- :confused: 3. Deterministic Chunk and Module IDs. :white_check_mark: --- :grinning: 4. SplitChunks and Module Sizes....
> 记录一下webpack的一些常用优化手段以及webpack5的新特性。 1. Persistent Caching. :white_check_mark: --- :heart_eyes: 2. Automatic Node.js Polyfills Removed. :white_check_mark: --- :confused: 3. Deterministic Chunk and Module IDs. :white_check_mark: --- :grinning: 4. SplitChunks and Module Sizes....
> 本文基于 React v16.8.6 在React中，我们大部分带有副作用的操作都会触发React的更新，而在Concurrent Mode模式中。React使用了一套全新的调度模式来进行应用的更新。时至今日，大家都知道React 的Concurrent Mode整个过程分为Render和Commit阶段。其中Render阶段是纯Javascript的运算，可中断。所以将Render阶段的运算分割到浏览器每一帧的空闲时间中去执行，从而减少JavaScript线程对页面UI渲染的阻塞，提高用户体验。**但是说里面的一些细节，估计很多人都还比较懵懂，比如：** 1. 一次完整的调度过程是怎么样的？（Render阶段具体做了什么？） 2. React内部是如何保证高优先级的调度任务先执行的？ 3. 时间片到期后，React如何在下一帧的空闲时间里恢复任务的继续执行？ 4. 任务执行过程中出现了更高优先级的任务，React是怎么处理的？带来了什么问题？ 这篇文章就是尽量深入浅出的去展示笔者的总结，从一次完整的调度过程探索上面提到的种种问题。当然，人无完人，如果发现有什么不对的地方也欢迎指正。 ## 调度前期准备 首先我们一些具有副作用的操作比如setState，会触发应用的调度更新。当我们执行这些操作的时候，React会为当前操作计算优先级，生成一个update对象保存到当前的FiberNode节点的updateQueue属性上。比如执行： ```JS // 此案例忽略React合成事件带来的影响 this.setState(preState => ({ age: preState + 1...
### 前言 从React Hooks发布以来，整个社区都以积极的态度去拥抱它、学习它。期间也涌现了很多关于React Hooks 源码解析的文章。本文（基于v16.8.6）就以笔者自己的角度来写一篇属于自己的文章吧。希望可以深入浅出、图文并茂的帮助大家对React Hooks的实现原理进行学习与理解。本文将以文字、代码、图画的形式来呈现内容。主要对常用Hooks中的 **useState、useReducer、useEffect** 进行学习，尽可能的揭开Hooks的面纱。 ### 使用Hooks时的疑惑 Hooks的面世让我们的Function Component逐步拥有了对标Class Component的特性，比如私有状态，生命周期函数等。**useState与useReducer**这两个Hooks让我们可以在 Function Component里使用到私有状态。而useState其实就是阉割版的useReducer，这也是我那它们两个放在一起讲的原因。应用一下官方的例子： ```JS function PersionInfo ({initialAge,initialName}) { const [age, setAge] = useState(initialAge); const [name, setName] =...
 最近react 官方在 2018 ReactConf 大会上宣布 React v16.7.0-alpha(内测) 将引入 Hooks。所以我们有必要了解 Hooks，以及由此引发的疑问。 当然，学习的最好、最直接的方法就是看文档，所以我也非常建议大家去看文档学习，而且还是官方的文档而不是中文版的文档。本文也是楼主在学习过后的一些**总结与思考**，楼主会把最近学习到的**由浅入深，循序渐进，尽可能简洁**的分享给大家，希望对大家有帮助。不足之处可在评论区补充，本文讲从以下几个大方面来展开： 1. 为什么引入Hooks 2. Hooks使用和注意事项 3. Hooks的如何解决了已存在的问题 4. 引入Hooks引发的疑问 ## 为什么引入Hooks? react官方给出的动机是用来解决长时间使用和维护react过程中遇到的一些难以避免的问题。比如： 1. **难以重用和共享组件中的与状态相关的逻辑** 2. **逻辑复杂的组件**难以开发与维护，当我们的组件需要处理多个互不相关的 local state 时，每个生命周期函数中可能会包含着各种互不相关的逻辑在里面。...