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…
本篇文章只是为了回答徒弟@河北小女孩 的一个问题，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…
context （上下文）个人理解就是当前环境 首先它是一个属性的有序序列， 并且可以驻留在环境里 有点像全局变量 存在于React 中 react 数据流 单项数据流 ，单纯在React 中 组件内 通过state交流。 父子组件通过props 传递 为了解决 层级传递的繁琐， 于是有了 context ， Context 旨在解决组件间的数据传递（Super-->Sub 间） 版本 情况 React 16.3 之前 只有 老版context API ，之后老版和新版（createContext）都有。共存…
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。 Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。 Webpack4升级 webpack4官方已经于近…