不知道有没有同学跟我一样，学习了很多react源码，却还是写不出更优雅的代码。我们知道了dom-diff原理，了解setState是如何更新状态的，然后呢？还是会写出难以维护的代码甚至bug一堆。 很多时候你写出bug不是因为你不懂dom-diff,而是因为你的属性和状态胡乱命…

『拖放』这一类的行为存在着巨大的用户需求，例如构建网站（Wix）或交互式应用程序（Trello）。毫无疑问，这种类型的交互创造了非常酷的用户体验。如果再加上一些最新的 UI 技术，我们可以创建一些非常好的软件。 我想构建一个能让用户使用一系列可定制 UI 组件来构建布局的拖放布…

我 fork 了一份 16.8.6 版本的代码，并且会为读过的代码加上详细的中文注释。等不及我文章的同学可以先行阅读 我的仓库，并且在阅读本系列文章的时候也请跟着阅读我注释的代码。因为版本不同可能会导致代码不同，并且我不会在文章中贴上大段的代码，只会对部分代码做更详细的解释，其…

之前如果我们需要抽离一些重复的逻辑，就会选择 HOC 或者 render props 的方式。但是通过这样的方式去实现组件，你打开 React DevTools 就会发现组件被各种其他组件包裹在里面。这种方式首先提高了 debug 的难度，并且也很难实现共享状态。 但是通过 H…

目前单页面应用（SPA）很是流行，同时也带了一些问题，如SEO不友好，首屏在网络较差的情况下加载慢。为了解决这些问题仿佛又回到了传统web开发模式上去了，回去是不可能的，已经入坑了是不可能回去的。React作为一个SPA应用开发框架同时也支持服务端渲染，本系列文章将从以下几点介…

Web应用是通过url访问某个具体的HTML页面，每个url都对应一个资源。传统的Web应用中，浏览器通过url向服务器发送请求，服务器读取资源并把处理好的页面内容发送给浏览器，而在单页面应用中，所有url变化的处理都在浏览器端完成，url发生变化时浏览器通过js将内容替换。对…

Event Loop即事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。 是要增加自己技术的深度，也就是懂得JavaScript的运行机制。 现在在前端领域各种技术层出不穷，掌握底层原理，可以让自己以不变，…

React 16.7-alpha中新增了新功能：Hooks。总结他的功能就是：让FunctionalComponent具有ClassComponent的功能。 虽然最新的class语法可以用handler = () => {}来快捷绑定，但也就解决了一个声明的问题，整体的复杂度…

这是一门免费课程，写文章和录制视频这个我花了1个半月时间，如果你觉的不错可以给一个赞。文章和视频中会详细讲解React的基础知识，React版本是16x，也是目前最新版本(我课程录制开始的日期是2019年5月4日)。今年的目标是录制100集前端免费视频教程，可能大部分都会在Re…