liannian9_zlh-CSDN博客

原创 react服务端渲染方案

1. 渲染方案介绍1.1 什么是客户端渲染1.2 什么是服务器端渲染1.3 传统的服务端渲染(直接返回html，客户端无感知)1.3.1 缺点1.4 客户端渲染1.4.1 优点1.4.2 不足1.5 SPA 应用中服务器端渲染解决的问题：ReacrSSR同构2. 服务器端渲染快速开始2.1 创建 Node 服务器2.2 实现 React SSR2.3 webpack 打包配置2.4 项目启动命令配置2.5 客户端 React 附加事件2.6 客户端 React 打包配置2.7 添加客户端包文件请求链接2..

2021-01-13 15:13:02 816

原创 ReactJS 静态网页生成器方案-Gatsby学习总结

ReactJS 静态网页生成器方案-Gatsby学习总结1. Gatsby 介绍2. 静态应用的优势3. Gatsby 总览4. 创建 Gatsby 项目5. 基于文件的路由系统6. 以编程的方式创建页面7. Link 组件8. GraphQL 数据层8.1 页面组件数据查询8.2 非页面组件数据查询9. Gatsby 插件 ([网址](https://www.gatsbyjs.org/plugins/))9.1 将 JSON 数据放入数据层9.2 图像优化9.3 将 markdown 数据放入数据层9.4

2021-01-13 10:24:19 810

原创 Redux源码实现

Redux深度学习之源码实现Redux 源码实现1. Redux 核心概念及工作流程2. Redux基本功能实现2.1 基本功能：2.2 首先我们实现 `Redux` 的三个基本功能：2.3 实现步骤：3. 实现enhancer函数4. 实现applyMiddleWare函数5. 实现combineReducers函数6. 完整代码Redux 源码实现为了更好的理解Redux,我们这里自己实现一个简单版本的Redux源码,实现了Redux的基本功能如:getState、subscribe、dispatc

2020-11-23 16:37:31 291

原创 React之Virtual DOM 及 Diff 算法概述

React的 Virtual DOM 及 Diff 算法的源码解构复杂,直接根据源码学习会比较吃力.这边文章依据React的Virtual DOM 及 Diff 算法的原理，自己去实现了相关的功能，大大的简化了相关代码，可以更好帮助我们了解整个流程，对工作原理有了一个大致的认识，之后在去阅读学习源码也会更加简单清晰。实现代码1. React 相关知识导读1.1 JSX 到底是什么使用 React 就一定会写 JSX，JSX 到底是什么呢？它是一种 JavaScript 语法的扩展，React 使用它

2020-10-24 16:28:42 528

原创 Vue 3.0响应式系统编程概述

Vue 3.0响应式系统简单实现响应式系统原理3.x响应式回顾核心方法proxy回顾源码实现reactive（只能转换对象）依赖收集effect、 tracktrigger 触发更新ref - 可以接受对象或者基础类型，如果是响应式对象直接返回，是对象则内部会调用reactive将其转换为响应式对象，如果是普通的值则转为具有一个value属性的响应式对象toRefs - 传入的对象必须是reactive返回的响应式对象（proxy对象）然后将传入对象的属性转换为类似ref返回的对象然后将属性挂载在一个新的对

2020-09-27 14:03:51 2307 6

原创 Github Actions自动化部署

Github Actions自动化部署之腾讯云传统的部署方式构建过程保持后台启动现代化的部署方式（CI/CD）Github Actions自动化部署之腾讯云打包过程中的问题之前写过关于服务端渲染的文章，也实现了一个服务端渲染的案例代码地址预览地址，这章主要是如何将项目发布至腾讯云服务器，并且每次更新自动同步到服务器：传统的部署方式更新本地构建发布更新本地构建发布…构建过程在nuxt.config.js中配置Host + Port（在项目中配置host + po

2020-09-22 16:27:39 1111

原创服务端渲染二之NUXT

服务端渲染二之NUXTNuxtNuxt.js 是什么Nuxt的使用方式初始化Nuxt项目路由学习NUXT的视图布局公共布局异步数据 [asyncData](https://zh.nuxtjs.org/guide/async-data)异步数据上下文对象登录状态持久化处理页面访问权限 -- 中间件插件配置（这里以axios拦截器为例）在上一章中给大家整理了服务端的的相关概念，这章主要是通过NUXT实现服务端渲染：NuxtNuxt.js 是什么一个基于Vue.js生态的第三方开源服务端渲染应用框架

2020-09-22 16:03:17 393

原创服务端渲染一之相关概念

服务端渲染一之相关概念spa单页面应用同构应用相关概念传统的服务端渲染(直接返回html，客户端无感知)缺点客户端渲染优点不足现代化的服务端渲染（同构渲染 = 后端渲染 + 前端渲染）如何实现同构渲染同构渲染的问题服务端渲染使用建议spa单页面应用优点用户体验好开发效率高渲染性能好可维护性好缺点首屏渲染时间长不利于seo同构应用通过服务端渲染首屏直出，解决spa应用首屏渲染慢及不利于seo问题通过客户端渲染接管页面内容交互得到更好的用户体验这种方式通常称之为现

2020-09-22 14:25:02 556

原创 vue源码学习三之组件化

vue源码学习之组件化组件化什么是组件组件注册过程组件的创建过程文章内容输出来源：拉勾教育大前端高薪训练营在拉钩训练营学习已经有一段时间了，感觉这段时间的收获远比自己独自学习强的多，自己学习的时候经常会因为惰性，无法坚持，在这里有班主任时刻关注你的学习进度(感觉对我这种懒人蛮好的)，最重要的是有了一个学习的计划，不用无头苍蝇一样东一点西一点，最后什么都没记住。学习都是需要方法和技巧的，在训练营会有专业的老师为你答疑解惑，同时会教你解决问题的思路及方法，让你能够触类旁通。这篇文章主要是Vue源码学习中

2020-07-28 21:23:56 130

原创 vue源码学习二之template编译过程

vue源码学习之模板编译模板编译模板编译的作用模板编译的入口(src\platforms\web\entry-runtime-with-compiler.js)文章内容输出来源：拉勾教育大前端高薪训练营在拉钩训练营学习已经有一段时间了，感觉这段时间的收获远比自己独自学习强的多，自己学习的时候经常会因为惰性，无法坚持，在这里有班主任时刻关注你的学习进度(感觉对我这种懒人蛮好的)，最重要的是有了一个学习的计划，不用无头苍蝇一样东一点西一点，最后什么都没记住。学习都是需要方法和技巧的，在训练营会有专业的老

2020-07-28 21:22:01 361

原创 vue源码学习一之响应式原理及虚拟DOM

@TOC文章内容输出来源：拉勾教育大前端高薪训练营在拉钩训练营学习已经有一段时间了，感觉这段时间的收获远比自己独自学习强的多，自己学习的时候经常会因为惰性，无法坚持，在这里有班主任时刻关注你的学习进度(感觉对我这种懒人蛮好的)，最重要的是有了一个学习的计划，不用无头苍蝇一样东一点西一点，最后什么都没记住。训练营的课程基本都是准备工作Vue 源码的获取项目地址：https://github.com/vuejs/vueFork 一份到自己仓库，克隆到本地，可以自己写注释提交到 github为

2020-07-28 21:10:49 842

原创 Vue源码学习之snabbdom分析

Vue源码学习之snabbdom虚拟Dom源码分析流程近期在学习Vue的源码，Vue的源码中其虚拟dom部分主要是借鉴了snabbdom.js,而snabbdom的代码行数比较少，可以帮助我们更好的理解相关概念，所以这里我们对snabbdom进行学习。虚拟DomvNode实际上只是一个js对象,使用普通js对象来描述dom对象，因为不是真实dom所有叫虚拟dom（创建一个真实Dom的成本非常高，属性非常多）,通过新旧虚拟DOM 这两个对象的差异(Diff算法),最终只把变化的部分重新渲染,提高渲染

2020-07-12 16:01:28 276 1

weixin_44213825的博客