如何使用 React Hooks 重构类组件? 大家好,我是 CUGGZ。,最初,在 React 中可以使用 createClass 来创建组件,后来被类组件所取代。在 React 16.8 版本中,新增的 Hooks 功能彻底改变了我们编写 Re... 网站建设# error# hooks# react 4年前1430
你可能需要的React开发小技巧! ,大家好,我是 CUGGZ。,今天来分享 10 个编写更简洁 React 代码的实用小技巧!,如何将 true 值传递给给定的 props?,在下面的示例中,使用 prop showTitle 在导航... 网站建设# props# react# showtitle 4年前410
2023 年的 React 生态 React 是用于构建用户界面的JavaScript库,其核心是让开发者能够使用函数组件创建组件驱动的用户界面。它带有一些内置解决方案,例如,用于本地状态、副作用和优化性能的 React Hooks... 网站建设# react# ui# 创建 4年前990
一篇带你了解 React Fiber 是什么? ,大家好,我是前端西瓜哥。,为了提高 React 的性能,React 团队在开发 React 16 时做了底层的重构,引入了 React Fiber 的概念。,Fiber,本意为 “纤维”,在计算机世... 网站建设# fiber# react# 任务 4年前430
被Diss性能差,Dan连夜优化React新文档 大家好,我卡颂。,昨天在开源圈发生个小插曲。起因是有个用户表示:React新文档在文档结构、美观度、性能等各方面都达到很高的标准。,尤雨溪对Vue新文档与React Beta文档做了测试后表示:在性能... 网站建设# dan# react# vue 4年前430
React内部是如何实现Cache方法的? ,大家好,我卡颂。,前几天写的一篇介绍use这个新hook的文章中聊到React原生实现了一个缓存函数的方法 —— cache。,对于如下代码,被cache包裹的函数,当多次调用时,如果传参不变,会始... 网站建设# cache# id# react 4年前490
现代 Web 的流程自动化与提效实践 ,随着前端的发展,越来越多的工具库、方法被用在日常研发流程中,这大大提升了业务开发的效率,而随着各类自动化流程的建设,开发同学也不再需要关注到每一个细节。前段时间项目阶段性交付,在推进的过程中也做了不... 网站建设# react# 提效# 流程 4年前370
用于前端开发的 React 或 Angular ,用于前端开发的 React 或 Angular,长期以来一直是大众关注的话题。关于两者中哪一个更好的辩论是两个技术堆栈的永无止境的战场。在这篇博文中,我们将告诉您两种技术堆栈中的哪一种更适合您的前端... 网站建设# angular# react# typescript 4年前440
效率宝典:10个超实用的React Hooks库 大家好,我是 CUGGZ。,在 React 项目开发过程中,一套好用的 React Hooks 库是必不可少的,使用这些 React Hooks 库可以大大提升开发效率,避免重复造轮子!今天就来分享1... 网站建设# github# hooks# https 4年前140
7款好用的前端框架,试试就知道 作者 | Ankit Patel, 译者 | 翟珂, 编译丨Noe, 常说工欲善其事必先利其器。对于那些想要提高用户体验的企业来说,这一点尤其正确。在我们所处的数字世界中,给予UI或用户界面更多关注... 网站建设# asp# js# net 4年前260
React 中常见的八个错误,如何避免? 大家好,我是 CUGGZ。,今天来分享在 React 开发中常见的一些错误,以及如何避免这些错误。理解这些问题背后的细节,防止犯下类似的错误。, Can’t perform a React state... 网站建设# react# 卸载# 异步 4年前440
多语言站点React前端框架i18next 现在的网站很多时候都需要面对世界过个地区的人们访问,如果针对每个地区的人都单独构建一个网站的话,这样会非常费时费力,因此最好的解决办法就是根据用户的访问来对网站的内容进行翻译,这种翻译一般是通过从数据... 网站建设# react# 网站# 翻译 4年前320
六个在 React 中使用的小技巧 这是一个可怕的问题,在 React 中,我们经常会编写条件语句来显示不同的视图,比如这个简单的例子。,但是,当项目的代码量足够大并且有很多 JSX 条件时,事情很快就会失控。 代码变得非常混乱且可读性... 网站建设# ampamp# react# 三元 4年前150
2023年最新最全 VSCode 插件推荐! Visual Studio Code 是由微软开发的一款免费的、针对于编写现代Web和云应用的跨平台源代码编辑器。它包含了一个丰富的插件市场,提供了很多实用的插件。下面就来分享 2023 年前端必备的... 网站建设# code# react# 开发人员 4年前270
学习 React.js 需要了解的一些概念 大家好,我是前端西瓜哥。,React.js 是被广泛使用的用于构建用户界面的 JS 库。下面给大家介绍一下学习 React 需要了解的一些概念。,在 React 这类框架流行之前,我们更新 UI,都... 网站建设# js# react# 写法 4年前320
如何在React Native中实现类Instagram滤镜效果? 审校 | 孙淑娟 ,本文通过分步骤的指南,说明如何在React Native中整合图片编辑,并实现类Instagram滤镜的效果。,,在Instagram上,你可以很容易地使用滤镜功能,并迅速得到想... 网站建设# instagram# native# react 4年前360
React团队是技术领域的旋转门么? ,大家好,我卡颂。,继Hooks的发明者「Sebastian Markbåge」后,又一名React核心成员「Andrew Clark」加入Vercel,从事Next... 网站建设# js# next# react 4年前350
真的不要错过这几个 React 工具,好吗? 写过 Vue 的读者一定用过官方提供的一个浏览器调试工具 vue-devtool[1],它支持在浏览器中调试组件时,点击对应的按钮打开该组件对应你本地代码的文件。,这真的非常实用,而且是 Vue 官网... 网站建设# react# vue# 工具 4年前390
React useEvent:砖家说的没问题 之前写了一篇文章《React Hooks 使用误区,驳官方文档[1]》,文中抛出了两个观点:,这两个观点引起了剧烈的讨论,当然大多数人还是持反对意见的,甚至质疑我不会用 Hooks,(⊙o⊙)… 我想... 网站建设# hooks# react# useevent 4年前530
一篇带给你 React.memo 如何使用? ,大家好,我是前端西瓜哥。,最近做的新功能有性能问题,所以我想尝试优化一下 React 组件的性能。下面我们来好好学习一下 React.memo 的用法。,当某个组件里的状态发生改变时,React 会... 网站建设# dom# memo# react 4年前350
2022年值得推荐的React库! 今天来分享一下值得推荐的 React 库。,注:排名不分先后,根据具体的业务场景谨慎使用。,,Redux 是 JavaScript 应用程序的状态容器,提供可预测的状态管理。React Redux 是... 网站建设# com# github# https 4年前370
从0到1使用Webpack5 + React + TS构建标准化应用 作者 | 刘皇逊(恪语,本篇文章主要讲解如何从一个空目录开始,建立起一个基于webpack + react + typescript的标准化前端应用。,在项目开发中,我们可以使用create-reac... 网站建设# babel# react# 我们 4年前370
为什么Vue(默认情况下)比React性能更好 ,本文不是要辩论 Vue 好还是 React 好,而是要看看这两个框架在低层次上是如何选择的。,我知道有些开发者在选择框架之前会倾向于看基准。然而,这并不是最关键的方面,因为99%的性能都来自于你写的... 网站建设# jsx# react# vue 4年前200
大家都能看得懂的源码之 Ahooks 整体架构篇 本文是深入浅出 ahooks 源码系列文章的第一篇,这个系列的目标主要有以下几点:,注:本系列对 ahooks 的源码解析是基于 v3.3.13。自己 folk 了一份源码,主要是对源码做了一些解读... 网站建设# ahooks# hooks# react 4年前200
在 React 中使用 Redux 的四种写法 大家好,我是前端西瓜哥。今天我们看看React 中使用 Redux 的 4 种写法。,Redux 是一种状态容器 JS 库,提供可预测的状态管理,经常和 React 配合来管理应用的全局状态,进行响应... 网站建设# react# redux# 写法 4年前310
在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的 首先本文不会过度深入讲解只属于 React 或者只属于 Vue 的原理,所以只懂 React 或者只懂 Vue 的同学都可以畅通无阻地阅读本文。,关于 Vue3 的 React-style Hooks... 网站建设# hooks# react# usestate 4年前430
一个简洁、强大、可扩展的前端项目架构是什么样的? ,大家好,我卡颂。,React技术栈的一大优势在于 —— 社区繁荣,你业务中需要实现的功能基本都能找到对应的开源库。,但繁荣也有不好的一面 —— 要实现同样的功能,有太多选择,到底选哪个?,本文要介绍... 网站建设# bulletproof# react# 开源 4年前550
跨平台开发,Flutter还是React Native? 作者 | 胥磊,审校 | 孙淑娟,随着移动应用的不断普及,各个公司都在寻找可以在多种设备上运行的跨平台应用解决方案,这里跨平台主要是指安卓和iOS。统计数据显示:截止2021年6月,安卓以接近73%的... 网站建设# flutter# react# 应用 4年前640
React Hook 四种组件优化 ,React Hook 已成为当前最流行的开发范式,React 16.8 以后基于 Hook 开发极大简化开发者效率,同时不正确的使用 React Hook也带来了很多的性能问题,本文梳理基于 Rea... 网站建设# hook# react# 渲染 4年前490
Ahooks 的 UseClickAway 在 React 17 中不工作了,该怎么办? ,最近公司的前端项目从 React 16 升级到了 React 17,导致 ahooks 的 useClickAway 不能按预期工作。,下面西瓜哥我就来说说到底发生了什么事。,ahooks 是阿里巴... 网站建设# ahooks# hook# react 4年前440
简单又好用的八款前端拖拽排序库 今天来推荐 8 个简单又好用的前端拖拽排序库!,react-beautiful-dnd 这是一款美观且简单易用的 React 列表拖拽库。其动画效果自然,性能优秀,简洁而强大的 API,易于上手,与... 网站建设# beautiful# github# react 4年前400
一个被忽略的前端细分领域 ,大家好,我卡颂。,回想下你学新技术的主要途径是什么?看书?看技术文档?看博文?看视频?,归纳起来,无外乎「文字」、「视频」两种形式。,从纸媒时代到互联网时代,再到移动互联网时代,虽然信息的载体发生变... 网站建设# react# 交互式# 博文 4年前210
Ahooks 是怎么解决 React 的闭包问题的? 本文来探索一下 ahooks 是怎么解决 React 的闭包问题的?,先来看一个例子:,代码示例[4],当我点击按钮的时候,发现 setInterval 中打印出来的值并没有发生变化,始终都是 0。这... 网站建设# ahooks# function# hooks 4年前530
前端框架:性能与灵活性的取舍 ,大家好,我卡颂。,针对「前端框架」,长期存在着各种纷争。其中争论比较大的是下面两项:,比如,各大新兴框架都会掏出benchmark证明自己优秀的运行时性能,在这些benchmark中React通常... 网站建设# api# benchmark# react 4年前230
每个初级 React 开发人员都会犯的八个错误 ,每个学习 React 的程序员在学习过程中都会犯大量的错误。 有时他们甚至不知道自己犯了这些错误。 如果您精通 React,则需要避免这些错误并根据最佳实践进行编码。 所以,我想展示你们所做的错误并... 网站建设# react# 开发人员# 我们 4年前220
快速在你的Vue/React应用中实现Ssr(服务端渲染) 我们都知道, Vue和React是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出自定义组件,进行生成 DOM 和操作 DOM, 也就是我们常说的客户端渲染, 并且我们大部分主流的场景都是SP... 网站建设# react# spa# vue 4年前240
四个非常有用的 React 技巧 我们经常需要在React的useEffect中监听键盘事件、鼠标事件等,但是我们经常忘记删除它们。,是的,当我们回到这个组件的时候,scroll事件又会被监听。,换句话说,我们可能会将数千个 wind... 网站建设# react# 我们# 显示 4年前160
过五关!React高频面试题指南 作者丨Michael Pautov, 译者 | 翟珂, 审校丨Noe, 谈到前端开发,ReactJS是目前最受欢迎的选择之一。下面列出的是最常问到的ReactJS面试题。, 从易到难,让我们看一下五... 网站建设# dom# react# reactjs 4年前860
Github上八个优秀的React项目 React Tetris 是一个使用 React、Redux、Immutable 制作的俄罗斯方块游戏。它是一个非常不错的 React 练手项目,小小的“方块”还是有很多的细节可以优化和打磨。项目的官... 网站建设# github# react# tetris 4年前100
React 的生命周期函数有哪些? ,大家好,我是前端西瓜哥。今天来过一下 React 类函数的生命周期。,React 中类组件的生命周期函数,分为挂载、更新、卸载三种:,相关的拦截器:,更新状态的方法:,旧版生命周期:,,新版生命周期... 网站建设# react# 周期函数# 挂载 4年前250
前端代码的三种设计模式 为了便于理解,以下代码示例采用的都是 React + rdeco 编写,设计模式本身是高度抽象的,并不局限于某一类特定的框架,组件模式是我们用的最多的或者说目前大家都唯一能够理解的模式,组件模式的特点... 网站建设# react# 上下文# 模式 4年前380
如何做 React 性能优化? ,大家好,我是前端西瓜哥。今天带大家来学习如何做 React 性能优化。,一个组件可以通过 React.memo 方法得到一个添加了缓存功能的新组件。,再次渲染时,如果 props 没有发生改变,就跳... 网站建设# memo# props# react 4年前520
React团队最近都在忙啥呢? 大家好,我卡颂。,不知道大家有没有一个感觉:React新特性的更新速度非常慢,时间通常是以年计。,实际上,在React漫长的发展过程中,除了很多优秀的特性(比如Hooks、Suspense)外,还有很... 网站建设# react# 团队# 并发 4年前480
基于Module Federation的模块化跨栈方案探索 公司发展到一定程度,随着业务分支不断变多,B端C端的项目也随之增多,由于历史原因可能产生新老技术栈(vue/react)共存的情况,这既不利于组件物料的抽离统一(一类通用组件需适配多套技术栈),也增大... 网站建设# react# 前端# 技术 4年前560
我对 React 实现原理的理解 React 是前端开发每天都用的前端框架,自然要深入掌握它的原理。我用 React 也挺久了,这篇文章就来总结一下我对 react 原理的理解。,react 和 vue 都是基于 vdom 的前端框架... 网站建设# dom# react# vdom 5年前680
ReactJS 开发人员应该具备的 12 项基本技能 随着越来越多的用户转向全渠道方法,拥有无缝的用户体验非常重要。实现这一目标的一种方法是拥有一个完全响应的应用程序,以确保用户在跨平台时获得最佳体验。,,有许多 JavaScript 库可用于创建移动... 网站建设# react# web# 响应 5年前280
一款开箱即用的电子签名组件 hello, 大家好, 我是徐夕, 今天又到了分享时间. 今天和大家分享一下我最近开源的轻量级电子签名组件——react-sign2.,,我们可以使用它轻松的实现电子签名, 比如说常用的合同签字, 文... 网站建设# react# sign# 灵活 5年前420
为什么我要含泪挥别 CSS-in-JS? 这篇文章将深入探讨最初吸引我使用CSS-in-JS以及后来又决定放弃的原因。如果你对CSS-in-JS背后的逻辑感兴趣,建议耐心看完本文。,顾名思义,CSS-in-JS允许你通过在JavaScript... 网站建设# css# js# react 5年前630
为什么和 CSS-in-JS 说拜拜 ,本文是由 Emotion 的第二大活跃维护者 Sam 分享,本文第一人称都指的是 Sam。Emotion 是一个广泛流行的 CSS-in-JS 库,用于React。文章 Sam 会带大家深入探讨 C... 网站建设# css# emotion# js 5年前510
React-native-web跨平台实战 随着对用户体验要求的提高,产品要求提升用户体验,多端体验一致。随着多端相同的业务也越来越多,需要投入IOS,Android,Web多端开发人员。这就迫切的需要一种一次开发同时使用在Android ,I... 网站建设# native# react# rn 5年前660
那些关于DOM的常见Hook封装,你知道几个? 本文目标主要有以下几点:,加深对 React hooks 的理解。,学习如何抽象自定义 hooks。构建属于自己的 React hooks 工具库。,培养阅读学习源码的习惯,工具库是一个对源码阅读不错... 网站建设# addeventlistener# eventtarget# hooks 5年前350
有 React fiber,为什么没有 Vue fiber? ,提到react fiber,大部分人都知道这是一个react新特性,看过一些网上的文章,大概能说出“纤程” “一种新的数据结构” “更新时调度机制”等关键词。,但如果被问:,本文将从两个框架的响应式... 网站建设# fiber# react# vue 5年前390
如何在React中应用SOLID原则? ,大家好,我是 CUGGZ。,在面向对象编程(OOP)中,SOLID 原则是设计模式的基础,它的每个字母代表一种设计原则:,下面就来看看每个原则的含义以及如何在 React 中应用 SOLID 原则... 网站建设# react# solid# 原则 5年前300
Angular:下坠中的自救 作者 | 徐杰承,审校 | 云昭,提到前端界的三大主流框架,相信每位前端开发者都能够脱口而出:React、Vue、Angular。在过去的两年中,React和Vue在圈内的热度可以说是节节攀升,“究竟... 网站建设# angular# javascript# react 5年前510
基于Jsoneditor二次封装一个可实时预览的Json编辑器组件(React版) 做为一名前端开发人员,掌握vue/react/angular等框架已经是必不可少的技能了,我们都知道,vue或react等MVVM框架提倡组件化开发,这样一方面可以提高组件复用性和可扩展性,另一方面也... 网站建设# json# jsoneditor# react 5年前150
Ahooks 中那些控制“时机”的 Hook 都是怎么实现的? 本文是深入浅出 ahooks 源码系列,这个系列的目标主要有以下几点:,加深对 React hooks 的理解。,学习如何抽象自定义 hooks。构建属于自己的 React hooks 工具库。,培养... 网站建设# ahooks# hooks# react 5年前370