React、useEffect清理不适用于removeEventListener、useRef、视差效果
React是一个用于构建用户界面的JavaScript库。它采用组件化的开发模式，使得开发者可以将界面拆分成独立的、可复用的组件，从而提高代码的可维护性和可重用性。
useEffect是React提供的一个Hook，用于处理副作用操作。副作用操作包括但不限于订阅事件、数据获取、手动修改DOM等。useEffect接受一个回调函数作为参数，在组件渲染完成后执行该回调函数。同时，useEffect还可以返回一个清理函数，用于在组件卸载前执行一些清理操作。
然而，useEffect清理不适用于removeEventListener。这是因为在React中，组件的卸载并不意味着事件监听器的自动移除。如果在useEffect中添加了事件监听器，而没有在清理函数中手动移除该监听器，那么在组件卸载后，监听器仍然存在，可能导致内存泄漏或其他问题。
为了解决这个问题，可以使用useRef来保存事件监听器的引用，并在清理函数中手动移除监听器。useRef是React提供的另一个Hook，用于在函数组件中保存可变值。通过将事件监听器保存在useRef返回的引用中，可以确保在组件卸载时正确地移除监听器。
视差效果是一种常见的用户界面设计技术，通过在不同的层次上以不同的速度移动元素，营造出一种立体感和动态效果。在React中实现视差效果可以使用CSS属性transform和transition，或者借助第三方库如react-parallax等。
总结：
- React是一个用于构建用户界面的JavaScript库，采用组件化开发模式。
- useEffect是React提供的一个Hook，用于处理副作用操作，但不适用于removeEventListener。
- useRef是React提供的另一个Hook，用于在函数组件中保存可变值，可以用于保存事件监听器的引用。
- 视差效果是一种常见的用户界面设计技术，可以通过CSS属性或第三方库实现。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云产品：https://cloud.tencent.com/product
- React相关产品：腾讯云并没有专门针对React的产品，但可以使用腾讯云提供的云服务器、云数据库等基础服务来支持React应用的部署和运行。
- useEffect清理不适用于removeEventListener：腾讯云并没有特定的产品或文档与此问题相关。
- useRef：腾讯云并没有特定的产品或文档与此问题相关。
- 视差效果：腾讯云并没有特定的产品或文档与此问题相关。
相关·内容
如何使用useEffect钩子(或任何其他钩子)复制componentWillUnmount
在传统的类组件中，我会这样做：
class Effect extends React.PureComponent {
componentDidMount() { console.log("MOUNT", this.props); }
componentWillUnmount() { console.log("UNMOUNT", this.props); }
render() { return null; }
}
使用useEffect钩子：
fu
浏览 8提问于2019-03-13得票数 102
回答已采纳
这是一个关于如何在React中最好地产生视差效果的一般性问题！
我想根据滚动位置直接更新元素的位置。目标是让元素看起来是固定的。我尝试了一些不同的方法，但在Mac上的Safari，有时是Chrome，以及一些设备上，总是遇到断断续续/闪烁的问题。
我已经尝试过修复body和root div scroll (为了消除一些浏览器的弹性效果)，但是同样的问题。我也尝试过将translateZ(0)添加到活动3d渲染中，但也出现了同样的问题。
这是由React更新组件的频率方面的一些机制造成的，还是浏览器的问题？
有没有更好的方法来创造这种效果？
import React, { useState, u
浏览 11提问于2019-08-04得票数 5
1回答
目前我正在尝试实现的是，当用户向下滚动创建视差效果时，1张图像从左向右移动： ? 通常，对于DOM，我会使用： let image = document.getElementById("image");
window.addEventListener('scroll', function() {
let value = window.scrollY;
image.style.marginRight = value * 4 + 'px';
image.style.marginTop = value * 1.5 + '
浏览 12提问于2021-08-23得票数 1
回答已采纳
每次更改UserComponent布尔值时，我都要添加或删除事件侦听器。我使用一个useEffect来监视props.isUserSelected值的变化。这是我想要的结果。
import React, { useState, useEffect } from "react";
const UserComponent = (props) => {
const [wrapperEle] = useState(React.createRef());
useEffect(() => {
if (props.isUserSelected === true
浏览 0提问于2020-04-27得票数 0
回答已采纳
我有一个关于React功能组件的问题，特别是关于功能组件中的函数。例如：
import React, { useEffect } from 'react';
const Component = (props) => {
useEffect(() => {
window.addEventListener('scroll', handleScroll);
});
useEffect(() => {
return () => {
window.removeEventListener('scr
浏览 5提问于2019-11-13得票数 9
回答已采纳
我正在尝试通过使用useRef()来抓取bubblesRef和translateY() onScroll来对.svg图像应用视差效果。
视差起作用了，但当我导航到下一页时，我收到错误"TypeError: Cannot read property 'style' of null“。我认为这是因为在导航到下一个页面时，addEventListener仍在监听并尝试在bubblesRef上执行useRef()操作。所以我在useEffect()中添加了清理功能，但这似乎不能修复它。
任何帮助都是非常感谢的。谢谢!
附注：如果任何人能分享他们的方法，一个简单的视差效果，像这样
浏览 41提问于2021-02-15得票数 0
回答已采纳
1回答
我有下面的代码，用于设置滚动事件到窗口和容器，但我认为在react组件中使用文档是不好的。
const closeMenu = () => {
setIsActionListVisible(false);
};
useEffect(() => {
window.addEventListener("scroll", closeMenu);
const layout = document.getElementsByClassName("common-home-layout");
浏览 1提问于2022-10-16得票数 0
回答已采纳
所以我有这个方法：
useEffect(() => {
//.. other logic here
// Firefox doesn't support looping video, so we emulate it this way
video.addEventListener(
"ended",
function() {
video.play();
},
false
);
}, [videoWidth, videoHeight]);
现在它抛出了一个错误，它说
浏览 413提问于2019-07-18得票数 7
回答已采纳
2回答
我想要构建一个钩子来改变mousemove和mousedown事件上元素的宽度。
我使用以下代码(实际上正在工作)：
import React, { useState, useCallback, useEffect, useRef } from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";
const useMouseDelta = (initialWidth) => {
const [dragging, setDr
浏览 3提问于2021-07-15得票数 2
回答已采纳
我正试着在空格键上翻张卡片。它只翻转一次，但不会倒转。我正在通过一个真实的，假的useState和JS按键事件处理程序翻转卡片。下面我有一个示例，它在我的原始代码中没有使用所有其他术语的情况下重新创建相同的问题。当我按下预期的空格后，它将从false改为"true“。然而，它不会掉头。
我应该换个方式吗？你会怎么做？
import React from "react";
import { useEffect, useState } from "react";
export const Test = () => {
浏览 4提问于2022-04-16得票数 1
回答已采纳
如果我rightClick红色DivElement，我想改变我的状态
因为州变了，所以我想我可以看到console.log
但不起作用
这是我的密码
import { useState, useRef, useEffect } from "react";
function Main() {
const [testState, setTestState] = useState(0);
const testRef = useRef(null);
function clickHandler(event) {
setTestState(testState +
浏览 5提问于2021-10-18得票数 0
回答已采纳
我正在使用一个非常严格的TS和ESLint版本。
我从这里的文档中撕开了这个门户：
我将代码修改如下：
import React, { useEffect, useRef, ReactNode } from 'react'
import { createPortal } from 'react-dom'
interface Props {
children?: ReactNode
portalId: string
}
export const Portal: React.FC<Props> = ({ children, portalId
浏览 8提问于2022-09-22得票数 2
回答已采纳
1回答
清除ref中的自定义事件
、、、
我有一个自定义元素，它在react中分派一个自定义事件。由于没有简单地绑定事件的方法，我需要手动创建一个eventListener并删除它。
我试过：
export function App() {
const textRef = useRef<DemoTextElement>(null);
let eventRef;
const logEvent = (e) => {
console.log(e)
}
useEffect(() => {
if(textRef.current) {
eventRef = textRef.c
浏览 4提问于2021-11-05得票数 0
我正在用react和功能组件构建一个简单的下拉列表。关于奇怪的行为，我遇到的就是我们思考魔法和状态的方式。这是我的组件的简化版本：
export default function App() {
const [show, setShow] = useState(false);
const selectElement = useRef(null);
const handleToggle = (e) => {
if (selectElement) {
if (!selectElement.current.contains(e.target)) {
浏览 2提问于2020-12-16得票数 1
4回答
我试图使用react来确定用户是否在元素外部单击过。我使用useRef获取元素的引用。
有人能看到怎么解决这个问题吗。我得到以下错误并遵循。
属性“RefObject”中不存在
上面的错误似乎是打字本的问题。
有一个带有不同错误的。
在这两种情况下，它都不起作用。
import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
const Menu = () => {
const wrapperRef = useRe
浏览 1提问于2019-01-27得票数 14
回答已采纳
我正在尝试创建一个简单的“包装器”，使HTML元素“可拖动”。
我遇到的问题是，在事件处理程序mouseMove中，"useState“变量draggable始终为false。除了dragging没有正确设置为true之外，事件处理程序mouseDown和mouseUp似乎工作得很好。
我做错了什么？每一个建议或提示都非常感谢！
PS：console.log('Dragging is set to true')和console.log('Dragging is set to false')工作得很好！据了解，所有的事件都是正确的“触发”。只是在mouse
浏览 1提问于2021-12-02得票数 0
3回答
我有一个注册效果钩子的函数，但是它失败了，因为在效果内部，我需要一个在运行时还没有定义的对象。通过调试，我注意到对象(在本例中是publicTypeIndex)是在异步回调执行后填充的。
这是我的代码：
export function useNotesList() {
const publicTypeIndex: any = usePublicTypeIndex();
const [notesList, setNotesList] = React.useState<TripleDocument>();
React.useEffect(() => {
浏览 5提问于2020-05-13得票数 1
4回答
构建自定义下拉列表React，在单击外部时遇到一个问题。
因此，我创建了通用自组织，这样我也可以将它用于其他方面。
我似乎遇到的问题是，我不知道如何将ref从自组织传递到组件。
我一直在研究和其他一些例子，但我无法理解。
你知道这是否可能吗?我怎么做的？
import React, { useState, useRef, useEffect } from "react";
export default function withClickOutside(WrappedComponent) {
const Component = (props) => {
c
浏览 3提问于2020-08-11得票数 10
回答已采纳
当页面初始滚动不在加载时的顶部时，我正在努力解决滚动视差问题。我正在使用react-scroll-parallax库()。为了解决我的问题，我试着在这里使用他们的建议，。
import { useEffect } from 'react';
import { useController } from 'react-scroll-parallax';
const ParallaxCache = () => {
const { parallaxController } = useController();
useEffect(() => {
浏览 0提问于2019-12-23得票数 0
如果按右键或左键，下面的组件将设置状态。因为每个按下键都执行两个set状态，因此会导致一些性能问题。如何在不设置状态的情况下或只设置一个设置状态的情况下更改按下键？
import { useState, useEffect } from "react";
export function useKeyPress(targetKey) {
const [keyPressed, setKeyPressed] = useState(false)
function downHandler({ key }) {
if (key === targetKey) {
浏览 1提问于2021-03-01得票数 0
回答已采纳
我有一个自定义的select组件。我想添加键盘导航(用箭头键导航选项，用“enter”选择一个)。通常，这些事件侦听器被附加到窗口。但是如果我在同一页上有两个select怎么办？按向下箭头将在两个组件中触发操作。 您将如何修改此代码以确保其保持在每个Select的范围内？ React.useEffect(() => {
window.addEventListener('keydown', handleKeyDown);
// do stuff
});
return () => {
window.rem
浏览 29提问于2020-10-25得票数 0
我想从scratch.Here is代码构建无限滚动：
import React,{useEffect, useRef, useState} from 'react';
const Container:React.FC<{}> = () => {
const containerRef = useRef<HTMLDivElement | null>(null)
const [ scrollNumber, setScrollNumber ] = useState<number>(1);
const [posts, setPos
浏览 2提问于2020-12-10得票数 0
回答已采纳
有没有人设法通过React useRef()和useEffect()钩子在ReactJS中使用在StencilJS中创建的自定义事件？ 我已经看过关于这一点的StencilJS文档，它们只涉及数组和自定义对象。 我是前端开发的新手，所以任何帮助都是朝着正确方向迈出的一步。 提前谢谢。
浏览 28提问于2020-04-22得票数 2
回答已采纳
我正在制作一个像素绘图应用程序。
我有一个画布组件，它处理绘图逻辑，其中包含以下useEffect：
...
useEffect(() => {
// Pass reference of the canvas element to the parent component
setCanvasRef(canvasRef.current);
// Mouse util -> add listeners and offset the coordinates relative to the drawing canvas element
浏览 10提问于2022-11-11得票数 1
回答已采纳
import React, { useState, useRef, useEffect } from 'react';
import throttle from 'lodash/throttle';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
export default function PDFWrapper({ data, onD
浏览 1提问于2020-09-08得票数 1
回答已采纳
使用React的新效果钩子，我可以告诉React跳过应用某个效果，如果某些值在applying的文档中的重呈现示例中没有改变：
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes
但是上面的例子适用于初始呈现时的效果，以及count已更改的后续重新呈现时的效果。如何判断反应跳过最初渲染的效果？
浏览 3提问于2018-11-06得票数 180
回答已采纳
我是一个学习反应的学生。我现在做的部件出了问题。我试图做的是一个滚动类型的选择器，类似于下面的链接。
在实现过程中，在eventListener中注册和删除eventListener存在一个问题。
import { useState, useRef, useEffect } from "react";
function Scroller() {
const array = [170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180];
const [dragEventHistory, setDragEventHist
浏览 4提问于2022-09-13得票数 0
回答已采纳
5回答
首先，对于类组件，这很好，不会引起任何问题。
但是，在带有钩子的functional中，每当我试图从滚动事件侦听器的函数handleScroll中设置状态时，我的状态就无法得到更新，或者应用程序的性能会受到很大的影响，即使我使用的是退欧。
import React, { useState, useEffect } from "react";
import debounce from "debounce";
let prevScrollY = 0;
const App = () => {
const [goingUp, setGoingUp] = u
浏览 0提问于2019-07-18得票数 24
回答已采纳
9回答
我正在学习关于如何用钩子注册事件的Udemy课程，讲师给出了以下代码：
const [userText, setUserText] = useState('');
const handleUserKeyPress = event => {
const { key, keyCode } = event;
if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
setUserText(`${userText}${key}`);
}
};
浏览 0提问于2019-04-08得票数 136
回答已采纳
我有一个下拉菜单在我的react js中，我想要的是当我点击任何列表项时，我想让它关闭，或者即使我点击它以外的任何地方，下拉菜单也应该自动关闭(然后在点击ofcoss时再次打开)。
下面是我的代码
import React from "react";
import { useState, useEffect } from "react";
const TripTypeDropdown = (props) => {
const [values, setValues] = useState([
{ tripType: "One Way&#
浏览 2提问于2021-06-18得票数 0
1回答
我正在使用。我需要检测用户何时单击组件外部。这是只在网络上加载，所以它不必在本机上工作。
我一直试图使用这个钩子的一个版本：
在我的部分：
useOnClickOutside(ref, () => setIsOpen(false));
在钩子里：
function useOnClickOutside(ref, handler) {
React.useEffect(
() => {
const listener = event => {
// Do nothing if clicking ref's element or desc
浏览 3提问于2020-06-11得票数 2
回答已采纳
我正在尝试使用useNavigation()钩子与react导航进行交互，以响应我在useEffect()中注册的回调。临时器警告我，useEffect()缺少依赖项。如果我添加导航钩子作为依赖项，效果将继续运行。我试图避免这种情况，并且想知道除了忽略linter错误之外，是否还有其他正确的方法。
如果不提供依赖数组，则会导致相同的行为，即效果会持续激发。
这可能是react-navigation-hooks包中的useNavigation()钩子如何工作的潜在问题。
function MyComponent() {
const navigation = useNavigation()
浏览 43提问于2019-05-22得票数 3
回答已采纳
1回答
我想向React组件中的一个节点添加一个eventListener。我选择了带有useRef钩子的节点。我是useCallback，因为useRef在第一次渲染时是null。 const offeringsContainer = useRef(null);
const setOfferingsContainer = useCallback((node) => {
if (node !== null) {
offeringsContainer.current = node;
}
}, []); 我的问题是，我的useEffect对offeringContainer引用所
浏览 65提问于2020-11-28得票数 0
回答已采纳
2回答
我试着把我的任务从react.component变成钩子，但我遇到了一些麻烦。我真的不明白如何使用我的状态offsetTop。值是设定的，或者不是在我需要的时候。
第一次尝试：
const [offsetTop, setOffsetTop] = useState();
useEffect(() => {
setOffsetTop(window.pageYOffset + document.querySelector(".projectsContainer").getBoundingClientRect().top)
console.log(offsetT
浏览 4提问于2021-04-24得票数 1
回答已采纳
这是第一次，当我使用反应钩。我试图禁用获取，使用状态(布尔值)。但是有一个问题，因为一个函数仍然看到初始状态，并执行函数十次而不是一次。我看不出重点。在react控制台中，状态标记为true，并且仍然传递我的if语句。
我注意到了，没有听者在窗口，它是有效的。因此，我尝试使用React中的事件构建-- onScroll，但这并不能解决我的问题--什么都没有发生。我的反应: 16.8.6
const [isFetchedData, setIsFetchedData] = useState(false);
const fetchBookData = async () => {
aw
浏览 1提问于2019-04-14得票数 0
我在无状态组件中使用react钩子。下面是源代码：
const MyComp = ({focused}) => {
...
const keyPressListener = (e: KeyboardEvent) => {
console.log('key press:', e);
};
useEffect(() => {
if (focused) {
console.log('add event listener');
window.addEventListener('keydown'
浏览 0提问于2019-06-04得票数 0
回答已采纳
目前，我正在制作一个仅在向上滚动时才显示的导航条，为了防止useEffect每次在可见状态发生更改时运行，我必须同时使用ref和同步的状态在useEffect中进行比较，使用ref和状态来跟踪相同的值似乎非常可疑，还有其他方法吗？一个不涉及在每次状态变化时从创建事件处理程序中触发useEffect？
import React, { useState, useRef, useEffect } from 'react';
import Link from 'next/link';
const NavbarLink = ({ name, href }: { name
浏览 6提问于2022-02-19得票数 1
2回答
我有一个功能组件
import React, { useState } from 'react'
export default function AboutUs() {
const [counter,setCounter] = useState(0);
const clicked = () => {
setCounter(counter+1);
}
return (
<div>
<p>you clicked {counter} times</p>
<button onClick
浏览 1提问于2021-07-28得票数 1
回答已采纳
在我看来，如果在useEffect内部使用一个函数，则整个堆栈必须包装在useCallback中才能符合linter的要求。
例如：
const Foo = ({} => {
const someRef = useRef(0);
useEffect(() => {
startProcessWithRef();
}, [startProcessWithRef]);
const handleProcessWithRef = useCallback((event) => {
someRef.current = event.clientY;
}
浏览 3提问于2022-01-26得票数 1
回答已采纳
我正在NextJS项目中实现一个富文本编辑器。它没有React组件，而且它只在客户端运行，所以我必须从外部源加载JavaScript和CSS文件并解决SSR问题。请不要推荐使用其他工具，因为这不是一个选项。
该工具作为一个类组件工作得很好，但我想将它移植到一个功能组件中。但是一旦我刷新了页面，我就失去了编辑器。我认为这是因为组件没有挂载，但现在我检查了一下，但问题仍然存在。
我尝试了各种方法，包括禁用了SSR的Next动态导入，但到目前为止只有下面的类方法有效(编辑器通过绑定到<textarea>元素来工作)：
import React from "react";
浏览 0提问于2020-09-06得票数 0
我的onScroll事件不是在react中触发的。
我正在尝试设置无限滚动以响应js，但我的onScroll事件并没有被触发。
它从api中获取帖子并将其发送到Post组件。我正在将文章呈现在邮政组件中。
Feed.js
import { Box } from "@mui/material";
import Post from "./Post";
import About from "./About";
import { useEffect, useState } from "react";
import { getInfinit
浏览 6提问于2022-09-21得票数 0
回答已采纳
我有一个useEffect钩子，它应该在组件出现时订阅地理位置更新，然后在组件消失时取消订阅。因此，我将[]作为效果依赖项传递，因为我只希望它在挂载/卸载上运行。
import { useWatchPosition } from "@ionic/react-hooks/geolocation"
import React, { useEffect } from "react"
function SiteMap() {
const { currentPosition, startWatch, clearWatch } = useWatchPosition()
浏览 1提问于2020-01-09得票数 2
回答已采纳
我想在react中将代码从类迁移到函数 我试着理解这两个react钩子之间的区别。 export const useEffectExceptOnMount = (effect: () => void, dependencies: Array<any>) => {
const mounted = useRef(false)
useEffect(() => {
if (mounted.current) {
effect()
return
} else {
mounted.current = true
浏览 65提问于2020-10-05得票数 2
我正在为useRef使用addEventListener，但不起作用，这里有什么问题吗？
父组件：
const parent = () => {
const el = useRef()
const element = el.current && el.current
useEffect(() => {
if (element) {
const scrollHandler = e => {
console.log(e);
};
element.addEventListener("
浏览 0提问于2020-12-26得票数 1
回答已采纳
1回答
在我的例子中，当我变换任何一个网格时，我试图让轨道控制锁定它们的位置。我当前的实现遵循这里的逻辑：https://drei.pmnd.rs/?path=/story/controls-transformcontrols--transform-controls-lock-st，它当前锁定正在移动的一个框的轨道控制，但不锁定另一个框的轨道控制。任何帮助都将不胜感激。 https://codesandbox.io/s/mixing-controls-forked-uzmy8?file=/src/App.js import { useRef, useEffect } from 'react&
浏览 54提问于2021-09-08得票数 0
我正在尝试从一个html <video/>标签中捕获事件。我已经为它设置了一个引用，并使用useEffect尝试捕获事件。但是，我认为我没有正确地处理ref，并且没有捕获任何事件。有人能发现我的错误吗？ const elementRef = useRef(null);
function handleEvent(event) {
console.log(`${event.type}\n`);
}
useEffect(() => {
return () => {
elementRef.addEventListener('
浏览 21提问于2020-12-23得票数 0
回答已采纳
2回答
学习反应在这里，我只是想显示一个乐天动画。看起来相当直截了当，但我的useEffect钩子有点问题。我使用钩子在页面加载时呈现动画，但它会不断重复(有时会重复两次或更多)。我知道这是因为useEffect会触发不止一次，但我不知道如何处理。我只想在页面上放一个动画。我怎样才能做到这一点？
import React, { useEffect, useRef } from "react";
import "./index.scss";
import lottie from "lottie-web";
const Hero = () => {
浏览 8提问于2022-04-27得票数 1
回答已采纳
3回答
响应导航焦点事件侦听器返回旧状态
、、、、
旧值将在焦点事件侦听器中返回。
如何在事件侦听器中获取当前状态/值，因为它当前正在返回旧值
const [organizationName, setOrganizationName] = React.useState('');
React.useEffect(() => {
const unsubscribeNavigationFocus = props.navigation.addListener(
'focus',
async () => {
try {
浏览 6提问于2021-01-23得票数 1
回答已采纳
当您按下键：()时，此组件总是警告0。
const Hello = () => {
const [counter, setCounter] = React.useState(0)
let canvas = React.useRef()
let add = () => {
setCounter(counter + 3)
alert(counter)
}
React.useEffect(() => {
window.onkeydown = add
}, [])
return <div><h1>{count
浏览 3提问于2020-07-29得票数 1
回答已采纳
1回答
在页面呈现之后，我遇到了从服务器加载SVG的情况，之后，我需要将某些事件添加到它的元素中。假设在点击一个rect之后，它会显示一个警告。 import React, { useEffect, useState } from 'react';
import css from "./room-plan.module.css";
import { Button } from "../../components";
export default function RoomPlan({ svg }) {
useEffect(() =>
浏览 13提问于2021-02-03得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
