在设置其所依赖的状态后调用使用useCallback定义的函数
是React中的一种优化技术。useCallback是React提供的一个Hook函数，用于创建一个记忆化的回调函数。
概念： useCallback函数接受两个参数，第一个参数是回调函数，第二个参数是一个依赖数组。当依赖数组中的值发生变化时，useCallback会返回一个新的回调函数，否则会返回之前记忆的回调函数。
分类： useCallback属于React的Hook函数，用于优化函数组件的性能。
优势：
- 减少不必要的函数重新创建：使用useCallback可以避免在每次渲染时都创建新的回调函数，提高性能。
- 避免不必要的子组件渲染：将回调函数作为props传递给子组件时，使用useCallback可以确保子组件只在依赖发生变化时重新渲染。
应用场景：
- 优化子组件性能：当父组件重新渲染时，如果传递给子组件的回调函数没有发生变化，可以使用useCallback来避免子组件的不必要渲染。
- 作为effect的依赖：在useEffect中使用useCallback作为依赖，可以确保effect只在回调函数发生变化时执行。
推荐的腾讯云相关产品： 腾讯云提供了丰富的云计算产品，以下是一些与React开发相关的产品：
- 云服务器（CVM）：提供可扩展的虚拟服务器，用于部署和运行React应用。 产品介绍链接：https://cloud.tencent.com/product/cvm
- 云函数（SCF）：无服务器函数计算服务，可用于部署和运行React应用的后端逻辑。 产品介绍链接：https://cloud.tencent.com/product/scf
- 云数据库MySQL版（CDB）：提供稳定可靠的MySQL数据库服务，用于存储React应用的数据。 产品介绍链接：https://cloud.tencent.com/product/cdb_mysql
- 云存储（COS）：提供高可用、高可靠的对象存储服务，用于存储React应用的静态资源。 产品介绍链接：https://cloud.tencent.com/product/cos
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。
相关·内容
2回答
当我将addData或updateData添加到useEffect数组中时，它会被调用无限次，但我认为它应该只在单击按钮时调用。
import axios from 'axios'
import { Button, TextField } from '@material-ui/core'
import React,{useState,useEffect} from 'react'
import { useDispatch, useSelector } from 'react-redux'
import Applebar from
浏览 0提问于2021-02-13得票数 1
我正在使用IntersectionObserver api来实现无限滚动。当调用回调时，在callback内部，redux状态没有更新的value.The函数：
//function for defining InfiniteScroll
const InfiniteScroll = (parent,target,options,callback,getObject)=>{
const Infoptions = {
root: parent,
rootMargin: '50px',
threshold: 1.0,
浏览 5提问于2022-01-03得票数 2
回答已采纳
我正在学习从helinski fsopen20的反应。其中一个练习需要单击一个按钮并显示该按钮绑定区域的天气。
该按钮有一个onClick事件，该事件以区域索引作为参数来确定所选择的区域(很明显)。
<button onClick={() => onClickShow(i)}>{showBox.includes(i) ? myfunction(i): 'show'}</button>
然后，OnClick函数呈现上述区域的详细信息。需要获取的数据是在此函数中完成的。
const myfunction = useCallback((i)=>{
浏览 8提问于2021-01-23得票数 0
我想到了这个问题，因为我们从医生那里知道：
useCallback(fn，deps)等价于useMemo(() => fn，deps)。
useMemo的博士们说：
记住，传递给useMemo的函数在呈现过程中运行。不要在那里做你在渲染时通常不会做的事情。例如，副作用属于useEffect，而不是useMemo。
我认为这也意味着我不能做setState。
现在，如果我们有这样的代码：
const res = useMemo(() => fn, []);
上面的引号是否意味着我们不能在fn内部产生副作用，或者内联函数是useMemo的参数
因为如果它意味着我们不能在fn内部产
浏览 1提问于2021-11-04得票数 1
回答已采纳
下面的useCallback有什么问题--每次调用函数onRefresh时，我都不会得到下面的值？如何使它返回期望值using Hooks
示例当我调用onRefresh 2x时
预期值：
true
0
20
false
true
0
20
false
价值:已收到
false
0
0
false
false
20
20
false
状态变量的初始化
const [refreshing, setRefreshing] = useState(false)
const [offsetQuestions, setOffsetQuestions] = useState(0)
用useCallbac
浏览 5提问于2020-02-20得票数 7
回答已采纳
每当我使用useState设置变量时，都不会立即反映该值。这里我有一个useEffect，它调用computePriceSummary()；
useEffect(() => {
computePriceSummary();
}, []);
computePriceSummary调用三个函数，如下所示：
const computePriceSummary = () => {
computeSubtotal();
computeTaxes();
computeTotal();
};
这些函数使用useState设置变量：
const computeTaxes
浏览 3提问于2020-08-01得票数 3
回答已采纳
当我使用useCallback钩子的反应时，我面临一个问题。当我使用普通箭头函数时，它会调用setSlimSideBar(!slimSideBar)，但是useCallback不会按预期调用或不设置值。
const [slimSideBar, setSlimSideBar] = useState(true)
此设置状态与预期相同。
const toggle = () => {
console.log(slimSideBar)
console.log(!slimSideBar)
setSlimSideBar(!slimSideBar)
}
下面的函数没有像我预期的
浏览 1提问于2022-06-02得票数 0
根据，您不需要在useCallback依赖项数组中包含setState函数。在不包括依赖数组中的状态或setState函数的情况下使用函数更新可以吗？如果是，为什么？
示例代码：
const foo = () => {
const [count, setCount] = useState(0);
const inc = useCallback(() => setCount(prev => prev + 1), []);
return (
<div>
<p>{counter}</p>
&
浏览 2提问于2021-08-04得票数 0
3回答
是什么导致了这里的无限循环？
、、、、
我是一个相对较新的反应，我不完全理解在我的代码中是在哪里重新渲染被调用。我知道这个文件很大，很抱歉:(.我将删除那些我知道没有任何东西不断被重新渲染的区域。 有没有关于地点和原因的想法？谢谢。 代码： function MeetupItem(props) {
useCallback(() => {
setAllParticipants(participantContext.getParticipants(props));
try {
fetch('http://localhost:3000/users')
浏览 20提问于2021-07-09得票数 1
我有这个useFocusEffect函数： useFocusEffect(
useCallback(() => {
async function setFilterValue() {
let filterValue = await AsyncStorage.getItem('filterValue');
let inputValue = JSON.parse(filterValue);
if (gpsFilterValue === null) {
浏览 45提问于2020-06-08得票数 0
1回答
钩子
export const useCreateAccount = () => {
const [state, setState] = useState(initialState)
const onChangeInput: ChangeEventFunction = useCallback(({ target }) => {
if (!target.files) {
return setState({ ...state, [target.name]: target.value })
}
setState({ ...state, [ta
浏览 2提问于2020-04-12得票数 2
回答已采纳
1回答
我有一个子组件，它通过一个事件向父组件发出一个操作：
子组件：
export default function ChildComponent(props) {
const classes = useStyles();
const [value, setValue] = React.useState([0, 5]);
const handleChange = (_, newValue) => {
setValue(newValue);
props.updateData(newValue)
};
return (
<div classNa
浏览 1提问于2020-11-14得票数 3
回答已采纳
1回答
我注意到钩子集函数是异步的，但是我需要在设置了新值之后调用函数。
我的状态是这样的：
const[agenda, setAgenda] = useState([{ id: "0", date:new Date(2022,0,21,13,25,0), titulo: "Test 1", obs:'Lorem ipsum dolor sit amet', prioridade:1,local:'-',lugar:'', diatodo:false },
{ id: "1", date:new Date
浏览 7提问于2022-01-26得票数 0
回答已采纳
2回答
我想要一些帮助，请理解为什么下面的代码导致inf呈现循环。在我看来，这应该是一个循环：
渲染容器。
渲染子StrRow。
第一次运行效果并调用update()。
更改容器状态。
重新渲染容器。
重新渲染StrRow.
由于依赖项没有更改，不会再次运行。
然而，这种效果似乎是在StrRow的每次呈现之后运行的。
function Container() {
const [count, setCount] = React.useState(0);
const update = React.useCallback(() => {
浏览 3提问于2020-05-06得票数 0
回答已采纳
短篇小说
我想知道这样做是否可以：
const onClick = useCallback(() => {
setHoveredItem((hovered)=>{
setSelectedData(hovered);
return hovered;
});
},[]);
只需使用useState设置器获取值，就可以“删除”useCallback的依赖项以避免重新呈现。注意空依赖数组。这是一种可以接受的方法吗？
长话短说
我正在处理一份有图表的申请。重新呈现到图表真的很糟糕(它们基本上坏了)。所以我用了React.memo。在我需
浏览 3提问于2022-05-03得票数 -1
回答已采纳
我有个谜。考虑以下自定义的React钩子，它按时间段获取数据并将结果存储在Map中
export function useDataByPeriod(dateRanges: PeriodFilter[]) {
const isMounted = useMountedState();
const [data, setData] = useState(
new Map(
dateRanges.map(dateRange => [
dateRange,
makeAsyncIs
浏览 6提问于2020-01-05得票数 7
回答已采纳
1回答
我有一个场景，我被迫调用触发器方法来显示来自两个不同地方的模式，一个是使用热键组合，另一个是单击工具栏按钮。为了做到这一点，我有下面的代码，其中我调用triggerCustomLinkModal来设置状态，但是我会被Invalid Hook call error击中。
import { useState, useCallback, useEffect } from "react"
import { Dialog } from "@blueprintjs/core"
const useLocalState = () => {
const [isShow
浏览 6提问于2022-06-22得票数 0
所以我有一个使用useEffect()钩子的React组件：
const [stateItem, setStateItem] = useState(0);
useEffect(() => {
if (condition) {
myFunction();
}
}, [stateItem]);
const myFunction = () => {
return 'hello';
}
React给我一个警告，告诉我'myFunction‘是一个缺失的依赖项。我(想我)理解为什么，我已经读过许多类似的问题，要求或多或少相同的东西，但答案总是“
浏览 0提问于2019-11-29得票数 4
因此，每当run() (处于组件的状态)被更改时，我都想调用a。
run()设置另一个状态变量b的值。
import {computeWithB} from '../helpers/compute'
const [a, setA] = useState()
const [b, setB] = useState()
const run = () => {
result = computeWithB(b)
setB(result)
}
useEffect(() => {
run();
}, [a, run]);
浏览 2提问于2020-08-01得票数 0
回答已采纳
面对太多的重新呈现。React限制呈现的数量，以防止异步无状态组件中的中的无限循环。
我试图使用无状态组件调用异步方法。我试图在异步存储中调用一个API。
基本上，我需要从Asyncstorage获得电子邮件，并将该链接传递到API中。我正在尝试这样做，但面对太多的重新渲染，会出现错误。限制呈现的次数以防止无限循环。
import { BottomNavigation, Text } from 'react-native-paper';
import HomeScreen from './Home';
import PatientScreen from '
浏览 3提问于2021-06-27得票数 1
回答已采纳
const [balance, setBalance] = useState();
const pollBalance = useCallback(async (provider, address) => {
if (provider && address) {
const newBalance = await provider.getBalance(address);
if (!newBalance.eq(balance !== null && balance !== voi
浏览 3提问于2022-10-09得票数 0
回答已采纳
const [active, setActive] = useState(false);
const onActiveChanged = useCallback(
isActive => () => {
// do something
setActive(isActive);
},
[setActive], // or just [] is okay?
);
当同时使用useState和useCallback (或useMemo)时，是否应该在依赖项数组中包括setState？
浏览 3提问于2019-04-18得票数 22
回答已采纳
1回答
在下面的代码片段中，我想将这个函数移出jsx并转到useCallback中。
{suggestedTags.length ? (
<div className={classes.tagSuggestionWrapper}>
{suggestedTags.map((tag) => {
return (<div key={tag}
onClick={() => { selectTag(tag) }}>{tag}</div>
浏览 5提问于2022-06-24得票数 0
我想使用UploadB函数和setModalVisible(！modalVisible).
我试过了，但不起作用
const UploadB = useCallback(() => {
dispatch({
type: ADD_POST_REQUEST,
info:{foodname, ingre1, ingre2, ingre3, recipe},
}),
navigation.navigate('Main');
}, [foodname, ingre1, ingre2, ingre3,
浏览 0提问于2021-02-26得票数 1
回答已采纳
4回答
我正在与一种被认为是简单的揭穿的东西作斗争。但不知何故，它不是等待和触发一次，而是等待，而是一个接一个地触发所有事件，直到最后一个事件。 它是react组件的一部分。代码如下： import debounce from "lodash.debounce";
(...)
export default () => {
const { filter, updateFilter } = useContext(AppContext);
const [searchString, setSearchString] = useState(filter.searchSt
浏览 33提问于2019-12-03得票数 2
回答已采纳
1回答
Redux调度继续运行
、、、、
const fetchUserCognito =async()=>{
dispatch(setCurrentCognitoUserThunk())
}
const fetchUserData=async()=>{
dispatch(getUserData(user.currentUser))
}
const fetchTopCategories=async()=>{
dispatch(getTopCategoryOfUser(String(user.currentUser)))
}
const fetchingProce
浏览 5提问于2022-02-28得票数 1
回答已采纳
const Root = () => {
/** useState */
const [count, setCount] = useState(1);
const [times, setTimes] = useState(1);
const handleCount = useCallback(() => {
setCount(count * 2);
}, []);
const handleTimes = useCallback(() => {
setTimes(times + 2);
}, []);
return (
浏览 57提问于2021-11-09得票数 0
我有这段代码，即使我已经回忆录了我的道具功能，我仍然得到最大的更新深度超过。我为什么要得到这个？我该怎么解决呢？我试图动态地创建一个子组件列表，以接受一些输入。其想法是能够从父组件中添加或删除上述子组件，然后对用户输入进行一些处理。
const RatingBracket = (props) => {
const [range, setRange] = useState([])
const [prices, setPrices] = useState({})
const {target} = props
const updatePrice = useC
浏览 4提问于2022-11-08得票数 0
我试图保存到本地在反应和我的应用程序工作，但我不能部署它，因为这个警告。警告是：
React useEffect缺少一个依赖项：'saveLocalTodos‘。要么包含它，要么删除依赖数组。
我的代码是：
// Run once when the app starts
useEffect(() => {
getLocalTodos();
}, []);
// useEffect
useEffect(() => {
// Function
function filterHandler() {
switch (stat
浏览 1提问于2020-10-01得票数 1
回答已采纳
2回答
过去几天，我一直在学习react，在使用useEffect钩子时，我会使用infite循环来设置状态变量。
有人能告诉我发生了什么以及如何克服这一切吗？
这是我的密码
import React, { useState, useEffect } from "react";
import axios from "axios";
const TodoEntry = () => {
const [todos, setTodos] = useState('');
useEffect(() => {
axios.get
浏览 0提问于2020-07-13得票数 1
回答已采纳
我对react中的useMemo和useCallback钩子相当陌生，而且我有点不明白为什么我的函数仍然继续重新呈现，即使我正在检查的变量保持不变。目前，我正在尝试构建一个google地图，允许用户打开和关闭地图上显示的某些标记。我的功能组件应该只需要在加载时呈现这些标记，然后再回溯它们，因为它们只是在之后被打开/关闭。现在我明白了这样的钩子只是做了一个浅浅的比较，但是我在比较布尔值，我认为这些钩子可以理解。
这是我当前的地图文件：
// constants are above
function Map() {
const {isLoaded} = useJsApiLoader({
浏览 1提问于2021-07-09得票数 5
回答已采纳
1回答
将值推入数组状态的两种方法的区别
、、、、
我需要知道向数组添加值的最佳方法，以及这两个代码段之间的区别。
setOtoValue((current) => [
...current,
Buffer.from(arraybuf, 'binary').toString('base64')
])
setegcValue([
...egcvalue,
...a.data.content.split(',').map(i => Number(i))
])
浏览 3提问于2022-11-11得票数 0
3回答
所以我正在建一本旅游日志，请不要理会代码的美丽，我还是很新的。Chrome告诉我，有太多的重呈现，但我不知道是什么原因造成它们。
import { useState, useEffect } from "react";
import Navbar from "./Navbar";
import Card from "./Card";
import Entry from "./Entry";
import { StorageContext } from "./Contexts/StorageContext";
fu
浏览 9提问于2022-07-27得票数 0
回答已采纳
我有一个函数可以获取数据并更新useState钩子，但是当我在jsx内调用该函数时，它会导致无限循环，在调用函数之前，我尝试在jsx中添加一个条件，以避免无限循环，但是函数不能正常工作。下面是我的代码
我的职能
const fetchDataFnc = (booking) => {
const fleetId = booking.booking_bids_fleet_id
const bookingId = booking.booking_id
console.log("fleetId" ,fleetId)
if(booking.booking_bids_
浏览 5提问于2022-07-29得票数 0
当用户到达底部时，我会尝试提出新的请求，包括以下内容；
useEffect(() => {
const scrolling_function = () => {
if((window.innerHeight + window.scrollY) >= document.body.offsetHeight-10){
window.removeEventListener('scroll',scrolling_function)
getMoviesFromApi()
}
}
window.
浏览 3提问于2021-10-31得票数 0
回答已采纳
2回答
状态不更新React本机
、、、
我正在做我的react本地应用程序的通知页面。它有无限滚动和“拉到刷新”选项。进入页面，它工作，它也工作拉刷新。当我向下滚动时会出现这个问题，因为它似乎调用服务器来获取新的通知，但是它没有连接到数组。
import React, { useState, useEffect, useCallback, Component } from "react";
import {
View,
Text,
FlatList,
Button,
Platform,
ActivityIndicator,
StyleSheet,
ScrollView,
Refre
浏览 0提问于2020-06-02得票数 0
回答已采纳
我正在提取一个带有onRes参数的自定义钩子；
function useApi(onRes) {
useEffect(() => {
api().then((res) => {
onRes && onRes(res);
});
}, [onRes]);
}
要使用此挂钩，请执行以下操作：
import useApi from './useApi';
function App() {
const [x, setX] = useState(0);
useApi({
onRes: () => {}
浏览 17提问于2019-07-15得票数 0
const handleLike = async () => {
await likeTweet(tweet._id, user._id);
};
useEffect(() => {
const fetch = async () => {
const response = await fetchLikes(tweet._id);
setTweetLikes(response.data);
console.log("useEffect");
};
fetch();
}, [han
浏览 4提问于2022-09-06得票数 0
回答已采纳
我真的很困惑于useEffect。有时起作用，有时不起作用。举个例子，
const [news, setNews] = useState<Array<MainNewsData>>([]);
useEffect(() => {
getNews();
}, []);
const getNews = () => {
NewsService.getMainNews() // calling an api
.then((response: any) => {
setN
浏览 6提问于2022-04-15得票数 0
回答已采纳
许多反应钩都有挂钩所依赖的第二个参数。
省略了第二个参数，就像提供一个空数组一样？，提供useState函数(比如setFoo )，而不是变量有什么用？
setFoo = useState('') const cb = useCallback(() => { //做某事}，setFoo)
浏览 1提问于2020-03-30得票数 0
回答已采纳
所以，当我点击"Mark“按钮时，我一直在试图找出如何用新的项目重新绘制项目地图。我尝试将这些项放在一个useState中，并按一下按钮更新状态，但问题是当我设置状态时，它总是一个呈现，因为set状态是异步的。我将如何实现这一目标？
const Main: React.FC<MainProps> = (props) => {
// Get All Feeds
const feeds = trpc.feed.getAllFeeds.useQuery();
// Get Items
let unsorteditems;
if (props.FeedT
浏览 7提问于2022-11-11得票数 0
回答已采纳
2回答
在我当前的React (v17.0.2)项目中，我遇到了这种情况，它给出了'React有一个缺失的依赖项onTogglePopup‘警告。
我需要将一个共享函数从父组件传递到子组件，当组件‘挂载’时，在窗口中添加一个事件侦听器。它目前做我想做的，但我相信必须有一个更好的方式来完成同样的，并使林特快乐。我既不能将函数包含到依赖数组中，也不能删除空数组，因为我已经失去了功能。我如何正确地解决这种情况，没有任何反模式，黑客或只是简单的隐藏链接警告？
const App = ()=>{
const [showPopup, setShowPopup] = useState(false
浏览 11提问于2021-08-01得票数 0
在我的react本机功能组件中，状态会被更新，但是当我想在函数中使用这个状态(例如，向API发送数据)时，它只使用初始状态。
imports...
const Component = ({ navigation }) => {
const [ids, setIds] = useState([1,2]);
useLayoutEffect(() => {
navigation.setOptions({
headerRight: () => <HeaderRight
onPress={() =>
co
浏览 1提问于2022-02-27得票数 1
回答已采纳
在使用useCallback钩子时，为什么函数的参数不能是依赖列表中的依赖项？如果我使用列表中的参数，它会给出如下错误。
const memoizedCallback = useCallback(
(c) => {
doSomething();
},
[c],
);
浏览 13提问于2019-08-19得票数 1
回答已采纳
我在学习React钩子时遇到了困难。
我正在关注这个网站，
const onGameOver = React.useCallback(
({ playerScore, playerHealth, gameId }) => {
setPages(player =>
arrayMove(playerScore, playerHealth, gameId)
);
console.log('gameId: ', gameId);
},
[player, gameId]
);
我可以看到playerScore和playerHea
浏览 0提问于2019-11-18得票数 4
回答已采纳
我有一个相当复杂的，它让我很难提供世博会小吃之类的东西，所以我尽我最大的努力解释我面临的问题：
这个应用程序的一个特点是，我有一个虚拟数据数组，用户可以通过这些数据查询，将其添加到他最喜欢的列表中。通过使用Autocomplete文本输入组件，用户可以通过单击列表中的选项向列表中添加一个新的最爱。然后应该显示这个新的收藏项。
收藏夹列表存储在redux存储区中，并使用useEffect钩子每分钟更新一次(出于样式原因)。
我面临的问题是，我需要将最喜欢的列表状态添加到useEffect钩子的依赖项中。但是，在这样做时，我的应用程序没有启动，这似乎是由无限循环造成的(尽管我没有收到任何警告或错误
浏览 4提问于2020-04-03得票数 0
我正在创建要做的应用程序在反应和我的任务id，我使用生成器的功能。但是这个生成器函数每次都给值0，而不是递增值。我认为问题的原因是useCallback()钩子，但我不确定solution.How能解决这个问题吗?这里我提供了代码：
import DateAndDay, { date } from "../DateAndDay/DateAndDay";
import TaskList, { TaskProps } from "../TaskList/TaskList";
import "./ToDo.css";
import Input from
浏览 3提问于2022-02-28得票数 0
我正在构建一个<BasicForm>组件，它将用于在我的应用程序中构建表单。它应该处理提交、验证，还应该跟踪输入状态(比如触摸、脏等)。
因此，它需要一些函数来完成所有这些工作，我一直在想，放置这些声明的最佳位置是什么(涉及代码组织和性能优化，考虑React和JavaScript最佳实践)。
我用反应16.8钩和Webpack捆绑。
到目前为止，我得到的是：
BasicForm.js
/* I moved those validating functions to a different file
because I thought they are helpers and not
浏览 1提问于2019-03-25得票数 17
回答已采纳
我正在寻找一种解决方案，用户可以在输入中输入文本，当他们在组件之外的任何地方单击时，它会提交并保存该值。
在我的例子中，我有一个顶级组件，它在包含UpdateValue函数的属性中动态生成文本输入components.It传递。
在这些功能组件中，我使用了向文档添加事件侦听器的功能，然后检测单击是否来自相关组件之外。在对stackoverflow做了大量研究后，这似乎是公认的方法。
useEffect(() => {
document.addEventListener('mousedown', handleClick);
return () => {
浏览 3提问于2020-06-12得票数 0
我是新的反应挂钩，在我们的项目的一个部分，我们有一个功能，处理模态显示卡：
const toggleModal = () => setModalDisplay(!modalDisplay)
在这种情况下，我必须把这个函数传递给每个子组件.可能是10到1000个孩子！
因此，对于function，JS useCallback返回一个回忆录函数，以减少内存使用和处理昂贵的计算。但是，我必须将params传递给第二个参数，以刷新回调并返回新的回调。
但在这种情况下，我们有一种状态来处理模态切换，每一次都会在真和假之间发生变化。因此，考虑到useCallback的逻辑和我们的用例，如果在
浏览 1提问于2021-03-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
