JonyYu
JonyYu
------ 小白一枚，最近在研究golang，记录自己学习过程中的一些笔记，以及自己的理解。 > * go中协程的实现 > * go中协程的sync同步锁 > * go中信道channel > * go中的range > * go中的select切换协程 > * go中带缓存的channel > * go中协程调度 ------ 介绍go中的协程之前，首先看以下go中的defer函数，defer函数不是普通的函数，defer函数会在普通函数返回之后执行。defer函数中可以释放函数内部变量、关闭数据库连接等等操作，举例来说： func print(){ fmt.Println(2); } func...
# golang学习笔记（一）—— golang基础和相关数据结构 ------ 小白前端一枚，最近在研究golang，记录自己学习过程中的一些笔记，以及自己的理解。 > * go中包的依赖管理 > * go中的切片 > * byte 和 string > * go中的Map > * go中的struct结构体 > * go中的方法 > * go中的interface接口 > *...
# React-tiny-virtual-list源码阅读 ------   在上一章介绍了如何在React，通过虚拟列表的形式优化长列表。介绍了虚拟列表的原理，以及比较常用的优化长列表的组件库React-virtualized和React-tiny-virtual-list。本文中来读一读React-tiny-virtual-list源码。 > * 虚拟列表的原理简介 > * React-tiny-virtual-list组件的使用 > * React-tiny-virtual-list的源码分析 > * React-tiny-virtual-list的总结 ------ ## 一、虚拟列表原理简介 优化长列表的原理很简单，基本原理可以一句话概括： ***用数组保存所有列表元素的位置，只渲染可视区内的列表元素，当可视区滚动时，根据滚动的offset大小以及所有列表元素的位置，计算在可视区应该渲染哪些元素。*** 具体实现步骤如下所示： 1. 首先确定长列表所在父元素的大小，父元素的大小决定了可视区的宽和高 2. 确定长列表每一个列表元素的宽和高，同时初始的条件下计算好长列表每一个元素相对于父元素的位置，并用一个数组来保存所有列表元素的位置信息 3. 首次渲染时，只展示相对于父元素可视区内的子列表元素，在滚动时，根据父元素的滚动的offset重新计算应该在可视区内的子列表元素。这样保证了无论如何滚动，真实渲染出的dom节点只有可视区内的列表元素。 4. 假设可视区内能展示5个子列表元素，及时长列表总共有1000个元素，但是每时每刻，真实渲染出来的dom节点只有5个。...
# 谈谈对react16.7.0-alpha中即将引入的hooks的理解 ------   为了实现分离业务逻辑代码，实现组件内部相关业务逻辑的复用，在React的迭代中针对类组件中的代码复用依次发布了Mixin、HOC、Render props等几个方案。此外，针对函数组件，在React v16.7.0-alpha 中提出了hooks的概念，在本身无状态的函数组件，引入独立的状态空间，也就是说在函数组件中，也可以引入类组件中的state和组件生命周期，使得函数组件变得丰富多彩起来，此外，hooks也保证了逻辑代码的复用性和独立性。   本文从针对类组件的复用解决方案开始说起，先后介绍了从Mixin、HOC到Render props的演进，最后介绍了React v16.7.0-alpha 中的 hooks以及自定义一个hooks > * Mixin > * HOC > * Render props > * React hooks的介绍以及如何自定义一个hooks ------ ### 一、Mixin Mixin是最早出现的复用类组件中业务逻辑代码的解决方案，首先来介绍以下如何适应Mixin。下面是一个Mixin的例子：...
# 从路由原理出发，深入阅读理解react-router 4.0的源码 ------   react-router等前端路由的原理大致相同，可以实现无刷新的条件下切换显示不同的页面。路由的本质就是页面的URL发生改变时，页面的显示结果可以根据URL的变化而变化，但是页面不会刷新。通过前端路由可以实现单页(SPA)应用,本文首先从前端路由的原理出发，详细介绍了前端路由原理的变迁。接着从react-router4.0的源码出发，深入理解react-router4.0是如何实现前端路由的。 > * 通过Hash实现前端路由 > * 通过H5的history实现前端路由 > * React-router4.0的使用 > * React-router4.0源码分析 ------ ## 一、通过Hash实现前端路由 ### 1、hash的原理   早期的前端路由是通过hash来实现的： **_改变url的hash值是不会刷新页面的。_**   因此可以通过hash来实现前端路由，从而实现无刷新的效果。hash属性位于location对象中，在当前页面中，可以通过： window.location.hash='edit' 来实现改变当前url的hash值。执行上述的hash赋值后，页面的url发生改变。 赋值前：http://localhost:3000 赋值后：http://localhost:3000/#edit 在url中多了以#结尾的hash值，但是赋值前后虽然页面的hash值改变导致页面完整的url发生了改变，但是页面是不会刷新的。此外，还有一个名为hashchange的事件，可以监听hash的变化,我们可以通过下面两种方式来监听hash的变化：...
简要介绍：再看redux文档的时候，发现了createStore是允许第三个参数的，看了一下源码明白了第三个参数的作用。 ### 一、createStore的第三个参数的定义 #### (1) 官方定义：createStore(reducer, [initialState], enhancer)， 第三个参数enhancer, 是一个组合 store creator 的高阶函数，返回一个 新的强化过的 store creator。这与 middleware 相似，它也允许你通过 复合函数改变 store 接口。 #### (2) 关于第三个参数的源码： ``` export default function createStore(reducer, preloadedState,...
简要介绍：Webpack4.0.1版本已经发布了2周了，下面用体验一下Webpack4.0 ### 1 .安装Webpack4.0 #### (1) ``` Node.js 4 is no longer supported. Source Code was upgraded to a higher ecmascript version ``` 明确不支持node.js4.X，在本文中使用的是： ``` node -v v8.9.3 ``` ####...
简要介绍：用了一段时间redux，今天看了一下redux的源码，大致整理了心得如下。 ### 1、什么是redux，这里就不做介绍，如想了解可以移步 [ReadMe.redux](http://redux.js.org/)，整体redux的代码只有800行，src下面分为一下几个部分。 - applyMiddleware.js - bindActionCreators.js - combineReducers.js - compose.js - createStore.js - index.js 首先我们来看index.js主js的内容，很简单，就是引入和模块和抛出模块，这里有一句提醒内容，如果是production生产环境并且js已经被压缩，会输出warning信息 ``` function isCrushed() {} if ( process.env.NODE_ENV !== 'production' && typeof isCrushed.name ===...
简要介绍：为了SEO和加快首屏加载速度，React提供了服务端渲染（Server Side Render）。本文结合express，来介绍一下React16.x中的SSR。 本例代码：https://github.com/forthealllight/react16.0-ssr ### 一、为什么要SSR 单页应用将UI层和内容都由javascript来渲染，搜索引擎或网页爬虫需要完成的HTML结构，因此单页应用如果只在客户端渲染，不利于SEO，此外尽管我们可以通过按需加载的形式来减少首页加载的js，但是通过js来渲染DOM的时候还是会有一定的时间延迟。 因此SSR解决的问题有两个： - SEO - 加速首屏加载 在React和Vue等前端框架中，SSR的本质就是由服务端执行渲染，直接将渲染结果以HTML结构的形式返回给客户端。也就是将Virtual DOM转化成字符串的形式返回给客户端。 ### 二、React15.x中的SSR 在React15.x中，有两个方法来处理SSR： - renderToString - renderToStaticMarkup 这两个方法都是在react-dom/server中提供的，用来在服务端将virtual dom渲染成字符串。 #### (1) 相同点 renderToString和renderToStaticMarkup都接受一个参数，这个参数是react的组件，返回一段HTML字符串。 ``` renderToString(react element):string...