大家好,我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder。
原文链接:https://bobbyhadz.com/blog/react-update-state-when-props-change[1]
众所周知,JavaScript 中的闭包(Closures)一定是这种语言最可怕的特性之一,即使是无所不知的 ChatGPT 也是这样说的。另外它可能也是最隐蔽的语言特性之一,我们在编写 React 代码时经常会用到它,但是大多数时候我们甚至没有意识到这一点。但是,我们终究还是离不开它:如果我们想编写复杂且性能很好的 React 应用,就必须了解闭包。所以,今天我们一起来学习以下几点:
有时候,我们不希望 useEffect() 每次渲染都执行,这时可以使用它的第二个参数 deps,使用一个数组指定副作用函数的依赖项,只有依赖项发生变化,才会重新渲染。
文章中涉及到的知识都是渐进式的讲解开发,当然如果对之间内容不感兴趣(已经了解),也可以直接切入本文内容,每一个章节都和之前不会有很强的耦合。
上篇文章我们知道了什么是 hooks 的闭包陷阱,它的产生原因和解决方式,并通过一个案例做了演示。
useRef 是常用的 API,但还有一个 createRef 的 API,你知道他们的区别吗?通过 React.useRef and React.createRef: The Difference 这篇文章,你可以了解到何时该使用它们。
原文链接:https://bobbyhadz.com/blog/react-ref-returns-undefined-or-null[1]
IntersectionObserver 可以轻松判断元素是否可见,在之前的 精读《用 React 做按需渲染》 中介绍了原生 API 的方法,这次刚好看到其 React 封装版本 react-intersection-observer,让我们看一看 React 封装思路。
原文链接:https://bobbyhadz.com/blog/react-cannot-assign-to-current-because-read-only-property[1]
在 React 中,ref 是一种用于访问组件或 DOM 元素的引用的特殊属性。在组件中存储对 DOM 节点或组件实例的引用,直接访问和操作
原文链接:https://bobbyhadz.com/blog/react-get-element-width-ref[1]
本文是 React Hooks 深入系列的后续。此篇详细介绍了 Hooks 相对 class 的优势所在, 并介绍了相关 api 的设计思想, 同时对 Hooks 如何对齐 class 的生命周期钩子作了阐述。
之前如果我们需要抽离一些重复的逻辑,就会选择 HOC 或者 render props 的方式。但是通过这样的方式去实现组件,你打开 React DevTools 就会发现组件被各种其他组件包裹在里面。这种方式首先提高了 debug 的难度,并且也很难实现共享状态。
对于新手来说,没写过几次死循环的代码都不好意思说自己用过 React Hooks。本文将以useCallback为切入点,谈谈几个 hook 的使用场景,以及性能优化的一些思考。
在React 函数式组件(FC)中,我们使用 useRef hook 来声明 ref 数据,可能你对 ref 特性或者 useRef hook 并不熟悉,这里有一篇文章深入浅出地介绍了 useRef 及其应用场景 。
温馨提示:因微信中外链都无法点击,请通过文末的 “阅读原文” 到技术博客中完整查阅版;
而且还可以使用 useImperativeHandle 自定义传给父元素的 ref:
上一篇文章,我们分析并设计了关于构建引擎BuildEngine的切面设计。本文我们将基于BuildEngine所提供的切面处理能力,在CustomCreateElementHandle中通过一些逻辑,来完成一个轻量级的设计器画布。
我们经常通过自定义 hook 的方式抽离组件的逻辑,而这种自定义 hook 里很多都是给元素绑定事件的。
useEffect 是常用的 hook,它支持两个参数,第一个参数是回调函数,第二个参数是依赖。
Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。
最近看了一些 Ant Design 的组件源码,学到一些很实用的技巧,这篇文章来分享一下。
闭包陷阱产生的原因就是 useEffect 等 hook 里用到了某个 state,但是没有加到 deps 数组里,这样导致 state 变了却没有执行新传入的函数,依然引用的之前的 state。
原文: https://epicreact.dev/the-latest-ref-pattern-in-react/
第二个参数接收一个数组,用来表示需要追踪的变量,依赖列表,只有依赖更新的时候才会更新内容
一直以来使用useRef的场景比较常见和基础,大多是为了操作已经mount的dom节点,例如设置焦点之类的,如官方例子所示:
用户只是简单的说了几句,大家都表示不可思议,都表示这不可能。最后屏幕共享的时候,果然如此,简直让人怀疑人生。一用鼠标选中了文本,页面就弹出不能复制,大概是这样的表现:
随着七八月的到来,大小厂们都开始了秋招提前批,在这个背景下,写出一份优秀的简历无疑是面试邀请的敲门砖。
当我们在 React 中实现下拉菜单或抽屉组件时,这些组件通常需要在单击菜单按钮或组件外部时关闭。
上一小节我们处理了 setState 的批量更新机制,但是我们有两个遗漏点,一个是源码中的 setState 可以传入函数,同时 setState 可以传入第二参数作为回调函数。我们先把上一节的工作收个尾再介绍 ref 的实现。
本文是深入浅出 ahooks 源码系列文章的第五篇,这个系列的目标主要有以下几点:
文章会为你讲述 React 9种 Hook 的日常用法以及进阶操作,从浅入深彻底掌握 React Hook!
事件对象可以拿到 pageY、clientY、offsetY,分别代表到点击的位置到文档顶部,到可视区域顶部,到触发事件的元素顶部的距离。
react函数组件为了保持引用不变,很多时候需要借助useCallback,但是useCallback强依赖于外部变量,必须传个依赖变量,万一漏传了很容易出问题。比较函数复杂时较麻烦,使用这个即可完美解决,引用不变,调用肯定是最新的,并且不需依赖
如果你在使用 React 16,可以尝试 Function Component 风格,享受更大的灵活性。但在尝试之前,最好先阅读本文,对 Function Component 的思维模式有一个初步认识,防止因思维模式不同步造成的困扰。
React Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
在上一篇git 原理中我们在「前置知识点」中随口提到了Hook。其中,就有我们比较熟悉的React Hook。
原文链接:https://bobbyhadz.com/blog/react-check-if-element-in-viewport[1]
React新文档有个很有意思的细节:useRef、useEffect这两个API的介绍,在文档中所在的章节叫Escape Hatches(逃生舱)。
作用: ① 循环effect链,针对不同的fiber类型,进行effect.destroy()/create()/componentDidMount()/callback/node.focus()等操作 ② 指定 ref 的引用
本文是深入浅出 ahooks 源码系列文章的第十三篇,这个系列的目标主要有以下几点:
在类组件中,可以使用 React.createRef() 方法来创建 ref 对象。通常,在组件的构造函数中将 ref 赋值给类的实例属性。
原文链接:https://bobbyhadz.com/blog/react-check-if-checkbox-is-checked[1]
本文是深入浅出 ahooks 源码系列文章的第十二篇,这个系列的目标主要有以下几点:
大家好,我是前端西瓜哥。这次我们来看看虚拟列表是什么玩意,并用 React 来实现两种虚拟列表组件。
本文是深入浅出 ahooks 源码系列文章的第三篇,这个系列的目标主要有以下几点:
前段时间学习了 React 新发布的 Hook 新功能,学完立马就爱上了这个新 API,用起来感觉比 class 组件爽多了。但 hook 虽然看似简单,但是要能熟练运用还是得花上一段时间。
ref 对象就是用 createRef 或者 useRef 创建出来的对象,一个标准的 ref 对象应该是如下的样子:
领取专属 10元无门槛券
手把手带您无忧上云