blog
blog copied to clipboard
brickspert
个人技术博客，博文写在 Issues 里。
## 1. 译者前言 最近 React 18 发布后，部分改动对我们使用 React Hooks 有一些影响。这篇文章对官方的文档《[Update to remove the "setState on unmounted component" warning](https://github.com/reactwg/react-18/discussions/82)》做了翻译，好让大家清晰的认识到这个改动的背景和影响。 这是 React 18 对 Hooks 的影响系列第一篇，后面我还会整理其它有影响的改动，关注不迷路。 ## 2. 翻译 ### 2.1 背景...
**招聘：《[宇宙第三前端团队招人啦！](https://zhuanlan.zhihu.com/p/119074168)》** **招聘：《[宇宙第三前端团队招人啦！](https://zhuanlan.zhihu.com/p/119074168)》** **招聘：《[宇宙第三前端团队招人啦！](https://zhuanlan.zhihu.com/p/119074168)》** 原创 for：前端技术砖家 公众号 性能优化不是一个简单的事情，但在 95% 以上的 React 项目中，是不需要考虑的，按自己的想法奔放的使用就可以了。 我认为性能优化最好的时候是项目启动时。在项目启动时，需要充分考虑页面的复杂度，如果非常复杂，则必须提前制定各种措施，防止出现性能问题。如果前期评估页面不复杂，那大概率不会出现什么性能问题。最惨的事情就是前期没有评估，中后期碰到了性能问题，解决起来就相当棘手了。 这篇文章会分享 React 项目常见的性能分析手段及优化手段，碰到性能问题的同学可以看看，没碰到性能问题的同学也需要提前预警了。 ## 性能分析 ### Performance 说到性能分析，当然要有一些指标，来度量现在网页“卡”的程度，并指导我们持续改进。chrome 自带的 Performance，一般就足够我们进行分析了。  我写了一个简单的卡顿的例子，我们尝试通过 Performance 来分析出这个例子中哪一行代码卡。首先你可以打开这个[示例页面](https://h1e7f.sse.codesandbox.io/demo1)，在这个页面的 input 框中输入的时候，你能明显感觉到非常卡顿。 ...
虽然 antd 提供了大量的 Icon 图标，但是在平时的设计稿中，会出现各种设计师自定义的 Icon，对于这类图标，怎样处理更好呢？ ## 多种方法 ### 直接当做图片使用 svg 也是一种图片，可以作为 `img` 的 `src` 使用。 通过配置 `url-loader` 的配置，我们可以直接引用 svg 资源。 ``` { test: /\.(png|jpg|gif|svg)$/, use: [{ loader: 'url-loader', options:...
服务端渲染（Server-Side Rendering），是指由服务侧完成页面的 HTML 结构拼接的页面处理技术。一般用于解决 SEO 问题和首屏加载速度问题。 由于 SSR 是在非浏览器环境执行 JS 代码，所以会出现很多问题。本文主要介绍 React Hooks 在 SSR 模式下常见问题及解决方案。 > 更多关于 SSR 的介绍可以看 UmiJS 的文档《[服务端渲染（SSR）](https://umijs.org/zh-CN/docs/ssr#服务端渲染（ssr）)》。 ## 问题一：DOM/BOM 缺失 SSR 是在 node 环境下运行 React...
# react-router v4 使用 history 控制路由跳转 ## 问题 当我们使用`react-router v3`的时候，我们想跳转路由，我们一般这样处理 1. 我们从`react-router`导出`browserHistory`。 2. 我们使用`browserHistory.push()`等等方法操作路由跳转。 类似下面这样 ```javascript import browserHistory from 'react-router'; export function addProduct(props) { return dispatch => axios.post(`xxx`, props, config)...
 [ahooks](https://github.com/alibaba/hooks) 是由蚂蚁 umi 团队、淘系 ice 团队以及阿里体育团队共同建设的 React Hooks 工具库。ahooks 基于 React Hooks 的逻辑封装能力，提供了大量常见好用的 Hooks，可以极大降低代码复杂度，提升开发效率。ahooks 致力成为和 antd/fusion 一样的 React 基础设施，帮助开发者在逻辑层面省去大量的重复工作。 ## ahooks 前身 ahooks 的前身是蚂蚁开源的 [@umijs/hooks](https://github.com/umijs/hooks)，可以说 ahooks 是 umi hooks...
从零搭建React全家桶框架教程
# 从零搭建React全家桶框架教程 关注公众号「前端技术砖家」，拉你进交流群，大家一起共同交流和进步。  源码地址：[https://github.com/brickspert/react-family](https://github.com/brickspert/react-family) 提问反馈：[blog](https://github.com/brickspert/blog/issues/1) ## 因为本教程写于2017年9月，然而前端技术发展太快了。有些库的版本一直在升级，所以你如果碰到奇怪的问题，请先检查下安装的库版本是否和我源码中的一样。please~ ## 大家阅读的时候，照着目录来阅读哦，有些章节不在文章里面。要点链接的~ # 目录 1. [写在前面](#intro) 2. [说明](#explain) 3. [init项目](#init) 4. [webpack](#webpack) 5. [babel](#babel) 6. [react](#react) 7. [命令优化](#command) 8. [react-router](#react-router) 9. [webpack-dev-server](#webpack-dev-server)...
说到状态管理器，轮子满天飞。在 Class 时代，redux 与 mobx 几乎占据了全部市场，几乎没有没用过 redux 的同学。随着 Hooks 的诞生，新的一批轮子应运而生，其中有代表性的有 unstated-next、constate 等等。当然无论什么轮子，要解决的问题都是一样的：**跨组件状态共享。**在解决这个核心问题的同时，需要尽可能的满足以下几个特性： - TypeScript 支持 - 友好的异步支持 - 支持状态互相依赖 - 同时支持 Class 与 Hooks 组件 - 使用简单 ## Recoil 体验...
关注公众号「前端技术砖家」，拉你进交流群，大家一起共同交流和进步。  > 这是蚂蚁金服内部技术分享的文字稿，本次分享主要介绍了为什么要用 Hooks？以及如何使用 Umi Hooks 提效？ > > Umi Hooks [http://github.com/umijs/hooks](http://github.com/umijs/hooks) ## 开场  大家好，我叫尽龙，来自体验技术部。社区名称叫 brickspert，砖家的意思。 自从 React 推出 React Hooks 后，就开始尝试使用 Hooks，并逐渐喜欢上了它。目前，几乎 100% 的组件都是使用 Hooks 开发。经过大半年的实践，在 Hooks...
## 组件 > 组件是 UI + 逻辑的复用，但逻辑复用能力等于 0。 一个 React 项目，是由无数个大大小小的组件组合而成的。在 React 的世界中，组件是一等公民。而我们平时拆分组件的依据无非是：尽量的复用代码。 组件是 UI + 逻辑的复用，你不能将 UI 和逻辑拆开。比如 Antd 的 [Cascader 级联选择](https://ant.design/components/cascader-cn/) 组件，内置了样式和级联选择的逻辑，用户使用的时候相当于一个黑盒，只管用就行了。但是有一个很现实的问题，当该组件的样式不能满足我们需求的时候，我们需要从 0 重新实现一个组件，重写 UI + 逻辑，哪怕逻辑真的一模一样。组件的逻辑复用能力等于 0。我可以想到一个可怕的事实，社区上的同类组件，大部分的逻辑都是可以复用的，只是在样式上有差异，但逻辑共享在社区上并没有很流行。...