使用 React 状态管理控制组件可见性React 中的状态是指组件私有的数据,它决定了组件在呈现时的外观和行为。当状态更改时,组件会重新呈现,以反映这些变化。...全局状态(也称为应用程序状态)则是整个应用程序中的状态,可以从不同的组件访问和修改。在本文中,我们将关注本地状态。在 React 中,使用 useState 钩子可以创建本地状态。...useState 钩子返回一个数组,其中第一个元素是当前状态的值,第二个元素是更新该状态的函数。下面是一个示例,展示如何使用 useState 钩子创建一个用于控制组件可见性的状态。...我们还使用了 useEffect 钩子来添加和删除事件监听器。useEffect 钩子在组件挂载时注册事件监听器,并在卸载时删除它们,以避免内存泄漏。...我们还给出了两个示例:如何显示/隐藏菜单和如何显示/隐藏模态框。这些示例可以用作参考,帮助你在自己的 React 应用程序中实现点击显示或隐藏另一个组件的功能。
React Hooks 是 React 提供的一种功能,允许我们在函数组件中使用状态和其他 React 特性。使用 Hooks 可以简化函数组件中的状态管理和副作用处理。...如何关闭? 删除根页面中的StrictMode 严格模式 import App from "....# useRef 的主要用途 访问 DOM 元素:通过使用 useRef 创建一个引用,可以将其附加到 JSX 元素的 ref 属性上,从而获取对该 DOM 元素的引用。...# 举个栗子 下面是一个文字选中示例,使用了 useRef,展示了如何在函数组件中使用它: import React, { useRef } from "react"; const TextInput...注意 # useRef 虽好,请勿滥用 ref 和 useRef都是 React 提供的用于引用 DOM 元素或其他值的机制。
你可以在event对象上或者使用ref来访问元素。...这个例子向我们展示了如何在事件中,以编程方式来使用setAttribute()方法进行设置或者更新data属性。...el.removeAttribute('data-foo'); removeAttribute方法从元素中删除具有指定名称的属性。如果元素上不存在该属性,那么此方法直接返回而不抛出错误。...useRef()钩子可以传递一个初始值作为参数。该钩子返回一个可变ref对象,其.current属性被初始化为传递的参数。...请确保在useEffect钩子内部或者事件发生时访问ref 。因为如果尝试立即访问ref的话,它也许尚未建立,或者当前元素还不存在于DOM中。
本文是一篇以实战为主的文章,主要讲解实际项目中如何使用hooks以及一些最佳实践,不会一步步再介绍一遍react hooks的由来和基本使用,因为写hooks的文章很多,而且官网对于react hooks...其实仅仅优化这一点还远远不够的,比如说我们子组件用到了容器组件的某个变量或者函数,那么当容器内部的state更新之后,这些变量和函数都会重新赋值,这样就会导致即使子组件使用了memo包裹也还是会重新渲染...实现自定义的useScroll 自定义的useScroll也是高频出现的问题之一,我们往往会监听一个元素滚动位置的变化来决定展现那些内容,这个应用场景在H5游戏开发中应用十分广泛,接下来我们来看看实现代码...'scroll', handleScroll, false) } }, []) return pos } export default useScroll 由以上代码可知,我们在钩子函数里需要传入一个元素的引用...,这个我们可以在函数组件中采用ref和useRef来获取到,钩子返回了滚动的x,y值,即滚动的左位移和顶部位移,具体使用如下: import React, { useRef } from 'react'
确保代码没有bug的一种方法就是编写测试用例。测试React hooks与测试一般程序的方式没有太大区别。 在本教程中,我们将了解如何通过使用带有hooks的to-do应用程序来实现这一点。...如果你第一次使用Enzyme,我们之前发布过关于它的文章,《Enzyme如何在React应用中与Jest一起使用》。我们可以用他们来深入测试React Hooks。...我们使用getTestId来返回元素的与data-testid匹配的节点。在这个例子里是元素。然后,我们检查它总共有两个子元素(每个子元素是无序列表中的元素)。...因为我们只想删除一个项目,所以我们对集合中的第一个项目触发一个click事件,它应该删除第一个待办事项。这应该使待办事项子节点的长度等于1。 这些测试也可以在GitHub上找到。...加油写面向对象的React代码! React钩子和应用中的其他钩子一样容易出错,你要确保你能很好地使用它们。正如我们刚才看到的,有几种方法可以做到这一点。
在这篇文章中,你将学习如何使用React.useRef()钩子来创建持久的可变值(也称为references或refs),以及访问DOM元素。 我们将从下面几点讲解: 1....现在,让我们看看如何在实践中使用 useRef()。...访问 DOM 元素 useRef()钩子的另一个有用的应用是访问DOM元素。...当输入元素在DOM中创建完成后,useEffect(callback,[])钩子立即调用回调函数:因此回调函数是访问inputRef.current的正确位置。...引用也可以访问DOM元素。 element - 元素在reference.current中是可用的。
它返回一个带有以下函数的对象: push(element): 将指定的元素添加到数组中。 filter(callback): 根据提供的回调函数对数组进行筛选,删除不满足条件的元素。...使用useArray钩子,我们可以轻松地向数组中添加、更新、移除、筛选和清除元素,而无需处理复杂的逻辑。...只需调用此函数,它将从浏览器中删除指定的Cookie。该钩子会负责更新状态,确保我们的应用程序反映了Cookie的删除。 使用场景 useCookie可以在各种情境中使用。...然后,使用useRef钩子创建一个引用,以定位所需的元素。将引用作为useOnScreen钩子的第一个参数传递,我们还可以提供一个可选的rootMargin值来调整可见阈值。...修改此元素的高度,使页面可滚动,在滚动过程中,可查看待验证元素的可见性 待验证元素 {visible && "(Visible
~ 类型守卫 使用类型守卫来解决React中useRef钩子“Object is possibly null”的错误。...一旦null被排除在ref的类型之外,我们就能够访问ref上的属性。 useref-object-is-possibly-null.webp 下面是一个错误如何发生的示例。...当程序进入到if代码块中,TypeScript就会知道ref对象上的current属性就不会存储null。 确保在useRef钩子上使用泛型,正确的类型声明ref上的current属性。...如果你在ref中存储了不同的值,请确保将特定类型传递给useRef钩子的泛型,例如const ref = useRef(null); 。...设置为DOM元素,或在我们的代码中稍后设置其值。
react-cannot-assign-to-current-because-read-only.png 这里有个例子来展示错误是如何发生的。...钩子中时,并且我们传递给钩子的泛型中没有包括null类型,我们创建了一个不可变的ref对象。...[]); return ( hello world ); }; export default App; 在ref的类型中...现在这个例子中ref的类型是字符串或null,它的current属性可以赋值为这两种类型中的任意一种的值。 DOM元素 如果你的引用指向一个DOM元素,情况也是一样的。...div> ); }; export default App; 上述例子中的ref是用来聚焦input元素的。
为了解决该错误,使用useRef()钩子来得到一个可变的ref对象,这样你就可以在组件中作为ref使用。...useRef 为了解决该错误,使用useRef钩子来获取可变的ref对象。...当我们传递ref属性到元素上时,比如说, 。React将ref对象上的.current属性设置为相应的DOM节点。...例如,一个ref不需要包含在useEffect钩子的依赖数组中,因为改变它的current属性不会引起重新渲染。...> ); } 例子中的useEffect钩子只运行了2
~ 与document.querySelector等价 在React中,与document.querySelector() 方法等价的是使用refs。...为了选择一个元素,在元素上设置ref属性,并设置为调用useRef()钩子的返回值。并使用ref上的current属性访问dom元素,例如ref.current 。...需要注意的是,当使用ref来访问元素的时候,你不必在元素上设置id属性。 这里有一个在React中使用ref的极简示例。...举个例子,你可以在onClick事件处理函数中安全的访问ref上的current属性,那是因为当事件被触发时,该元素将出现在DOM中。...useEffect钩子是在组件中的DOM元素被渲染到DOM后运行的,所以如果提供了id属性的元素存在,那么将会被选中。
为了解决该问题,可以在useEffect钩子中访问ref,或者当事件触发时再访问ref。...我们使用useEffect钩子,是因为我们想要确保ref已经设置在元素上,并且元素已经渲染到DOM上。...事件 你也可以在事件处理函数中访问ref的current属性。... ); } 当用户点击按钮的时候,ref已经被设置好了,相应的元素已经被渲染到DOM中,所以我们能够访问它。...总结 可以在useEffect钩子中访问ref,或者当事件触发时再访问ref。也就是说,要确保元素已经渲染到DOM上。
~ 总览 在React中,检查元素是否在视口范围内: 在元素上设置ref属性。...使用IntersectionObserver API来跟踪元素是否与视口相交。...{ observer.disconnect(); }; }, [ref, observer]); return isIntersecting; } 该示例向我们展示了,如何检查元素是否在视口范围内...如果元素不在视口中,该钩子将会返回false。 需要注意的是,在初始渲染时,useIsInViewport 钩子将会返回false 。因为我们为useState传递的初始值为false。...const [isIntersecting, setIsIntersecting] = useState(false); 如果你想跟踪钩子的返回值的变化,请使用useEffect钩子,并将该值添加到钩子的依赖关系中
First 在 First 中,在任何布局变化发生之前,测量我们要做动画的元素的位置: 获取元素位置的一种方法是使用HTML元素的.getBoundingClientRect()方法: const Motion...(); }, []); return ; }; Last 在 Last 这一步中,我们测量布局变化后元素的位置: 为了在代码中实现这一点...所以我们先从useEffect钩子中删除依赖数组,使钩子每次渲染都能运行。 试着触发几次布局变化,检查控制台,看看显示的x和y值是什么。...尝试 我尝试的第一件事是,在父元素要做动画之前,先计算一次反比例,然后在子元素上单独运行一个动画。...在这种情况下,使比例校正工作的方式是通过将子元素包裹在中,并将比例校正应用于中,这会有一些问题: 一个运动组件在DOM中有两个元素,从用户体验的角度来看,这可能是个问题 所有子组件都进行了比例校正
这些功能可以在应用程序中的各个组件之间使用,从而易于共享逻辑。Hook 令人兴奋并迅速被采用,React 团队甚至想象它们最终将替换类组件。...以前在 React 中,共享逻辑的方法是通过高阶组件和 props 渲染。Hooks 提供了一种更简单方便的方法来重用代码并使组件可塑形更强。...定义后在使用 this.state 和 this.props 时可以在编辑器中获得更好的智能提示,并且会对类型进行检查。...当您将回调函数传递给子组件时,将使用此钩子。这将防止不必要的渲染,因为仅在值更改时才执行回调,从而可以优化组件。可以将这个挂钩视为与shouldComponentUpdate生命周期方法类似的概念。...它允许您在 React Dev Tools 中显示自定义钩子函数的标签。 示例 我之前基于 umi+react+typescript+ant-design 构建了一个简单的中后台通用模板。
React Hooks 在 React 中只是对 React Hook 的概念性的描述,在开发中我们用到的实际功能都应该叫做 React hook。...在上面代码中我们实现了在 useEffect 这个钩子适用情况中的第二种情况,那么如何使用该钩子才能实现类似于类组件中生命周期的功能呢?...componentDidUpdate:该生命周期在每次页面更新后都会被调用。那么按照之前的逻辑,就应该把所有的状态全部放在第二个状态中,但是这样的话新增/删除一个状态都需要改变第二参数。...从上面的表格中我们可以看出,在官方提供的 Hook 中,除了基本的 useState 与 useRef 外,其他钩子都存在第二个参数,第一个方法的执行与第二个参数相互关联。...于是我们可以得出一个结论,在使用了 Hook 的函数式组件中,我们在使用副作用/引用子组件时都需要时刻注意对代码进行性能上的优化。
在React中,获取元素的类名: 在元素上设置ref属性,或者使用事件处理函数。... ); } 上面的代码片段向我们展示了,当组件挂载或者事件被触发时,如何获取元素的类名。...ref useRef()钩子可以传递一个初始化作为参数。该钩子返回一个可变ref对象,其.current属性被初始化为传递的参数。...我们在div元素上设置onClick属性,所以每当元素被点击时,handleClick就会被调用。...,我们在event上使用了currentTarget属性,因为我们想访问事件监听器所连接的元素。
中,使用ref获取元素的宽度: 在元素上设置ref属性。...在useLayoutEffect钩子中,更新宽度的state变量。 使用offsetWidth属性获取元素宽度。...当我们为元素传递ref属性时,比如说, 。React将ref对象的.current属性设置为相应的DOM节点。...我们使用了useLayoutEffect钩子,因为我们需要等待元素上的ref被设置,并且在访问其offsetHeight和offsetWidth属性之前,元素被渲染。...,主要是在useLayoutEffect钩子中通过ref.current来引用DOM元素,获取元素上面的offsetWidth和offsetHeight 。
合成事件中是异步 钩子函数中的是异步 原生事件中是同步 setTimeout中是同步 2、useEffect(fn, []) 和 componentDidMount 有什么差异?...使用 Redux 或者 Mobx 等状态管理库 使用订阅发布模式 11. React 父组件如何调用子组件中的方法?...1、如果是在方法组件中调用子组件(>= react@16.8),可以使用useRef和useImperativeHandle: const { forwardRef, useRef, useImperativeHandle...()}>Click ); }; 2、如果是在类组件中调用子组件(>= react@16.4),可以使用createRef: const { Component...如果没有 $$typeof 这个属性,react 会拒绝处理该元素。 14. React 如何区分 Class组件 和 Function组件?
领取专属 10元无门槛券
手把手带您无忧上云