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