入门篇 docker在前端的使用 - 入门篇 在招聘后端同学的JD中，docker是一个比较重要的考察点，但是这些年前端的发展使得前端coder也需要懂一些docker的基本使用，这样在部署的时候才不至于过渡依赖运维同学。 因为这是针对前端coder的一篇入门级的docker介绍，所以我们就用理论+实践的方法来了解一下。 虚拟化 首先先了解一下什么是虚拟化，简单来说，虚拟化是一些程序创建虚拟化的过程，虽然说虚拟化可以应用到计算机、操作系统、网络、存储设备等，但是服务器才是虚拟化应用的最主要的地方。 虚拟化使用软件来…
起因 源于一次面试：我让面试者展开讲了一下她的项目经历（一个内部使用的组件库）。多个包的维护方式让她在开发过程中浪费了大量的时间。虽然是用的Multirepo的组织方式，但是她并知道Multirepo的管理理念，且更不懂Monorepo。这我岂能容忍，必须解释一番。 Monorepo 和 Multirepo 是两种不同的源码管理理念。 Monorepo 是把所有的相关项目都放在一个仓库中（例如：React, Angular, Babel, Jest, Umijs, ...） Multirepo 则是按模块把子项目拆…
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是…
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…
本篇文章只是为了回答徒弟@河北小女孩 的一个问题，setState 是同步的还是异步的？ 翻阅了一下react-dom的源码外加上自己的经验，总结出以下两点： 同步代码下异步执行 异步代码下同步执行 同步代码下异步执行 在非事件回调和setTimeout下，比如react的生命周期中，setState 的代码是异步执行的。 constructor() { super(); this.state = { val: 0, }; } componentDidMount() { console.log(this.state…
起因 在项目开发过程中，遇到了一个具体的需求，需求要求点击 ant-d的tree组件节点的时候，单击触发一种效果，双击触发另一种效果。 因为antd 没此功能，所以需要自己去实现。 具体原理就是250毫秒内再次点击，则认定为双击，doubleClick。开发过程中遇到一个问题。 clickNode = e => { ... console.log(e.target); // 正常的target this.timeId = setTimeout(() => { console.log(e.target); // nu…
文章来源于我在组内给同事分享的 Immer 和 immutable 的使用和对比，总结一下。 两个库都是用来解决数据的Immutable 问题的。但是使用上有很大区别。 Shared mutable state is the root of all evil（共享的可变状态是万恶之源） Immutable 优点 Immutable 降低了 Mutable 带来的复杂度 可变（Mutable）数据耦合了 Time 和 Value 的概念，造成了数据很难被回溯。 节省内存 Immutable.js 使用了 Struct…
起因 因为部门前端系统越来越多，为了项目稳定运行、统计汇总、及时定位线上bug，急需前端埋点系统，并且对项目代码侵入性越小越好。所以急需一套react透明埋点方式。 组件写法 函数组件和类组件两种形式常用形式，还有就是createElement的写法，多用于写一些类库或者UI组件库使用。且前两种打包的时候也会转成后者。 侵入性最小且能在全局作用，只能从react入手了。劫持一波createElement。so，让我们先来撸一波源码。 ReactElement.createElement = function (ty…