ScarlettLL

从上一节html DOM转换为Element元素对象可以看出，将DOM结构手动转换为元素对象是比较繁琐的，所以需要提供一种方式来简化元素对象的创建，这种方式就是JSX。 JSX并不是有效的javascript，为了使浏览器能理解，需要将JSX代码由预处理转化为有效的JS，通常使…

本系列React原理浅析文章，通过实现一个与React有相同API的Didact，以及如何逐步构建它，使React内部更容易理解。 本文通过学习上述原文，再加上作者自身的理解和梳理，以求达到一个更结构化的学习效果，帮助大家更细致和透彻地理解整个React的实现逻辑。 作者认为，…

在开发过程中，我们希望源代码文件后，Webpack就能检测到文件的变化，然后马上更新有改动的文件，不需要重启服务就能看到文件的变化。 自动刷新是指webpack的devServer在监听到文件有变化后，会触发重新构建打包，然后自动刷新页面，源文件的变化就可以实时查看效果。 在d…

在开发过程中，源文件经常要被修改，免不了要重新构建打包，才能看到修改后的效果。这时候构建速度就显得尤为重要，构建速度的优化能极大地提高开发效率和体验。 本文介绍一些常见的Webpack优化构建速度的方法。 babel-loader的作用是将ES6及以上的语法转译为浏览器能识别的…

其中左边部分可以理解为module，就是各个源码文件，webpack的世界中，一切皆模块，只要可以被引用的都是模块。 中间部分就是chunk，多模块合并成的，如：entry,import(),splitChunk等都会产生chunk，做依赖分析 。 右边部分就是bundle，即…

上一篇文章介绍了最基本的Webpack配置，可以满足一个前端项目最基本的构建和打包需求。 本文在基本配置上，增加更高级的配置，包括多入口处理、压缩CSS、公共代码和第三方库打包优化和懒加载。 上一节介绍的配置都是单一入口文件，最终打包产出单一HTML文件。 如果想要最终产出多个…

本系列文章并不打算从Webpack的概念和原理开始和你娓娓道来，因为我知道，如果你有这个时间，你就不会搜到我这篇文章，而是会选择之间从官网的文档开始慢慢看起。 既然时间紧张，那么我直接从实战开始，从基础配置，到高级配置，再慢慢深入Webpack内部，不仅让你会用，还知道为什么这…

前不久在开发中遇到一个问题，在一个基于class component的react项目，想要使用像hooks里的useEffect这样的函数，来监听某些props的变化，每当这些props变化时，都要执行一遍指定的函数。 如果是在一个使用hooks的组件里，想要实现这样的效果直接…

二叉树在前端的工程日常中不常见，但是多叉树组件——树形控件却经常使用到。所以掌握好二叉树的经典算法，其实多叉树也很容易举一反三，不仅有利于面试，对我们前端的日常开发也可以提供很多优化的思路。 二叉树看似复杂，其实其中蕴含了很多规律，只要掌握了二叉树的特点和规律，理解其中的套路，…