xiangzhihong8的专栏

一、 Hook 简介1.1 Hook历史在React Hook出现之前的版本中，组件主要分为两种：函数式组件和类组件。其中，函数式组件通常只考虑负责UI的渲染，没有自身的状态也没有业务逻辑代码，是一个纯函数。而类组件则不同，类组件有自己的内部状态，界面的显示结果通常由props 和 state 决定，因此它也不再那么纯洁。函数式组件，类组件有如下一些缺点：状态逻辑难以复用。在类组件中，为了重用某些状态逻辑，社区提出了render props 或者 hoc 等方案，但是这些方案对组件的侵入性太强，并且

常常听人吐槽说，前端技术更新太快、前端的细分太多，程序员太苦、很多东西学不过来。作为一名工作了9年的资深前端⼯程师，我也是深有感触。有时候，面对这种吐槽，我也是一笑而过。不过，面对这些吐槽，我看到的却是前端开发者内心的焦虑。面对越来越卷的行业现状，大多数的开发者都有一股想突破⾃我的想法，不然的话，那和咸⻥有什么区别。首先，对于前端同学不断学习的态度我是很赞赏的，作为一名开发者，不停的学习新技术是每个开发者需要掌握的必备技能。但如果我们从另外⼀个⻆度来看，⼀个⾏业的新东⻄层出不穷，正说明这个⾏业⼀直在⾼速发

WebAssembly, 简称WASM, 是一种以安全有效的方式运行可移植程序的新技术，主要针对Web平台。 与 ASM.js类似, WASM的目标是对高级程序中间表示的适当低级抽象，即，WebAssembly代码旨在由编译器生成而不是由人来写。WebAssembly程序剖析实际上，称之为“模块（module）”，是因为使用WebAssembly并没有“程序”和“库”之间的区别，只有“模块...

前两天，Node.js官方发布了Node.js 15的正式版本，Node.js 15 将替代 Node.js 14 成为当前的的稳定发行版，后者将在本月晚些时候升级为 LTS（长期支持）版本。如果大家想体验下Node.js 15 的最新功能，可以从官方进行下载。那Node.js 15带来了哪些新的功能和特性呢？主要体现在以下几个方面：AbortControllerN-API 版本 7npm 7unhandled rejections 默认抛出QUICV8 8.6AbortControl

Webpack简介随着前端发展如日冲天，前端项目也越来越复杂，得益于Nodejs的发展，前端模块化、组件化、工程化也大势所趋。伴随着前端的模块化和工程化，Grunt、Gulp到Webpack等项目构建和打包工具也随之出现。前端工程化的早期，主要是解决重复任务的问题。Grunt、Gulp就是其中代表，他们的主要功能是完成文件压缩、编译less、sass、地址添加hash、替换等。不过，随着前端工程化的发展，Webpack出现了，与其说是一个工程构建工具，Webpack更像是一套前端工程化解决方案。根据官

在现行的软件架构中，前端和后端是分离的，即前端只专注于页面渲染，而后台专注于业务逻辑，前端和后端是两个不同的工种，而前后端交互最常见的方式就是通过接口。前后端分离架构在正式说明前后台架构分离之前，我们来看一下多年之前，传统软件开发的架构模式。为什么要前后端分离还记得零几年我上大学的时候，在初学 Java Web 开发时，课本上介绍的还是 JSP + Servlet 这种很传统的架构模式，这时候前端和后端业务逻辑代码都在一个工程里面，还没有分离开来，这种开发模式属于 Model1 模式，虽然实现了逻辑

简介WebSocket是基于TCP的一种新的网络协议，并在2011年被IETF定为标准的全双工通信协议，它实现了客户端与服务器全双工通信。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。众所周知，在WebSocket出...

现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中：<li v-for="article in articles" @click="getDescribe(article.id)">方案一 getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转 this.$router.pus...

再有两个月，2018就快过完了，因而有必要在年末对2018年的前端学习做一个总结，本文主要从前端面试中的一些基础知识来对前端进行相关的总结。本文根据网络面试题进行总结。基础知识本部分主要从以下几个方面来回顾前端相关的基础知识：HTML相关CSS相关JAVASCRIPT相关DOM相关HTTP相关webpack相关Htmlhtml根据内容的结构化（内容语义化），选择合适的标签...

关于Jest测试的基础内容，可以参考之前的博客：前端单元测试之Jest本文主要讲的是匹配器（Matchers），匹配器（Matchers）是Jest中非常重要的一个概念，它可以提供很多种方式来让你去验证你所测试的返回值，本文重点介绍几种常用的Matcher，其他的可以通过官网api文档查看。相等匹配例如，有下面一段测试代码：test('two plus two is four', () =...

概述关于前端单元测试的好处自不必说，基础的介绍和知识可以参考之前的博客链接：React Native单元测试。在软件的测试领域，测试主要分为：单元测试、集成测试和功能测试。单元测试：在计算机编程中，单元测试（英语：Unit Testing）又称为模块测试, 是针对程序模块（软件设计的最小单位）来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中，一个单元就是单个程序、函...

概述随着应用程序单页面需求的越来越复杂，应用状态的管理也变得越来越混乱，而Redux的就是为解决这一问题而出现的。在一个大型的应用程序中，应用的状态不仅包括从服务器获取的数据，还包括本地创建的数据，以及反应本地UI状态的数据，而Redux正是为解决这一复杂问题而存在的。redux作为一种单向数据流的实现，配合react非常好用，尤其是在项目比较大，逻辑比较复杂的时候，单项数据流的思想能使数...

3.6.1 React组件简介众所周知，组件作为React的核心内容，是View的重要组成部分，每一个View页面都由一个或多个组件构成，可以说组件是React应用程序的基石。在React的组件构成中，按照状态来分可以分为有状态组件和无状态组件。 所谓无状态组件，就是没有状态控制的组件，只做纯静态展示的作用，无状态组件是最基本的组件形式，它由属性props和渲染函数render构成。由于不涉...

随着应用程序单页面需求的越来越复杂，应用状态的管理也变得越来越混乱。应用的状态不仅包括从服务器获取的数据，还包括本地创建的数据，以及反应本地UI状态的数据，而Redux正是为解决这一复杂问题而存在的。用Redux官网的话来概括什么是Redux：Redux是针对JavaScript应用的可预测状态容器。这句话虽然简短，但其实是有几个涵义的:可预测的(predictable): 因为Re...

Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列，Node.js 里面的许多对象都会触发分发事件：一个 net.Server 对象会在每次有新连接时触发一个事件， 一个 fs.readStream 对象会在文件被打开的时候触发一个事件。 所有这些产生事件的对象都是 events.EventEmitter 的实例。EventEmitter简介events 模块只提供...

这几天在阅读徐超老师的《React 进阶之路》，然后在看看自己之前的《React Native移动开发实战》，发现之前我自己的书部分写的比较的浅显，最近打算对基础部分进行升级，加大基础部分，特别是React基础部分的讲解，并对React Native提供的组件部分进行升级。众所周知，React框架的核心思想是组件化，一个应用程序由多个组件搭建而成，组件最重要的概念是State（状态），Stat...

众所周知，React是一个专注于View层的前端框架，组件也】是React核心理念之一，一个完整的应用将由一个个独立的组件拼装而成，组件也是React最基础的一部分，学习React就需要先学习组件。React中创建组件的方式在了解React中的无状态和有状态的组件之前，先来了解在React中创建组件的三种方式：ES5写法：React.createClass；ES6写法：Reac...

SwiperSwiper是一个滑块容器类组件，主要提供如下的一些属性。 属性名 类型 说明 支持版本 indicator-dots Boolean 是否显示面板指示点...

Redux简介如果要用一句话来概括Redux，那么可以使用官网的这句话：Redux是针对JavaScript应用的可预测状态容器。此句话虽然简单，但包含了以下几个含义：可预测性(predictable): 因为Redux用了reducer与纯函数(pure function)的概念，每个新的state都会由旧的state建来一个全新的state。因而所有的状态修改都是”可预测的”。状态...

Webpack简介Webpack 是一个前端资源加载和打包工具。所谓的模块就是在平时的前端开发中，用到一些静态资源，如JavaScript、CSS、图片等文件，webpack就将这些静态资源文件称之为模块。 webpack支持AMD和CommonJS，以及其他的一些模块系统，并且兼容多种JS书写规范，可以处理模块间的依赖关系，所以具有更强大的JS模块化的功能，它能对静态资源进行统一的管理以及打...

在Angular 5发布半年之后，Angular 6在昨天正式发布，那么在这个版本有哪些新功能呢？新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外，这次更新还包括框架包（@angular/core、@angular/common、@angular/compiler 等）、Angular CLI、Angular Material + CDK等。ng updat...

这两年，各种异步编程框架，上面RxJava,RxAndroid,RxSwift等等，今天要聊的是RxJs，对于我等入门不久的前端工程师来说，这个框架还是比较有新颖的，中文官网地址：http://cn.rx.js.org/RxJs简介RxJS是一个异步编程的库，同时它通过observable序列来实现基于事件的编程。它提供了一个核心的类型：Observable，几个辅助类型（Observ

继移动APP之后，小程序作为当前移动的有一个入口为大家所推崇，不管是微信的小程序还是支付宝的小程序，其实现的思路都是一致的，即通过一个宿主来运行相关的JS页面。现在Hera根据市场需求，推出了一款真正的跨平台框架，除了可以让你的小程序除了在微信上运行，还可以打包成 Android 、 iOS应用，以及以 h5 的方式跑在浏览器端。主要的优点有：一套代码 处处运行 Hera提供了强大的跨平台能力：

概述JavaScript，作为一门处于高速发展期的开发语言，正在变的越来越完善、稳定。我们必须拥抱这些变化，并且我们需要把ES8加入到我们的技术栈中。 ECMAScript 是标准化的 JavaScript 语言，1997 年发布了第一版，1998 年和 1999 年发布了第二和第三个版本，之后沉寂 了许多年，直到 Ajax 流行起来后标准工作才再次起步，2009 年发布了第五个版本，自 2015

V8的前世今生V8是JavaScript渲染引擎，第一个版本随着Chrome的发布而发布(具体时间为2008年9月2日)。在运行JavaScript之前，相比其它的JavaScript的引擎转换成字节码或解释执行，V8将其编译成原生机器码（IA-32, x86-64, ARM, or MIPS CPUs），并且使用了如内联缓存（inline caching）等方法来提高性能。V8可以独立运行，也可以

Javascript 采用回调函数(callback)来处理异步编程。从同步编程到异步回调编程有一个适应的过程，但是如果出现多层回调嵌套，也就是我们常说的厄运的回调金字塔(Pyramid of Doom)，绝对是一种糟糕的编程体验。于是便有了 CommonJS 的 Promises/A 规范，用于解决回调金字塔问题。回调金字塔那么何为回调金字塔呢？简单的讲就是回调里面嵌套回调。例如：asyncOpe

概述高阶组件（ higher-order component ，HOC ）是 React 中复用组件逻辑的一种进阶技巧，通俗的讲，高阶组件就是一个 React 组件包裹着另外一个 React 组件。它本身并不是 React 的 API，而是一种 React 组件设计理念，众多的 React 库已经证明了它的价值，例如耳熟能详的 react-redux。 高级组件使用函数来实现，基本上是一个类工厂，

综合类前端知识体系前端知识结构Web前端开发大系概览Web前端开发大系概览-中文版Web Front-end Stack v2.2免费的编程中文书籍索引前端书籍前端免费书籍大全前端知识体系免费的编程中文书籍索引智能社 - 精通JavaScript开发重新介绍 JavaScript（JS 教程）麻省理工学院公开课：计算机科学及编程导论JavaScript中的this陷阱的最全

概述React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。JSX是什么JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。使用虚拟DOM可以将React的语法

概述React 是近期非常热门的一个前端开发框架，其本身作为 MVC 中的 View 层可以用来构建 UI，也可以以插件的形式应用到 Web 应用非 UI 部分的构建中，轻松实现与其他 JS 框架的整合，比如 AngularJS。同时，React 通过对虚拟 DOM 中的微操作来实对现实际 DOM 的局部更新，提高性能。其组件的模块化开发提高了代码的可维护性。单向数据流的特点，让每个模块根据数据量自

概述曾经大家以为在手机上可以像桌面那样通过 Web 技术来实现跨平台开发，却因为性能或其他问题而放弃，不得不针对不同平台开发多个版本。这也违背了跨平台开发的初衷。而React Native让跨平台移动端开发在次回到人们的视野中，其成功的原因除了他“一次编写处处运行”，还因为它相比h5等前端技术，有了更接近原生的体验。 为了方便理解，笔者将跨平台技术分为4大流派：Web 流：也被称为 Hybrid

概述作为一名前端开发，如果你还停留在应用开发层面，那你就OUT了，快来跟我一起探讨下小程序框架本身底层实现的一些技术细节吧，让我们从小程序的运行机制来深度了解小程序。 小程序是基于WEB规范，采用HTML,CSS和JS等搭建的一套框架，微信官方给它们取了一个很牛逼的名字：WXML,WXSS，但本质上还是在整个WEB体系之下构建的。 WXML，个人猜测在取这个名字的是微信的Xml，说到底就是xml

前端开发全面知识库，包括HTML5，CSS3和js的基本框架知识，以及DOM和BOM操作的基础知识和一些基本工具和IDE。学习本篇，你将了解到以下知识。核心 CoreHTML5W3C http://www.w3school.com.cn/html5/ W3C https://www.w3.org/html/ig/zh/wiki/HTML5 菜鸟教程 http://www.runoob.com/h

小程序，创业者们的狂躁与迷思记得在16年的9月份，就有消息说微信推出的小程序，一时间大家对于小程序的关注就从来没有减少过。或许是经过15年移动互联网大潮之后，16年互联网一下子寂静了许多的原因，大家对于小程序给予了很高的期望。我也从那时候起开始研究小程序，并且在12月的那次内测中，我也如愿的尝试了一把小程序的开发。 说实话，当时看着小程序的开发文档，惊艳了一下，呀，项目结构如此清晰，逻辑也是相当的

一、操作步骤（1）打开【微信开发者工具】->新建一个默认项目->点击【项目】->点击【上传】（2）使用微信小程序公众平台管理员扫描二维码，在手机微信上点击【确认上传】（3）输入【版本号】与【项目备注】后点击【上传】按钮，如下图（4）等待上传，上传完成后上传页面会自动消失（5）登录微信小程序公众平台，点击右边【开发管理】选项菜单，用鼠标将网页滚动到底部，点击下拉图标按钮、点击【选为体验版本】（6）点

前言我们知道前端的框架纷繁复杂，各有各的优点。而我们选择使用React作为开发框架的时候，往往会选择Webpack+Babel+React来开始我们的项目。之前也讲过其他的前端框架，如 gulp+webpack，准确的说这不是一个框架，只是项目组织的形式而已。Webpack+Babel+React环境搭建安装Webpack关于Webpack的介绍这里不讲解，大家可以看之前的讲解webpack介绍。n

webpack简介Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 webpack特点Webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以

概述Node.js是什么Node 是一个服务器端 JavaScript 解释器，用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。 Node.js 是一个可以让 JavaScript 运行在浏览器之外的平台。它实现了诸如文件系统、模块、包、操作系统 API、网络通信等 Core Java

概述近年来，随着浏览器性能的提升与移动互联网浪潮的汹涌而来，Web前端开发进入了高歌猛进，日新月异的时代。这是最好的时代，我们永远在前行，这也是最坏的时代，无数的前端开发框架、技术体系争妍斗艳，让开发者们陷入困惑，乃至于无所适从。Web前端开发可以追溯于1991年蒂姆·伯纳斯-李公开提及HTML描述，而后1999年W3C发布HTML4标准，这个阶段主要是BS架构，没有所谓的前端开发概念，网页只不过是

Docker介绍 1. Docker 主要解决什么问题 　　Docker 对外宣称的是Build、Ship 和Run，Docker 要解决的核心问题就是快速地干这三件事情。它通过将运行环境和应用程序打包到一起，来解决部署的环境依赖问题，真正做到跨平台的分发和使用。而这一点和DevOps不谋而合，通过Docker可以大大提升开发、测试和运维的效率。在这个移动互联网的时代，如果一个工具能够节省人力，