前端框架
文章平均质量分 74
Geek技术前线
公众号 Geek技术前线
展开
-
如何使用 React、TypeScript、TailwindCSS 和 Vite 创建 Chrome 插件
如何使用现代 Web 技术创建一个 Chrome 插件。通过结合使用 React、TypeScript、TailwindCSS 和 Vite,我们可以快速高效地开发出功能强大的扩展。文章从环境设置、项目创建、组件开发、样式设计到最终的打包和发布,提供了全面的指导原创 2024-09-21 08:54:13 · 638 阅读 · 0 评论 -
React Labs: 我们最近在做什么——2023 年 3 月
最新的幕后花絮,展示了 React 项目中正在进行的工作。最引人注目的更新是 React Forget 背后的进展——这是一个优化编译器原创 2023-04-04 17:25:41 · 642 阅读 · 0 评论 -
使用TypeScript并升级到React 18
为了支持React 18,React类型定义进行了升级,其中包含了一些break change。本文将讲述在TypeScript中如何升级到React 18原创 2022-04-23 15:15:38 · 2163 阅读 · 0 评论 -
React中的浅比较是如何工作的?
本文翻译自https://www.chakshunyu.com/blog/how-does-shallow-comparison-work-in-react/浅比较这个概念在React开发过程中很常见。它在不同的过程中扮演着关键的角色,也可以在React组件生命周期的几个地方找到。判断class组件是否应该更新、React hood的依赖数组、通React.memo 缓存处理等例子如果曾经阅读过官方的React文档,我们可能会经常到看到浅比较这个概念。但通常只是一个比较简单的解释。所以,本文将研究浅.原创 2022-04-15 22:22:02 · 997 阅读 · 0 评论 -
从一个webpack打包bug到探索resolve背后的机制
背景最近在业务项目配置升级改造的时候遇到了一个诡异的运行时报错经过进一步调试发现,原因是在业务代码的lib/axios.ts的import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';这行代码的引入居然是引入的 业务代码的lib/``axios``.ts而不是node_modules中的axios由于项目使用的是司内一个二次封装webpack的框架,找相关同学排查后发现是tsconfig-paths-we原创 2021-11-03 09:04:49 · 441 阅读 · 0 评论 -
React Native性能优化:应该做和不应该做的
翻译原文:https://medium.com/crowdbotics/react-native-performance-do-and-dont-88424e873bbd在使用一些框架例如React Native去实际开发移动端应用的时候,性能是一个重要的问题。React Native默认情况下的性能是没有问题的,但是在实际开发React Native的时候,我们也可能会遇到一些性能相关的问题。这些问题是很难通过组件本身修复去解决的。在这篇文章中,我们会提供一些建议来优化开发React Native.原创 2021-03-03 19:36:36 · 727 阅读 · 1 评论 -
react useCallback完美替代方案
react函数组件为了保持引用不变,很多时候需要借助useCallback,但是useCallback强依赖于外部变量,必须传个依赖变量,万一漏传了很容易出问题。比较函数复杂时较麻烦,使用这个即可完美解决,引用不变,调用肯定是最新的,并且不需依赖just 记录方便cpfunction usePersistCallback<T extends(...args: any[]) => any>(fn?: T) { const ref = useRef<T>(); ref原创 2021-01-20 21:26:55 · 777 阅读 · 0 评论 -
vue tsx render函数 transition动画不生效
给transition子元素加上一个key,显示异常时使用不同的key即可<transition><div key={this.isActive?'1':'2'} style={{display:this.isActive?'block':'none'}} > hello</div></transition>参考原创 2020-12-08 15:09:04 · 1631 阅读 · 0 评论 -
77.9K Star 的 Axios 项目如何优雅实现请求重试
axios是什么,无需多讲,axios解析的可以看下77.9K Star 的 Axios 项目有哪些值得借鉴的地方这篇文章为什么需要请求重试项目中,经常会有很多用户的网络抽风或者各种原因造成偶发性的网络异常请求错误,如果没有重试机制,有时候体验就比较糟糕。这个时候实现网络错误请求错误重试也能比较好的解决这种偶发场景。如何去做呢我们可以使用axios-retry这个库去实现重拾。用法也非常简单import axiosRetry from 'axios-retry';axiosRetry(axi.原创 2020-11-16 20:55:58 · 273 阅读 · 0 评论 -
gitlab ci本地调试
1、安装gitlab runner2、执行gitlab-runner exec docker job_name 即可原创 2020-11-02 15:33:21 · 1885 阅读 · 0 评论 -
puppeteer 无法获取跨域iframe内容解决
puppeteer访问的页面存在跨域iframe时,会存在无法获取iframe内容的问题。解决方法,puppeteer加上启动参数 args: [ '--disable-web-security', '--disable-features=IsolateOrigins,site-per-process', // 很关键... ]如: const browser = await puppeteer.launch({ args: [ '--disable-原创 2020-10-27 20:48:53 · 2257 阅读 · 0 评论 -
deno 初体验,实战记录一个node项目迁移到deno需要做什么
本文以csdnsynchexo迁移到deno实现进行一步步探索说明。csdnsynchexo是一个爬取 csdn 博客内容生成 hexo 源文件内容的简单工具,正常版本使用 nodejs 实现,。最近 node 之父 ry 大神的 deno 也发布了 1.0,就想实践一下,从 node 版本迁移升级到 deno。本文主要记录一个 nodejs 应用迁移到 deno 需要做哪些工作,还涉及到一些非常基础的 deno 概念。如果你熟悉 nodejs,阅读本文的难度几乎为 0迁移后项目github地址.原创 2020-06-09 09:41:19 · 2355 阅读 · 1 评论 -
带你找出react中,回调函数绑定this最完美的写法!
相信每一个人写过react的人都对react组件的的this绑定有或多或少的了解在我看来,有若干种this写法,我们通过本文,一步步找优缺点,筛选出最完美的react this写法!(有点小激动)1、远古时代 React.createClass说实话,在我接触react的时候,这种写法就只在相关文章见到了。React.createClass会自动绑定所有函数的this到组件上React...原创 2020-03-09 20:17:07 · 1377 阅读 · 1 评论 -
When to use JSX.Element vs ReactNode vs ReactElement?
A ReactElement is an object with a type and props.interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> { type: T;...转载 2019-12-26 10:10:31 · 1462 阅读 · 0 评论 -
由浅至深了解webpack异步加载背后的原理
源自最近对业务项目进行 webpack 异步分包加载一点点的学习总结提纲如下:相关概念webpack 分包配置webpack 异步加载分包如何实现相关概念module、chunk、bundle 的概念先来一波名词解释。先上网上一张图解释:通过图可以很直观的分出这几个名词的概念:1、module:我们源码目录中的每一个文件,在 webpack 中当作module来处理...原创 2019-12-14 22:05:54 · 1113 阅读 · 0 评论 -
3分钟掌握hook在typescript中的姿势
hook结合typescript可以说是很香了。本文主要介绍hook结合typescript 如何使用,享受ts带给我们的编辑器提示和类型约束useStateuseState如果初始值不是null/undefined的话,是具备类型推导能力的,根据传入的初始值推断出类型;初始值是 null/undefined的话则需要传递类型定义才能进行约束。一般情况下,还是推荐传入类型(通过useSta...原创 2019-12-09 20:35:59 · 2677 阅读 · 0 评论 -
超详细preact hook源码逐行解析
本文通过对preact的hook源码分析,理解和掌握react/preact的hook用法以及一些常见的问题。虽然react和preact的实现上有一定的差异,但是对于hook的表现来说,是基本一致的。对于 preact的hook分析,我们很容易旧记住 hook 的使用和防止踩一些误区preact hook 作为一个单独的包preact/hook引入的,它的总代码包含注释区区 300 行。...原创 2019-11-11 20:59:33 · 732 阅读 · 0 评论 -
简析redux技术栈(二):认识saga的buffer和chanel
本文地址我们知道redux-saga 也是通过中间件的形式与 redux 本身连接起来。例如下面使用了redux-saga的react项目需要以下这样的 初始化function configureStore(initialState) { // 运行返回一个redux middleware const sagaMiddleware = createSagaMiddleware(); ...原创 2019-08-20 22:18:29 · 343 阅读 · 0 评论 -
简析redux技术栈(一):redux中间件
一般使用了中间件的 redux 初始化是下面这样的function configureStore(initialState) { return { ...createStore( reducer, initialState, applyMiddleware(middleware1, middleware2, middleware3) ) ...原创 2019-08-14 22:35:00 · 417 阅读 · 0 评论 -
两个配置修改,让你的webpack打包速度飞起来
webpack打包速度优化-js公司前端项目由于一些原因,很多业务都是放在同一仓库内(例如业务a、b、c,对应目录app/a app/b app/c),并且是用同一套webpack的配置进行打包,每次构建的时候通过传入特定的参数打包指定的业务优化1 使用babel7,@babel/preset-typescript替代ts-loader使用babel7并且使用@babel/preset-...原创 2019-04-30 17:10:41 · 583 阅读 · 0 评论 -
redux-sage笔记
前言:以前用redux处理异步状态都使用redux-thunk那个库。也一直听说redux-saga是个和redux-thunk能够实现类似功能的库,而且redux-saga的处理方法更加高压和方便。这几天阅读了下文档写些小结。以下是一些saga的常用方法redux/sagatakeEvery yield* takeEvery('PRODUCTS_REQUESTED', fetchProdu原创 2017-12-13 21:31:09 · 2729 阅读 · 0 评论 -
redux源码解读(一)自实现简易redux
redux的源码解读(一)首先是自己实现的简易版的redux。主要是对着API按照自己的思路实现了一遍的初版,没有任何的异常处理function createStore(reducer, initialState) { let currentState = initialState, listeners = []; function getState(原创 2018-01-12 19:48:19 · 399 阅读 · 0 评论 -
redux源码解读(二)测试环境搭建和代码测试
(一)中写了一个简易版的redux,测试都是直接通工看命令行输出的,显然这是不科学的所以就需要写测试了,所以。我选择了jest。网上的介绍如下….配置简单的测试环境按照官方文档npm install --save-dev jest把下面的内容添加到package.json { "scripts": { "test": "jest" }}添加b原创 2018-01-14 14:51:30 · 405 阅读 · 0 评论 -
redux源码分析(三) 源码部分
源码结构: - /utils/ - actionTypes.js - isPlainObject.js 判断是否是简单对象 - warning.js 一些警告在控制台打印 - applyMiddleware.js - bindActionCreator.js - combineReducer.js - compose.js - index.js下面是每原创 2018-01-16 12:16:34 · 306 阅读 · 0 评论 -
react相关tips
记录react中的一些有趣和容易被忽略的东西react中,使用setState时,尽量使用setState((preState) => return {newState})的写法。因为有的时候会发生神奇的东西setState方法有时候是异步的,有时候是同步的。(考完试写….)setState方法的第二个参数是可以接收一个回调函数的。这个回调的执行是什么时候?生命周期xxx之类的pur原创 2018-01-08 17:22:33 · 292 阅读 · 0 评论 -
wepy repeat标签循环渲染bug解决
记录一个最近使用wepy开发微信小程序的使用repeat循环渲染的坑点wepy中使用了模板的概念,意味着同一个组件多次使用会共享实例,也就是说repeat渲染出来的多个子组件会共享同一份状态,就会造成了下面所说的情况//父组件 for="{{subjectFinal.finish}}" key="index" index="index" item="item">原创 2018-02-03 22:57:56 · 10037 阅读 · 0 评论 -
微信小程序踩坑记录
某个元素如果设置fixed。在某些ios机型某系统下,会fixed不正常显示。似乎不是相对于视窗定位。解决办法:把这个东西放在wxml顺序的最顶部在某些ios机型某系统下。某个元素在flex布局中,flex子元素设置absolute会导致这个子元素不受flex容器控制其它待补充。。。...原创 2018-04-09 15:43:23 · 247 阅读 · 0 评论 -
深入Preact源码(一)jsx要转化成virtualDOM发生了什么
本文和自己在掘金的同步jsx要转化成virtualDOM,首先经过babel,再经过h函数的调用形成virtualDOM。具体如下 源码链接 ./src/h.js相当于react得createElement(),jsx经过babel转码后是h的循环调用,生成virtualDOM。// jsx<div><span className="sss" fpp="xxx...原创 2018-04-17 20:59:46 · 447 阅读 · 0 评论 -
深入Preact源码分析(二)virtualDOM如何变为真实dom
一个简单的Preact代码如下// 一个简单的Preact demoimport { h, render, Component } from 'preact';class Clock extends Component { render() { let time = new Date().toLocaleTimeString(); return &...原创 2018-04-17 21:04:30 · 912 阅读 · 0 评论 -
深入Preact源码分析(三)Preact组件实例到DOM的过程
紧接上节,Preact组件从vnode到真实html的过程发生了什么?...// buildComponentFromVNode方法内部// buildComponentFromVNode(undefined, vnode, {}, false);c = createComponent(vnode.nodeName, props, context);// 创建组件setCo...原创 2018-04-17 21:06:01 · 664 阅读 · 0 评论 -
深入Preact源码分析(四)setState发生了什么
setState发生了什么setState(state, callback) { let s = this.state; if (!this.prevState) this.prevState = extend({}, s); extend(s, typeof state==='function' ? state(s, this.props) : state);//...原创 2018-04-17 21:12:04 · 1127 阅读 · 0 评论 -
webpack4学习+配置实现简单的多页面jq开发脚手架
wepack4搭建多页面脚手架学习前言:以前刚接触webpack的时候还是1,当时大概过了下文档操作了一下当时写的一些注释。后来开发的时候基本写react都是用的create-react-app或者找别人的搭好的脚手架用。所以趁着找到实习后的间隙加上webpack4刚出也不算久,重新学习加复习下webpack的一些知识。本文仓库。仍在更新和学习摸索中tips: - extract-t...原创 2018-04-12 16:14:01 · 3748 阅读 · 0 评论 -
深入Preact源码分析(五)非组件类型的diff解析
非组件节点的diff分析diff的流程,我们从简单到复杂进行分析通过前面几篇文章的源码阅读,我们也大概清楚了diff函数参数的定义和component各参数的作用/** * @param dom 初次渲染是undefinde,第二次起是指当前vnode前一次渲染出的真实dom * @param vnode vnode,需要和dom进行比较 * @param context 类...原创 2018-04-20 16:45:23 · 442 阅读 · 0 评论 -
React 新版生命周期和旧版对比
先mark两张图。以后便于查询之前:之后参考连接这里写链接内容原创 2018-05-19 21:44:26 · 1454 阅读 · 0 评论 -
electron-store在webpack打包中的Cannot find module "." 问题
之前项目中遇到一个问题,使用了脚手架,并且引入了electron-store这个包。在开发模式下是能正常运行的,但是打包后却会包Cannot find module “.” 的问题,类似的issue在github的electron的上也有很多人提到,最终,在那个脚手架的issue下找到了答案方法//在根目录下npm uninstall electron-store --save //卸载elect原创 2017-12-10 11:59:49 · 6962 阅读 · 1 评论