为什么useEffect不是构造函数？
useEffect是React中的一个Hook函数，用于处理副作用操作。它不是构造函数的原因是因为它是在组件渲染完成后执行的，而不是在组件实例化时执行的。
构造函数是在组件实例化过程中被调用的特殊函数，用于初始化组件的状态和绑定方法。它只会在组件初始化时执行一次，并且在整个组件生命周期中只执行一次。在构造函数中可以进行诸如初始化state、绑定方法等操作。
而useEffect是在组件渲染阶段执行的副作用操作的地方，它可以用来处理组件渲染后需要执行的异步操作、订阅事件、操作DOM等。useEffect的执行时机是在DOM渲染完成后，组件已经被添加到页面中，可以进行DOM操作的时候。由于useEffect是在每次组件渲染后都会执行的，因此可以根据需要设置多个useEffect。
使用useEffect的好处是能够将副作用操作与组件逻辑分离，提高代码的可读性和可维护性。它可以代替类组件中的生命周期方法，避免了类组件中处理副作用操作时的复杂性。
在React中，使用useEffect的语法如下：
useEffect(() => {
// 副作用操作代码
return () => {
// 清除操作代码（可选）
}
}, [dependencies]);其中，第一个参数是副作用操作的函数，第二个参数是一个可选的依赖数组。当依赖数组为空时，副作用操作会在每次组件渲染后都执行。当依赖数组不为空时，只有依赖项发生变化时，副作用操作才会重新执行。
推荐的腾讯云相关产品是腾讯云函数（SCF），它是一个无服务器云函数服务，可用于编写和运行与云原生应用程序无关的自定义代码。腾讯云函数可以与React中的useEffect结合使用，实现更加灵活和高效的副作用操作。
腾讯云函数产品介绍链接地址：https://cloud.tencent.com/product/scf
相关·内容
我搞不懂为什么当状态发生变化时，函数组件(非类组件不会与functional混淆)会被构造两次？
我的理解是，函数只构造一次，就像类的组件构造函数一样？
注意：未在严格模式下运行。
样本代码：
index.js:
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, // notice no strict mode
rootElement
);
示例1: LogStatement曾被称为“简单而明显的”：
function App1() {
console
浏览 3提问于2020-12-10得票数 0
回答已采纳
在下面的每一行代码中，我想在单击一个按钮后复制我的网站的网址。
案件1)
const [currentUrl, setCurrentUrl] = useState('')
useEffect(() => {
if (typeof window !== 'undefined') {
setCurrentUrl(window.location.href)
}
}, [])
<button type='button' onClick={() => navigator.clipboard.writeText(
浏览 3提问于2021-03-24得票数 2
回答已采纳
下面是现场演示：
所以我有这样一个组件
const fn = () => {
console.log("useState");
return ["string"];
};
export default function App() {
const [counter, setCounter] = useState(0);
const [nonprimitive, setNonprimitive] = useState(fn());
useEffect(() => {
console.log("useEffect
浏览 6提问于2020-09-06得票数 4
回答已采纳
useEffect(() => {
calculateTip();
}, [bill, tipPercentage, numberOfPeople]);
const calculateTip = () => {
const tip = ((tipPercentage / 100) * bill).toFixed(2);
const tipPerGroup = ((tipPercentage / 100) * bill * numberOfPeople).toFixed(
2
);
setTipPerGroup(tipPe
浏览 2提问于2022-05-27得票数 1
回答已采纳
我在这里有一个useEffect代码：
useEffect(() => {
if (status === "completed" && !error)
props.onAddedComment();
}, [status,error,props.onAddedComment]);
，但我在终端中得到了这样的警告： React useEffect缺少一个依赖项：'props‘。要么包含它，要么删除依赖数组。但是，当任何道具发生变化时，“props”都会发生变化，因此首选的修复方法是在useEffect调用之外分解“props
浏览 5提问于2022-06-25得票数 3
回答已采纳
1回答
调用函数表达式
、、
我正在学习一个React钩子教程，我不明白为什么函数表达式(顶部timerId中的useEffect )会被自动调用，但是底部useEffect中的函数表达式search需要调用它才能调用它？
useEffect(() => {
const timerId = setTimeout(() => {
setDebouncedTerm(term);
}, 1500);
return () => {
clearTimeout(timerId);
};
}, [term]);
useEffect (() =&g
浏览 2提问于2021-01-31得票数 2
回答已采纳
我正在查看上的文档，不明白为什么在使用效果范围内使用Hub.listen。
Hub.listen('auth', ({ payload: { event, data } }) => {
switch (event) {
case 'signIn':
case 'cognitoHostedUI':
getUser().then(userData => setUser(userData));
break;
}
});
如果要创建
浏览 10提问于2022-09-10得票数 0
2回答
所以我新来的反应钩子，似乎不明白useEffect是如何工作的.
我有个钩子：
const [print, setPrint] = useState(false);
A useEffect：
useEffect((x) => {
console.log("2nd => ",x)
}, [print]);
然后我有了一个按钮函数：
const btnPrint = async () => {
let x = 1;
console.log("1st => ",x);
setPrint(tru
浏览 1提问于2021-01-07得票数 0
为什么这段代码只触发一次setInterval，然后停止... const MainBar = ()=> {
const [clock, setClock] = useState("")
useEffect(() => {
const interval = setInterval(setClock(clockUpdate()), 1000);
console.log('Im in useEffect', clock)
});
... 然而，把它传递给另一个函数会让它每秒都像这样工作吗？ const MainBar
浏览 101提问于2020-06-15得票数 3
回答已采纳
我试图在"keydown“上使用一个eventListener来更新我的状态(一个名为showMenu的布尔值)。我已经把它放在useEffect上了，但是它不能正常工作，我不知道为什么.如果我将showMenu放在useEffect末尾的数组上，它将以指数方式重新呈现该组件。如果我不把showMenu放在useEffect的末尾，showMenu将只更新一次(从false到true)。
下面是以指数方式重新呈现的代码
const [showMenu, setShowMenu] = useState(false);
useEffect(() => {
window.a
浏览 4提问于2021-04-28得票数 2
回答已采纳
我试图在useEffect中预加载一个图像，但是当应用程序组件挂载时，它似乎并不是在下载图像。
我做的事情如下：
export default function App() {
const [show, setShow] = React.useState(false)
React.useEffect(() => {
const image = new Image();
image.src =
"https://images.unsplash.com/photo-1601758065893-25c11bfa69b5?ixlib=rb-1.2.1
浏览 0提问于2020-11-03得票数 0
回答已采纳
1回答
我已经使用React几个月了，并且严格按照文档使用useEffect钩子。
一位新同事加入了团队，他在问为什么useEffect是必要的。我们一起浏览了文档，但他指出，实现useEffect会导致额外的呈现。
下面是一个简单的用例:按下按钮来获取一些数据。单击由click事件处理程序处理。他想知道为什么不能直接在事件处理程序中对端点进行异步调用。
我正在寻找一种超越“医生说你不应该”的解释，并且实际上解释了做这件事的危险或坏处。
可能有人能分享原因吗？
浏览 3提问于2019-10-25得票数 0
1回答
const [user, setUser] = useEffect({});
useEffect(() => {
fetch(`/api/users/${id}`)
.then(resp => resp.json())
.then(setUser);
}, []);
我看了一本教程，看到了上面的代码。在useEffect的最后一行中，当时的函数只是简单地接受setUser函数，而不是调用IT。为什么最后一行.then(setUser(value))不是
请帮我清理一下..。
浏览 2提问于2022-09-21得票数 0
回答已采纳
1回答
我试图在useEffectF的主体中使用一个返回函数来实现特定的逻辑。
但是，如果我有一个空的依赖项数组，则不会调用返回的函数。
useEffect(() => {
// works good
console.log('useEffect');
console.log('useEffect', currentFilter , referenceStore.Filters?.CurrentFilter?.FilterId);
return () => {
// does not work
浏览 3提问于2022-07-15得票数 1
回答已采纳
2回答
我正在慢慢地学习RXJS，并学习如何在React的上下文中使用它。 我发现的所有Rxjs教程都是从可观察性开始的。这是有道理的。当我尝试在react中使用可观察对象时，它不起作用。相反，我必须创建一个主题，并将价值推向主题。 为什么会这样呢？为什么我不能在React中使用普通的老式观察值？我做错了什么吗？有人能解释一下为什么react中的RXJS必须使用主题吗？ 我意识到这有点模糊，但我还不能理解概念来表达更好的问题。这里有一个例子来说明我正在努力理解的东西。 下面是一个非常简单的组件，它接受输入值中的一个值并显示它。常规的react，没有RXJS。 const InputBox = ()
浏览 17提问于2019-10-14得票数 0
回答已采纳
具有如此简单的反应成分：
import React, { FunctionComponent, useEffect, useState } from 'react';
export function useMediaQuery(query:string) {
console.log("useMediaQuery")
useEffect(() => {
console.log("useEffect outer")
// ...
});
}
const Sidebar:
浏览 10提问于2022-02-10得票数 0
4回答
我创建了一个简单的组件，状态更新有问题。我知道正确的解决方案，但我的问题是:为什么这段代码不能工作？
import * as React from "react";
import {useEffect, useState} from "react";
type CountdownProps = {
start: number;
}
export const Countdown: React.FunctionComponent<CountdownProps> = ({start}: CountdownProps) => {
浏览 4提问于2020-01-06得票数 0
回答已采纳
1回答
我是生命周期钩子的新手，请原谅，这是非常基础和理解的，但我不明白为什么所有不同的useEffect方法调用方式都不同？ 我知道JavaScript不支持overLoading函数。 所以如果我写这篇文章， add(){
console.log("asd")
}
add(c){
console.log("asdfgh");
}
add();//asdfgh 这将打印asdfgh，即使在没有参数的情况下调用， 那么，为什么所有的useEffect函数即使具有相同的名称也会被执行呢？
浏览 44提问于2020-09-15得票数 0
2回答
我试图理解为什么第二次在useEffect钩子中返回一个函数。例如：
const App = (props) => {
const [change, setChange] = useState(false);
useEffect(() => {
return () => console.log("CHANGED!");
}, [change]);
return (
<div>
<button onClick={() => setChange(true)}>CLICK</butt
浏览 8提问于2022-03-19得票数 2
关于RxJS在useEffect钩子中的一个快速问题
我注意到React社区在RxJS中使用了这种取消订阅模式：
useEffect(()=>{
const sub = interval(10).subscribe()
return ()=>sub.unsubscribe()
})
我很好奇这是由于约定/代码清晰，还是我忽略了什么。我可以想象以下几点会更简单：
useEffect(()=> interval(10).subscribe().unsubscribe)
然而，我可能忽略了一些东西。
编辑:查看选定的答案。“此”绑定在方法调用上，而不是在订阅实例化上。结果，
浏览 7提问于2022-02-16得票数 2
回答已采纳
我发现了一种行为，在这种情况下，生成器似乎被调用了两次。
下面是一个简单的代码，它从生成器获取一个数字并输出到控制台。它期望0和1被输出到控制台，但实际上它输出0和2。
import { useState, useEffect } from "react";
function* counter() {
let val = 0;
while (true) yield val++;
}
const count = counter();
function App() {
console.log("rendered: count = ", count.
浏览 4提问于2021-05-26得票数 3
回答已采纳
我知道闭包是如何工作的，但我无法理解在没有详尽的依赖关系数组的情况下，陈旧的闭包是如何在React的useEffect中创建的。为此，我试图复制一个陈旧的闭包，就像React的useEffect一样，而不使用useEffect，但我无法创建它。我的代码不会创建过时的闭包，而是在每个间隔上记录一个正确的值。请你看看下面的片段，告诉我：
我做错什么了？当我们没有提供完整的依赖数组时，我应该做些什么来创建一个陈旧的闭包，比如我们在React的useEffect中得到的闭包？(参考代码在文章末尾)
--为什么在useEffect中没有给出详尽的依赖时，就会创建陈旧的闭包？为什么useEffect钩子回
浏览 1提问于2021-07-27得票数 5
回答已采纳
我一直在试图找到一种像这样使用useEffect的方法，但我认为我这样做并不正确：
const [searching, setSearching] = useState(false);
function OnSearch(e) {
const searchValue = e.target.value;
useEffect(() => {
setSearching(true);
}, []);
clearTimeout(timer);
timer = setTimeout(() =>
浏览 0提问于2020-06-16得票数 0
直到今天，我还以为没有依赖数组的useEffect内部的代码和useEffect之外的代码都会在每个重发程序上触发，但是后来我发现了这个奇怪的情况，我不明白为什么会发生这种情况。
在示例中，当您第一次单击该按钮时，它会将一个setState触发为不同的值，以使其重命名并调用两个console.log，但当您第二次单击该按钮时，会以相同的值调用setState，仍然会调用外部console.log，但useEffect内部的console.log不会.为什么？，这不是一个完整的改进机吗？如何在不再次触发useEffect的情况下重新评估组件？
下一次单击按钮时，不会发生任何事情，因为调用具有相同
浏览 15提问于2021-04-28得票数 3
回答已采纳
不太清楚为什么这不起作用--我想根据传递的支柱设置状态，然后将状态作为支柱传递，但是当我在useEffect中使用它时，它不起作用。我最初只是使用了一个常规函数来完成这个任务，它成功了，但是我试图清理代码，但它似乎不起作用。
const Picker = ({choices, activeValue}) => {
const [clickIndex, setClickIndex] = useState(null);
useEffect(() => {
choices.forEach((choice, index) => {
if (activeV
浏览 4提问于2022-05-15得票数 0
如果将空数组作为依赖项传递，我们可以使用useEffect一次调用函数，但也可以使用调用函数而不使用钩子，只需调用它即可。
我试图搜索只在第一次呈现时调用函数的更好方法，但我只能找到建议在空数组中使用useEffect的帖子。但是为什么呢？这更传统吗？
更好的方法是什么?为什么？
我想我问错问题了。第一次很抱歉。我的问题更像这样。
我们可以调用body中的函数，这样就可以用于每次渲染。我知道，如果我们不建议第二个参数，即依赖项，那么它将调用对每个工作的呈现。但是使用“useEffect”有什么好处呢？我们可以通过调用useEffect和body来实现相同的目标。
浏览 4提问于2021-02-19得票数 0
回答已采纳
3回答
关于守则的这一部分：
const MyComponent = props => {
let number = 0
React.useEffect(() => {
number = number + 1
console.log('inside useEffect: ', number);
}, [number])
console.log('outside useEffect: ', number);
return <div/>
}
我希望在执行1后这个数字是use
浏览 5提问于2020-12-03得票数 1
回答已采纳
1回答
我的reactjs应用程序中有以下组件： import React, { useEffect } from 'react';
import { Helmet } from 'react-helmet';
import { connect } from 'react-redux';
import MovieList from '../components/MovieList';
import styled from 'styled-components';
import { getMoviesDiscove
浏览 9提问于2019-09-23得票数 0
回答已采纳
2回答
我正在浏览一篇文章。
它给出了下面的2段代码来演示如何在useEffect中处理承诺。第一个错误抛出，而第二个错误没有。
第一个片段-
useEffect(async () => {
const result = await axios(
'https://hn.algolia.com/api/v1/search?query=redux',
);
setData(result.data);
}, []);
第二个片段-
useEffect(() => {
const fetchData = async () =
浏览 5提问于2021-01-13得票数 1
回答已采纳
如果依赖关系从未改变，为什么每次呈现都会触发以下useEffect？
useEffect(() => {
console.log('Here')
}, [['1', '2', '3']]);
浏览 1提问于2020-10-27得票数 0
回答已采纳
1回答
对于新手的问题很抱歉：
我使用useEffect来避免在未挂载的组件上设置状态，我想知道为什么要这样做：
useEffect(() => {
let isMounted = true
actions.getCourseDetails(fullUrl)
.then(data => {
if (isMounted) {
actions.setOwner(data.course.Student.id);
setDetail
浏览 3提问于2021-03-30得票数 0
回答已采纳
我理解，useEffect需要依赖项数组中的依赖项，但是当我将其与useState结合时，将有一个无限循环：
const [valid, setValid] = useState(false);
useEffect(() => {
setValid(true);
}, [valid]};
这就是为什么我用它就像：
useEffect(() => {
setValid(true);
}, []};
因此，我得到：
React Hook useEffect has a missing dependency: 'setValid'.
我怎么才能摆脱警告呢？
浏览 4提问于2021-03-14得票数 0
回答已采纳
我想在组件卸载时进行调度。我的调度：
useEffect(() => {
add({
...values,
});
}, [var]);
const add = payload => {
dispatch({ type: 'ADD_S', payload })
return dispatch({ type: 'UPDATE_S' })
}
//now i unmount
useEffect(() => {
return () => {
浏览 2提问于2020-04-07得票数 0
1回答
我在useEffect钩子中设置窗口位置，如下所示。
const MyComponent = (name) => {
React.useEffect(() => {
window.location.href = `/${name}/mypath${window.location.search}`
}, []);
return <Fragment/>;
};
我希望测试href值是否正确匹配。
因此，我按照下面的方式模拟数据，并期望该值与后面的字符串匹配。
www.test.com/name/mypath?param=1
但是，我最后错误地说，win
浏览 2提问于2021-09-09得票数 0
回答已采纳
我试图将本地映像加载到画布元素中，但它引发了一个错误：
未能在“CanvasRenderingContext2D”上执行“drawImage”：提供的值不是类型(CSSImageValue或HTMLCanvasElement或HTMLImageElement或HTMLVideoElement或ImageBitmap或OffscreenCanvas或SVGImageElement或VideoFrame)。
当我绘制或使用画布窗口进行操作时，它工作得很好，但是当我试图使用image = Image(gImage.default)导入图像时，它会中断吗？我正试着遵循一个为在Next.js上做
浏览 6提问于2022-07-25得票数 2
回答已采纳
我创造了一个非常基本的反应间隔。
import React, {useState, useEffect} from 'react';
const Loading2 = () => {
const [percentage, setPercentage] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setPercentage((prevPerc) => {
if(percenta
浏览 10提问于2021-08-31得票数 1
回答已采纳
我使用的是react 16.13.1，使用3.4.1创建了react应用程序。
正在为每个组件调用两次安装生命周期。
我创建了组件FirstComponent.js
import React, {Component} from 'react';
class FirstComponent extends Component {
constructor(p) {
super(p);
console.log("FirstComponent constructor called")
}
componentDid
浏览 4提问于2020-04-14得票数 1
回答已采纳
通过使用流畅的UI DetailsList，我创建了这个解决方案。我已经删除了所有不必要的行，以最小化问题，因为似乎当登录onColumnClick时，不知何故它不打印当前状态，而是打印初始状态，为什么会发生这种情况： import * as React from 'react';
export const ClvKkcgListyHistorie = (props: IClvKkcgListyHistorieWebPartProps) => {
const [notifications, setNotifications] = React.useState<IN
浏览 8提问于2020-12-07得票数 0
回答已采纳
4回答
我正在学习React，但是我无法理解为什么我在控制台中得到了这个输出。心地善良的人可以详细解释一下“行刑”哦，这些钩子？
import { useState, useEffect } from "react";
function Homepage() {
const [state, setState] = useState();
useEffect(() => {
console.log("useEffect");
console.log("useEffect not executed");
setState
浏览 24提问于2022-04-20得票数 1
我正在学习react hooks useEffect，但我对useEffect的执行顺序感到困惑。在控制台中，它告诉我首先执行了ChildComponent“子组件”console.log，然后执行了“挂载”useEffect，最后记录了“父组件”。我期望首先记录"on mount“，然后是”父组件“，最后是”子组件“。有没有人能解释为什么孩子会先记录日志，或者为什么事情会这样执行？ 字段是一个简单的对象数组 const fields = [
{
id : 'month',
title : 'Month'
浏览 199提问于2021-09-27得票数 3
回答已采纳
当组件呈现我用socket发送套接字发出以获取useEffect中的数据时，我还会侦听以获取数据。当我从套接字获得数据时，我更新状态，然后调用一个函数。在功能内部，状态是空的。为什么州是空的？
const [chatData, setChatData] = useState([]);
const handleData = () => {
console.log(chatData)
}
useEffect(() => {
socket.emit("chatData");
socket.on("chatData", (data) =
浏览 2提问于2022-08-19得票数 1
我有一个useEffect()，它应该在对象数组改变时触发。
useEffect(() => {
setNotesToRender(props.notes)
}, [props.notes]);
useEffect依赖项不能比较对象数组，因此上面示例中的useEffect()触发频率比需要的要高。我只希望在数组useEffect()与useEffect()不同时触发()。
应该触发更新的数组示例
array1 = [{id:1,title:'one'},{id:2,title:'two'},{id:3,title:'three
浏览 4提问于2020-12-04得票数 4
回答已采纳
3回答
有人能告诉我这两者之间的区别吗？
function IntervalHookCounter() {
const [count,setCount] = useState(0)
useEffect(()=>{
const interval = setInterval(tick,1000)
},[])
const tick = ()=>{
setCount(count+1)
}
这是：
function IntervalHookCounter() {
const [count,setCount] = useState(0)
useEffect(()=>{
浏览 1提问于2022-09-05得票数 -1
1回答
我使用useEffect和参数props.quizStep。但是fn(keydown事件侦听器函数)无法获得当前的props.quizStep。
为什么它不能得到现在的道具？
这是我的密码。
const moveBirdKeyboard = React.useEffect(() => {
console.log('moveBirdKeyboard props.quizStep', props.quizStep);
let fn = (e: any) => {
console.log('props
浏览 1提问于2022-07-12得票数 0
我用Axios调用了一个JSON文件，我不明白为什么podcastClick函数会自动执行(如果单击就不能工作)，并执行两次？
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [podcasts, setPodcasts] = useState([]);
useEffect(() => {
const fetchData = async () => {
le
浏览 4提问于2020-08-06得票数 0
回答已采纳
所以我有这个反应的功能成分：
export default function Login() {
const [loginData, setLoginData] = useState<Credentials>({ email: "", password: "" })
useEffect(() => {
document.addEventListener('keydown', handleKeyDown)
return () =>
document.
浏览 2提问于2022-03-31得票数 0
回答已采纳
1回答
我在React中有以下组件：
import React, { useState, useEffect } from 'react';
import api from '../../services/api';
const Store = () => {
const [products, setProducts] = useState([]);
let pagination = null;
const getProducts = async (page = 1) => {
const { data } = await api.g
浏览 4提问于2020-02-28得票数 2
import { useState, useEffect } from "react";
export default function RenderTable(){
const [tableData, updateTableData] = useState([{id: 1, name: "name", price: 200, size: "size"}]);
useEffect(()=>{
fetch("/api/ManageSite").then(value => updateT
浏览 15提问于2021-11-22得票数 1
2回答
当前代码仅显示“完成！”结束工作后(大约3秒)。我想要显示“完成！”在“加载...”之后第一。 import React, { useState, useEffect, useCallback } from "react";
const App = () => {
const [loading, setLoading] = useState<boolean>(false);
const [workingResult, setWorkingResult] = useState<string>();
const runWo
浏览 8提问于2020-06-13得票数 0
回答已采纳
下面是函数组件的代码。我用onClick事件处理程序内联地更新状态，它在useEffect中显示更新的数据。但是，一旦控件从useEffect中出来，状态变量' data‘就会返回到以前的数据。我已经尝试过在没有useEffect的情况下更新它，但是问题是一样的。我无法在其他函数中访问更新的状态变量。
function Task(props) {
var initialData = {
id: '1',
content: 'somecontent',
linkedPage: 'somepag
浏览 15提问于2022-09-07得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
