砖家
# React Hooks 使用误区，驳官方文档 作为 React Hooks 库 [ahooks](https://github.com/alibaba/hooks) 的作者，我应该算一个非常非常资深的 React Hooks 用户。在两年多的 React Hooks 使用过程中，我越来越发现大家（包括我自己）对 React Hooks 的使用姿势存在很大误区，归根到底是官方文档的教程很不严谨，存在错误的指引。 ## 1. 不是所有的依赖都必须放到依赖数组中 对于所有的 React Hooks 用户，都有一个共识：“useEffect 中使用到外部变量，都应该放到第二个数组参数中”，同时我们会安装 [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) 插件，来提醒自己是不是忘了某些变量。 以上共识来自官方文档：...
> 本篇文章是 B 站视频《前端好还是后端好，看看过来人怎么说》的文字版，欢迎大家直接去 B 站观看视频，体验更佳。 > B 站搜索「前端技术砖家」，关注不迷路。 > 有朋友在上一期视频评论区问 “选前端好，还是选后端好”。这个问题我自己也挺好奇，如果我当初选了后端，现在是什么样子？ 回答这个问题最好的方式，就是找两个有比较长工作经验的前端和后端，让他们来讲讲各自的从业感受，对比下发展现状。当然，前提是尽量减少他们的其它差异。 嘿，正好，我有一个非常好的朋友青果，我俩除了他做后端，我做前端之外，其它变量都高度一致。一致到什么程度呢？ 我俩都是山西人，11 年考入杭州的大学，我俩一个专业，一个班级，一个寝室，头对头睡了 4 年。 14 年我俩一起去面试了同一家小公司，一起去实习，一起入职，每天一起上下班，一起在这个公司工作了 4 年，我俩在这个公司的薪资也一模一样。 我俩唯一的区别就是，他实习就做 JAVA，然后一直坚持在做，他一开始就认准了方向，即使公司让他做 PHP、做前端，他也是拒绝的。 相比之下，我就没主见了，先做 JAVA，然后公司需要 PHP，就去做了一年多 PHP，然后公司需要前端了，就去做了一年多前端，最终误打误撞进入了前端行业。 18...
这篇文章只为说明一个问题：“Pull Request 与 Merge Request 有什么区别？”~~在我的想象中，有一双滑板鞋~不好意思，跑偏了。~~在我的想象中，它俩肯定是不一样的，并且大部分人的想法应该和我是一样的，我先来说说我的想法。 ## 自我 YY 如果经常用 Github，一定十分了解 Pull Request。如果经常用 Gitlab，一定十分了解 Merge Request。基于对 Github 和 Gitlab 的了解，我潜意识里感知到 Pull Request 与 Merge Request 是有区别的。 Github 一般是公开库，当然没有人愿意别人直接在自己的仓库上面修改代码。所以我们如果要给别人的仓库贡献代码，一般是要 fork 一个仓库，在自己的仓库改完后，给原仓库提交...
关于微前端是什么，以及微前端落地方案，社区遍地都是，本篇文章不会再赘述这些基础知识。当然如果你没了解过上述知识，也可以直接读下这篇文章，足够浅显易懂。这篇文章通过实现一个商城后台，介绍了基于 umi 框架的微前端落地方案，通过这篇文章，你可以收获 - 超级简单的、可用于生产环境的基于 umi 的微前端实践，包括一套示例代码 - 全新的、基于微前端的大型中台项目前端组织方式 > 一些技术栈 > - [umi](https://umijs.org/zh-CN "umi") 插件化的企业级前端应用框架，帮助你更好更快的开发 React 应用 > - [qiankun](https://qiankun.umijs.org/zh "qiankun") 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统 > - [@umijs/plugin-qiankun](https://umijs.org/zh-CN/plugins/plugin-qiankun "@umijs/plugin-qiankun") umi...
做了六七年程序员，经常用到 Base64 编码，但对于为什么要用，以及它的原理，一直是不求甚解。最近在某本书上看到了 Base64 的编码原理，原来这么这么这么简单。 ## Base64 解决了什么问题 假如我们要在网络中传输下面的问题 ``` 你好 小朋友 我是砖家 你是谁？ ``` 这段文本中包含了空格、换行、回车等不可见字符，在网络传输中，各个设备对不可见字符处理机制可能不同，会存在信息传输错误的情况。 此时我们就需要一种编码机制，把不可见字符统统转成可见字符。 ## Base64 编码原理 接下来我们通过将 `abcd` 4 个字符转为 Base64 编码，来了解下它的原理。 1. 把字符三三分组，不够时通过 0 补齐。比如...
之前写了一篇文章《[React Hooks 使用误区，驳官方文档](https://zhuanlan.zhihu.com/p/450513902)》，文中抛出了两个观点： 1. 不是所有的依赖都必须放到依赖数组中 1. deps 参数不能缓解闭包问题 这两个观点引起了剧烈的讨论，当然大多数人还是持反对意见的，甚至质疑我不会用 Hooks，(⊙o⊙)… 我想说我写的 Hooks 比你吃的盐都多（开玩笑 😋 ~） 然后呢，知乎上来了个提问《[如何看待《React Hooks 使用误区，驳官方文档》？](https://www.zhihu.com/question/508780830)》，大家依旧是讨论激烈，甚至 #黄玄 大佬也亲自来回答了。 很多同学极力反对我的观点，刚开始我还想一争高下，后来实在没精力一个一个对线。 这不，React 官方来帮我助阵了？React 官方为啥出 useEvent？就是发现以前要求的依赖写法，实在有太大问题，不加一个新的 API，官方示例都没法写了 🙂。  以前一直觉得 React...
在 2021 年 6 月 8 号，React 公布了 v18 版本的发布计划，并发布了 alpha 版本。经过将近一年的发布前准备，在 2022 年 3 月 29 日，React 18 正式版终于和大家见面了。 React 18 应该是最近几年的一个重磅版本，React 官方对它寄予了厚望。不然也不会将 React 17 作为一个过渡版本，也不会光发布准备工作就做了一年。 在过去一年，我们已经或多或少了解到一些 React 18...
# 完全理解 redux 关注公众号「前端技术砖家」，拉你进交流群，大家一起共同交流和进步。  ### 目录 1. [前言](#intro) 2. [状态管理器](#state) - 简单的状态管理器 - 有计划的状态管理器 3. [多文件协作](#coordination) - reducer 的拆分和合并 - state 的拆分和合并 4. [中间件 middleware](#middleware) 5. [完整的 redux](#redux) 6....
## 什么是 react-refresh [react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin) 是 React 官方提供的一个 模块热替换（HMR）插件。 > A Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading) for React components. 在开发环境编辑代码时，react-refresh 可以保持组件当前状态，仅仅变更编辑的部分。在 [umi](https://umijs.org/zh-CN/docs/fast-refresh) 中可以通过 `fastRefresh:...
# 助你完全理解React高阶组件（Higher-Order Components） >有时候人们很喜欢造一些名字很吓人的名词，让人一听这个名词就觉得自己不可能学会，从而让人望而却步。但是其实这些名词背后所代表的东西其实很简单。来自[React.js 小书](https://github.com/huzidaha/react-naive-book) ## 高阶组件定义 > a higher-order component is a function that takes a component and returns a new component. 翻译：高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。 理解了吗？看了定义似懂非懂？继续往下看。 ## 函数模拟高阶组件 我们通过普通函数来理解什么是高阶组件哦~ 1. 最普通的方法，一个`welcome`，一个`goodbye`。两个函数先从`localStorage`读取了`username`，然后对`username`做了一些处理。...