14 天前 / Ryan众乐
点击上方“前端技术砖家”关注 ahooks[1] 是由蚂蚁 umi 团队、淘系 ice 团队以及阿里体育团队共同建设的 React Hooks 工具库。ahooks 基于 React Hooks 的逻辑封装能力，提供了大量常见好用的 Hooks，可以极大降低代码复杂度，提升开发效率。 ahooks 致力成为和 antd/fusion 一样的 React 基础设施，帮助开发者在逻辑层面省去大量的重复工作。 ahooks 前身 ahooks 的前身是蚂蚁开源的 @umijs/hooks[2]，可以说 ahooks 是 umi hooks 的 2.0 版本。 umi hooks 从 2019 年 9 月 发布 v1.0 之后，一路前行，得到了不少用户的青睐。
16 天前 / 前端De早读课
前言 今日早读文章由字节跳动 @HcySunYang 授权分享。 正文从这开始~~ TOC： effect() 和 reactive() shallowReactive() readonly() shallowReadonly() isReactive() isReadonly() isProxy() markRaw() 哪些数据是可以被代理的 markRaw() 函数用于让数据不可被代理 toRaw() ReactiveFlags 调度执行 effect - scheduler watchEffect() 异步副作用和 invalidate 停止一个副作用 (effect) watchEffect() 与 effect() 的区别 track() 与 trigger() ref() isRef() toRef() toRefs() 自动脱 ref customRef() shallowRef() triggerRef() unref() Lazy 的 effect()...
16 天前 / Ryan众乐
项目背景源于 2019 年 11 月 16 日FCC 成都社区主办的Web 全栈大会上尹吉峰老师的 GraphQL 的分享，让我产生了浓厚的兴趣。GraphQL 是一个用于 API 的查询语言，是使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。一个 GraphQL 服务是通过定义类型和类型上的字段来创建的，然后给每个类型上的每个字段提供解析函数。 参考学习资料： https://graphql.cn/learn/ https://typescript.bootcss.com/basic-types.html https://www.apollographql.com/docs/react/ 基于以上的一番学习，做了个实践的小项目，就代码做以下分析。
20 天前 / lmjben
点击上面的前端日志关注我们吧！ 翻译：lmjben 作者：Tyler Hawkins 正文：1970字 预计阅读时间：5 分钟 关于前端开发，我最开心的事情就是总有新的东西可以学习。但我们可能一辈子都在掌握各种编程语言、库和框架，但仍然一无所知。 因为我们都在学习，这也意味着我们都容易犯错误。没关系，我们的目的是变得更好。如果你犯了一个错误并从中吸取教训，你就做得很好！但是如果你没有学到任何新的东西，并且不断重复犯同样的错误，emmm......可能你的职业生涯就会停滞不前。 本着这种精神，下面是我在 CodeReview 初级开发同学时经常看到的三个错误。
36 天前 / 高飞
React React 是一个用于开发用户界面的 JavaScript 库， 是由 Facebook 在 2013 年创建的。 React 集成了许多令人兴奋的组件、库和框架 [1]。 当然，开发人员也可以自己开发组件。 图片在最佳实践之前，我建议在开发 React 应用程序时使用测试驱动开发（TDD）[2]。 测试驱动开发意味着首先编写一个测试，然后根据测试开发你的代码，这样更容易识别出错误。 本文翻译自 Medium：https://towardsdatascience.com/react-best-practices-804def6d5215#c966...
44 天前 / 苏溪云
自上一篇写关于 diff 的文章到现在已经过了二十天多，利用业余时间和 10 天婚假的闲暇，终于搞懂了 React 源码中的调度原理。当费劲一番周折终于调试到将更新与调度任务连接在一起的核心逻辑那一刻，忧愁的嘴角终于露出欣慰的微笑。 最早之前，React 还没有用 fiber 重写，那个时候对 React 调度模块就有好奇。而现在的调度模块对于之前没研究过它的我来说更是带有一层神秘的色彩，色彩中朦胧浮现出两个字：“困难”。
47 天前 / 冷星1024
导语 本文通过 React 语法从 v15 自动升级为 v16 的方案，阐述了 AST 的概念及其在前端项目中的应用与探索，介绍了若干适合 AST 技术在前端落地的场景。 背景 通常一个中后台系统至少有三到五年的生命周期。 在立项之初一般会采用一些成熟稳健的技术，然而随着时间的流逝，原有技术栈必将逐渐变得老旧、难以维护：比如 vue1.x 升级至 2.x、swift 的历次升级。 那么我们应当如何处理这些老旧的代码，是另起炉灶推倒重来，亦或是硬着头皮在原来的基础上继续打补丁？ 对于上述问题，本文主要介绍一种基于修改抽象语法树（Abstract Syntax Tree...
48 天前 / teobler
自从三大框架成型之后，各个框架都为提升开发者的开发效率作出了不少努力，但是看起来技术革新都到了一个瓶颈。除了 React 引入了一次函数式的思想，感觉已经没有当初从 DOM 时代到数据驱动时代的惊艳感了。于是 React 将精力放在了用户体验上，想让开发者在不过多耗费精力的情况下，用框架自身去提升用户体验。 于是在最近的几个版本中，React 引入了一个叫做 Concurrent Mode 的东西，同时还引入了 Suspense，旨在提升用户的访问体验，React 应用在慢慢变大以后会慢慢变得越来越卡，这次的新功能就是想在应用初期就解决这些问题。
48 天前 / clumsy
编者按：本文作者奇舞团前端开发工程师苏畅。 代码参照 React 16.13.1 和其他 React 教程有何不同？假设 React 是你日常开发的框架，在日复一日的开发中，你萌生了学习 React 源码的念头，在网上一顿搜索后，你发现这些教程可以分为 2 类： -《xx 行代码带你实现迷你 React》，《xx 行代码实现 React hook》这样短小精干的文章。如果你只是想花一点点时间了解下 React 的工作原理，我向你推荐 这篇文章 1，非常精彩。 -《React Fiber 原理》，《React expirationTime 原理》这样摘录 React 源码讲解的文章。
57 天前 / Dunizb
React.js 和 Vue.js 都是很好的框架，而 Next.js 和 Nuxt.js 甚至将它们带入了一个新的高度，这有助于我们以更少的配置和更好的可维护性来创建应用程序。但是，如果你必须经常在框架之间切换，在深入探讨另一个框架之后，你可能会轻易忘记另一个框架中的语法。在本文中，我总结了这些框架的基本语法和方案，然后并排列出。我希望这可以帮助我们尽快掌握语法。 上一篇我们已经介绍了：React.js 和 Vue.js 的语法并列比较 目录 Assets Next.js Nuxt.js 基本路由 动态路由 Link Fetch-On-Server Next.js Nuxt.js Layout Next.js Nuxt.js 错误页面 Next.js Nu...
71 天前 / 冷星1024
防抖是前端业务常用的工具，也是前端面试的高频问题。平时面试候选人，手写防抖人人都会，但是稍做修改就有小伙伴进坑送命。本文介绍了如何在 react hooks 中实现防抖。 背景 — 防抖（debounce）是前端经常用到的工具函数，也是我在面试中必问的一个问题。团队内部推广 React Hooks 以后，我在面试中也加入了相关的题目。如何实现 useDebounce。这个看起来很基础的问题，实际操作起来却让很多小伙伴漏出马脚。
87 天前 / pingan8787
Vue 和 React 中的 key 的作用 key 是给每一个 vnode 的唯一 id,依靠 key,我们的 diff 操作可以更准确、更快速。对于简单列表页渲染来说 diff 节点也更快，但会产生一些隐藏的副作用，比如可能不会产生过渡效果，或者在某些节点有绑定数据（表单）状态，会出现状态错位。) diff 算法的过程中，先会进行新旧节点的首尾交叉对比，当无法匹配的时候会用新节点的 key 与旧节点进行比对，从而找到相应旧节点。 你以为这样回答，面试官就能放过你。Too young,To simple。
92 天前 / Dunizb
ReactJS应用程序中的动画是一个流行的话题，有很多方法可以创建不同类型的动画。许多开发人员只使用CSS和向HTML标记添加类来创建动画。这是一个好方法，您应该使用它，如果要创建复杂的动画，可以关注GreenSock，GreenSock是最强大的动画平台。还有很多库用于在React中创建动画的组件。 让我们来看看他们 CSS方法React-transition-group ——它是用于简单实现基本CSS动画和过渡的附加组件。react-animations — react-animations实现了animate.css中的所有动画。简单易用！React Reveal — 这是React的动画框架。
99 天前 / 噶牛爱尚
首发于众安前端写文章对不起，我们来晚了 —— 基于 React 的组件库 Zarm 2.0 发布 Wukong 万物互联 16 人赞同了该文章是的，大家可能很疑惑：“都 2020 年了，怎么现在还发布组件库呢？”... 确实，对于前端组件库的大家庭来说，我们迟到了，但也请各位可以抽出几分钟看看一位初来乍到的新人的自我介绍： Zarm 是什么 Zarm 是众安科技基于 React、React-Native 研发的一款适用于企业级的移动端 UI 组件库。( 官网|github|演示地址推荐在手机上浏览) Zarm 的取名，灵感来源于众安保险秉承的理念：做有温度的保险。