起因 源于一次面试：我让面试者展开讲了一下她的项目经历（一个内部使用的组件库）。多个包的维护方式让她在开发过程中浪费了大量的时间。虽然是用的Multirepo的组织方式，但是她并知道Multirepo的管理理念，且更不懂Monorepo。这我岂能容忍，必须解释一番。 Monorepo 和 Multirepo 是两种不同的源码管理理念。 Monorepo 是把所有的相关项目都放在一个仓库中（例如：React, Angular, Babel, Jest, Umijs, ...） Multirepo 则是按模块把子项目拆…
金三银四已过半，各大公司抢人大战已进入白热化。能否进入一个自己心仪的公司，拿到自己满意的薪资。面试中的能力展现很重要，但是能不能进入面试环节更重要。 「无刷题，不面试」应该是当下初中级开发工程师的常态。 「BB is nothing，show me the code」应该是当下好多公司面试的常态。 目前在前端领域，人才供给呈现出一个底面特别宽的金字塔形状。 开发同学特别多，但是好多公司还是会出现用人荒、招人荒。不得已在当下时段好多公司会选择适当的降低面试标准。 这也让好多开发者有了相对简单的进入大厂的机会。 拿到一…
Recoil作为facebook官方提出的状态管理，与react结合度还是很不错。 核心概念 使用Recoil，您可以创建一个数据流图，数据从atoms（共享状态）通过selectors（纯函数）一直注入到React组件。atoms是组件可以预订的状态单位。selectors可以同步或异步转换此状态。 atoms atoms是状态单位,它们是可更新和可订阅的,当atoms被更新时，每个订阅的组件都将使用新值重新呈现（重新render）。 它们也可以在运行时创建,可以使用atoms来代替React本地组件状态。如果多…
新公司学习阶段，代码大多数是使用redux来做状态管理，并且使用Hooks。虽然之前了解，但是没有在实际项目中使用过。写一个小的Demo 供大家参考。 React Redux在19年6月11日发不了的7.1版中提供了对Hooks的支持（之前大多是使用一个redux-react-hook来做）。这我们就可以不使用高阶HOC的方式了。 具体什么是Hook我就不介绍了，不懂的请自行查看react官方文档。 react-redux 提供了两个Hook用来替代connect。 useSelector useSelector是…
在Mac上安装环境和软件时，brew比较常用。brew的安装在国内也不是特别友好，经常报各种错误。 Warning: The Ruby Homebrew installer is now deprecated and has been rewritten in Bash. Please migrate to the following command: /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/mast…
前端常用在线工具集合 图片类 背景图片 unsplash.com 大量高清背景图片 千图库 588ku.co 千图网是中国素材最多的网站之一，拥有800多万张素材 免版权图片 picjumbo.com lifeofpix 一个高质量的图片网站 pixabay 有超过180万种高质量的图片，视频和音乐。 pexels 随机生成大小图片 source.unsplash.com 墙裂推荐！！！在我们需要一些特定大小的图片的时候，这个网站尤为方便，比如我们想要一个100*100的图片，只需要改对应的尺寸大小就行，比如 ht…
看其他的人写webpack的面试题写的就差不多是把文档抄了一遍。作为学习资料还行，真正面试中面试官不会问出API如何使用等类似问题。此类问题最没有价值。 在面的这六七家公司中，关于webpack方面问的最多的问题就2个。 webpack loader和plugin的区别 该问题问的最多，只要你了解webpack基本都能说上来 - webback中js作为一等公民，loader 赋予了webpack处理其他类型文件的能力，比如css、图片等。 - plugin是用来增强文webpack的能力，让webpack有更多的…
React中Key的作用 key的作用主要是用来减少没必要的diff算法对比。 key是一个组件、节点的身份标识，在rerender时，可以通过key来判断该组件是否已经存在，是否需要跟新或者销毁，新建等操作，提高了diff算法在同级节点上的操作。 setState是同步还是异步更新 同步代码下异步执行，异步代码下同步执行。可以看这里 触发多次setstate，那么render会执行几次 看上道题中的链接，就知道答案了。 setState之后干了什么 setState 执行 enqueueUpdate，并且执行Re…
MV* 是指各种 MVC、MVP、MVVM 等 Web 设计模式，通过分离关注点来改进代码的组织方式，设计模式并不是凭空的创造，而是对复杂问题解决的不断提炼，即使没有看过这些设计模式的介绍，也许在日常开发中就已经使用了其中的思想 最简单的例子 用一个最简单的例子来展示各种设计模式 页面有一个 id 为 container 的 span，点击按钮会让其内容加 1 <div> <span id="container">0</span> <button id="btn" oncl…
http1的缺点 线头阻塞：方式为，若干个请求排队串行化单线程处理，后面的请求等待前面请求的返回才能获得执行机会，一旦有某请求超时等，后续请求只能被阻塞，毫无办法，也就是人们常说的线头阻塞； 没有充分的利用TCP链接： HTTP 1.x 中，如果想并发多个请求，必须使用多个 TCP 链接，且浏览器为了控制资源，还会对单个域名有 6-8个的TCP链接请求限制 http2优点 多路复用：最有价值的优点，解决了线头阻塞的问题，允许单一的http2连接可以发送多重的请求和响应，充分的利用TCP。 使得 资源分域名、雪碧图、…