zxh2075的专栏

React Hooks正式公布也有一长段时间了，在选择第一时间接受“总之这就是未来了，你不陪跑也得陪跑”的现实之后，逐渐尝试着在脑内对一些既有的代码基于Hooks去进行重构，也阅读了不少社区里的讨论。在社区中，大部分布道者都提到了诸如“过于冗繁的组件嵌套”、“与内部原理的更亲密接触”、“比原先更细粒度的逻辑组织与复用”等优势。而在此之外，基于我自己的一些经验，也在更学院派的维度上有一些见解，权...

概述Render Props模式是一种非常灵活复用性非常高的模式，它可以把特定行为或功能封装成一个组件，提供给其他组件使用让其他组件拥有这样的能力，接下来我们一步一步来看React组件中如何实现这样的功能。React 组件数据传递React中我们可以给一个组件传递一些props并且在组件内部展示，同样的我们也可以传递一些组件同样也是行得通的，一起看一个例子1. 组件普通数据传递...

很多人应该看到官方的高阶指南， 新加了 “render props” 的设计模式， 注意这只是一个设计模式， 不是新的 api， 而且有意思的是，2016年年底的时候， 我看到一个 sortable 的列表的 react 开源库代码时候， 就见识了这种写法，当时很不理解。因为 react 灵活性很大，code resusable 的方式有很多种，最开始的 mixin，cloneElement，pr...

原文链接：https://juejin.im/post/5acad683f265da23953146cd原文地址：How to NOT React: Common Anti-Patterns and Gotchas in React 原文作者：NeONBRAND 译文出自：掘金翻译计划 本文永久链接：github.com/xitu/gold-m… 译者：MechanicianW 校...

React组件设计组件分类展示组件和容器组件展示组件 容器组件 关注事物的展示 关注事物如何工作 可能包含展示和容器组件，并且一般会有DOM标签和css样式 可能包含展示和容器组件，并且不会有DOM标签和css样式 常常允许通过this.props.children传递 提供数据和行为给容器组件或者展示组件 对第三方没有任何依赖，比如s...

在单页应用中，通常由前端来配置路由，根据不同的 url 显示不同的内容。想要知道这是如何做到的，首先得了解浏览器提供的两大 API： window.location location.href location.hash location.search location.pathname window.history history.pushState() ...

你还在为该使用无状态组件（Function）还是有状态组件（Class）而烦恼吗？——拥有了hooks，你再也不需要写Class了，你的所有组件都将是Function。你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗？——拥有了Hooks，生命周期钩子函数可以先丢一边了。你在还在为组件中的this指向而晕头转向吗？——既然Class都丢掉了，哪里还有this？你的人生第一次不再需要面对t...

发展史很久很久以前，Web 基本上就是文档的浏览而已， 既然是浏览，作为服务器， 不需要记录谁在某一段时间里都浏览了什么文档，每次请求都是一个新的HTTP协议， 就是请求加响应， 尤其是我不用记住是谁刚刚发了HTTP请求， 每个请求对我来说都是全新的。这段时间很嗨皮 但是随着交互式Web应用的兴起，像在线购物网站，需要登录的网站等等，马上就面临一个问题，那就是要管理会话，必须记住哪些...

嵌套路由，从广义上来说，分为两种情况：一种是每个路由到的组件都有共有的内容，这时把共有的内容抽离成一个组件，变化的内容也是一个组件，两种组件组合嵌套，形成一个新的组件。另一种是子路由，路由到的组件内部还有路由。　　对于共有的内容，典型的代表就是网页的侧边栏，假设侧边栏在左边，我们点击其中的按钮时，右侧的内容会变化，但不管右侧的内容怎么变化，左侧的侧边栏始终存在。这个侧边栏就是共有内容，如下图所...

路由的概念，起初来源于服务端，就是当浏览器访问一个网站的不同页面时，服务端能够正确的返回页面的内容。当访问首页时，它能返回首页的内容，访问关于我们页面时，返回关于我们的内容。可以看到路由就是一种控制和匹配，从而保证页面内容和页面的地址一一对应的关系。但是每次页面地址发生变化，服务端都会返回一个新的页面，从而导致整个页面重新加载，用户体验不好。所以就兴起了单页应用，所有的内容都在一个页面上进行展示，...

前言React高阶组件，即Higher-Order Component，其官方解释是：A higher-order component is a function that takes a component and returns a new component.一个传入一个组件，返回另一个组件的函数，其概念与高阶函数的将函数作为参数传入类似。用代码来解释就是：const...

昨天看了一篇很好的博客，讲的是react的父子组件之间生命周期的执行流程，废话不多说上图，802857-20171218141807537-1558287790.pngPS：无状态组件中没有这些生命周期方法组件挂载的过程：初始化props，通过类的静态属性defaultProps或者getDefaultProps函数，初始化的props会与父组件指定的props合并，最后...

前言总括：本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应用的过程。代码地址：React全家桶实现一个简易备忘录 原文博客地址：React全家桶实现一个简易备忘录 知乎专栏&&简书专题：前端进击者（知乎）&&前端进击...

作者：戴嘉华转载请注明出处并保留原文链接（#13）和作者信息。目录：1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一：用JS对象模拟DOM树 4.2 步骤二：比较两棵虚拟DOM树的差异 4.3 步骤三：把差异应用到真正的DOM树上 5 结语 6 References1 前言本文会在教你怎么用 300~...

为什么会有闭包js之所以会有闭包，是因为js不同于其他规范的语言，js允许一个函数中再嵌套子函数，正是因为这种允许函数嵌套，导致js出现了所谓闭包。function a(){ function b(){ }; b();}a();在js正常的函数嵌套中，父函数a调用时，嵌套的子函数b的结构，在内存中产生，然后子函数又接着调用了，子函数b就注销了，此...

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。作者：twobin链接：http://zhuanlan.zhihu.com/purerender/20346379来源：知乎目前，前端领域中 React 势头正盛，使用者众多却少有能够深入剖析内部实现机制和原理。本系列文章希望通过剖析 React 源码，理解其内部的实现原理，知其然更要知其所以然。React d...

文章标题总算是可以正常一点了……通过之前的文章我们已经知道：在 React 体系中所谓的 "在 JavaScript 中编写 HTML 代码" 指的是 React 扩展了 JavaScript 的语法，也就是 JSX。JSX 语法中可以以类似 HTML 语法的方式使用 React 组件，从而编写 React 组件就有一种创造一个新的 HTML 标签的体验。上一篇文章《玩转 React（四）...

缘起由于维护 roadhog 和 umi，收到构建方面的问题反馈比较多，其中一个常见的是打包时 uglify 压缩的问题。类似下面的报错都是这个引起的，Failed to minify the bundle. Error: 0.0f3f4c41.async.js from UglifyJsxx.async.js from UglifyJs Unexpected token: keyw...

使用注解的优势：1.采用纯java代码，不在需要配置繁杂的xml文件2.在配置中也可享受面向对象带来的好处3.类型安全对重构可以提供良好的支持4.减少复杂配置文件的同时亦能享受到springIoC容器提供的功能一、注解详解（配备了完善的释义）------(可采用ctrl+F 来进行搜索哦~~~~)@SpringBootAppli...

《我所理解的RESTful Web API [Web标准篇]》Web服务已经成为了异质系统之间的互联与集成的主要手段，在过去一段不短的时间里，Web服务几乎清一水地采用SOAP来构建。构建REST风格的Web服务是最近两三年风行的潮流，所以很多人以为REST是一个事物。而事实却是：REST自其诞生之日起到现在（2014年）已经有14年了，它为什么叫这么一个“奇怪”的名字呢？目录 一、为

1 tomcat 日志详解1.1 tomcat 日志配置文件　　tomcat 对应日志的配置文件：tomcat目录下的/conf/logging.properties。　　tomcat 的日志等级有：日志输出级别：SEVERE (最高级别) > WARNING > INFO > CONFIG > FINE > FINER(精心) > FINEST...

Ajax工作原理　　在写这篇文章之前，曾经写过一篇关于AJAX技术的随笔，不过涉及到的方面很窄，对AJAX技术的背景、原理、优缺点等各个方面都很少涉及null。这次写这篇文章的背景是因为公司需要对内部程序员做一个培训。项目经理找到了我，并且征询我培训的主题，考虑到之前Javascript、CSS等WEB开发技术都已经讲解过了，所以决定针对AJAX这一块做一个比较系统的培训，所以这篇文章

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。    首先vue.js的作者是中国人，所以说他是国产的，吸收了google的angular.js和facebook

1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入：npm install -g cnpm --registry=https://registry.npm.taobao.org，回车，等待安装...3.安装全局vue-

当我们在谈到cgi的时候，我们在讨论什么　　　　最早的Web服务器简单地响应浏览器发来的HTTP请求，并将存储在服务器上的HTML文件返回给浏览器，也就是静态html。事物总是不断发展，网站也越来越复杂，所以出现动态技术。但是服务器并不能直接运行 php，asp这样的文件，自己不能做，外包给别人吧，但是要与第三做个约定，我给你什么，然后你给我什么，就是握把请求参数发送给你，然后我接

一．基本原理CGI：通用网关接口（Common Gateway Interface）是一个Web服务器主机提供信息服务的标准接口。通过CGI接口，Web服务器就能够获取客户端提交的信息，转交给服务器端的CGI程序进行处理，最后返回结果给客户端。组成CGI通信系统的是两部分：一部分是html页面，就是在用户端浏览器上显示的页面。另一部分则是运行在服务器上的Cgi程序。它们之间

CGICGI即通用网关接口(Common Gateway Interface)，是外部应用程序（CGI程序）与Web服务器之间的接口标准，是在CGI程序和Web服务器之间传递信息的规程。CGI规范允许Web服务器执行外部程序，并将它们的输出发送给Web浏览器，CGI将Web的一组简单的静态超媒体文档变成一个完整的新的交互式媒体。通俗的讲CGI就像是一座桥，把网页和WEB服务器中的执行程序连

最早的Web服务器简单地响应浏览器发来的HTTP静态文件请求，并将存储在服务器上的静态文件（例如： jpg、htm、html）返回给浏览器。如图是处理流程CGI的出现事物总是不断发展，网站也越来越复杂，所以出现动态技术。但是服务器并不能直接运行 php，asp这样的文件，自己不能做，外包给别人吧，但是要与第三做个约定，我给你什么，然后你给我什么，就是我把请求参数发送给你，然

一、用户对动态PHP网页访问过程用户浏览器发起对网页的访问：http://192.168.1.103/index.php用户和nginx服务器进行三次握手进行TCP连接（忽略包括nginx访问控制策略、nginx防火墙等访问控制策略）第一步：用户将http请求发送给nginx服务器第二步：nginx会根据用户访问的URI和后缀对请求进行判断1.例如用户访问的

FastCGI是一个可伸缩地、高速地在HTTP server和动态脚本语言间通信的接口。多数流行的HTTP server都支持FastCGI，包括Apache、Nginx和lighttpd等。同时，FastCGI也被许多脚本语言支持，其中就有PHP。FastCGI是从CGI发展改进而来的。传统CGI接口方式的主要缺点是性能很差，因为每次HTTP服务器遇到动态程序时都需要重新启动脚本解析器来执行解析

我在网上查fastcgi与php-fpm的关系，查了快一周了，基本看了个遍，真是众说纷纭，没一个权威性的定义。网上有的说，fastcgi是一个协议，php-fpm实现了这个协议； 有的说，php-fpm是fastcgi进程的管理器，用来管理fastcgi进程的； 有的说，php-fpm是php内核的一个补丁; 有的说，修改了php.ini配置文件后，没办法平滑重启，所以就诞生了php-fp

浅谈js运行机制(线程）1.前言从开始接触js时，我们便知道js是单线程的。单线程，异步，同步，互调，阻塞等。在实际写js的时候，我们都会用到ajax,不管是原生的实现，还是借助jQuery等工具库实现，我们都知道，ajax可以实现局部刷新，并且在请求处理时，任然可以响应用户的操作，比如点击事件。不是说js是单线程吗?这些都是怎么实现的？在阅读《深入理解Bootrap的源码》一书，

前戏前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。核心思想是前端html页面通过ajax调用后端的restuful ...

一般在部署Tomcat后，运行久了，catalina.out文件会越来越大，对系统的稳定造成了一定的影响。可通过修改conf/logging.properties日志配置文件来屏蔽掉这部分的日志信息。那么Tomcat怎么关闭日志输出?一、 linux 系统1、直接修改catalina.sh文件的输出语句在文件中找到以下内容:[java]view plaincopy...

什么是事件？JavaScript和HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。可以使用监听器（或事件处理程序）来预定事件，以便事件发生时执行相应的代码。通俗的说，这种模型其实就是一个观察者模式。（事件是对象主题，而这一个个的监听器就是一个个观察者）事件流事件流描述的就是从页面中接收事件的顺序。而IE和Netscape提出了完全相反的事件流概念...

React16虽然出了一阵子了。刚出来的时候，粗略看了一遍更新文档。以为没什么大的改动，也听说项目从react15-16的升级过度可以很平滑，再加上项目改版上线一直比较频繁，所以一直还用的15.6的版本。偶然在知乎看到@程墨Morgan大神的live，便抱着好奇心和学习的心态报名了，受益良多。我理解的Fiber架构：改变了之前react的组件渲染机制，新的架构使原来同步渲染的组件现在可以...

做React需要会什么？react的功能其实很单一，主要负责渲染的功能，现有的框架，比如angular是一个大而全的框架，用了angular几乎就不需要用其他工具辅助配合，但是react不一样，他只负责ui渲染，想要做好一个项目，往往需要其他库和工具的配合，比如用redux来管理数据，react-router管理路由，react已经全面拥抱es6，所以es6也得掌握，webpack就算是不会配...

文章来自我的github 博客，包括技术输出和学习笔记，欢迎star。先来明白些概念性内容。进程、线程 进程是系统分配的独立资源，是 CPU 资源分配的基本单位，进程是由一个或者多个线程组成的。 线程是进程的执行流，是CPU调度和分派的基本单位，同个进程之中的多个线程之间是共享该进程的资源的。 浏览器内核 浏览器是多进程的，浏览器每一个 tab 标签都代表一个独...

var now = moment().toDate();console.log('获取当前时间\n',now)now = moment().format('YYYY-MM-DD');console.log('格式化当前时间\n',now);now = moment().format('YYYY-MM-DD:HH:MM:SS');console.log('格式化当前时间\n',no...

ECMAScirpt 变量有两种不同的数据类型：基本类型，引用类型。也有其他的叫法，比如原始类型和对象类型，拥有方法的类型和不能拥有方法的类型，还可以分为可变类型和不可变类型，其实这些叫法都是依据这两种的类型特点来命名的，大家爱叫啥就叫啥吧 o(╯□╰)o 。1.基本类型基本的数据类型有：`undefined，boolean，number，string，null.基本类型的访问是按值访问的...