对钩子中的值不感兴趣会导致重新呈现
钩子（Hook）是一种在React函数组件中引入状态和其他React特性的方式。钩子允许我们在函数组件中使用状态和其他React功能，而无需编写类组件。对钩子中的值不感兴趣会导致重新呈现是指在函数组件中，如果我们在渲染过程中对某个钩子的值不感兴趣，但是该值发生变化时会导致组件重新渲染。
在React中，当组件的状态或属性发生变化时，组件会重新渲染以反映这些变化。如果我们在函数组件中使用了某个钩子，但是对该钩子的值不感兴趣，即不使用该值进行任何操作或渲染，React仍然会将该值视为组件的依赖项，并在该值发生变化时触发重新渲染。
这可能会导致性能问题，因为不必要的重新渲染会消耗额外的计算资源。为了避免这种情况，我们可以使用React提供的一些优化技巧：
- 使用useMemo或useCallback：如果我们只对某个钩子的值感兴趣，并且该值的计算开销较大，可以使用useMemo或useCallback来缓存该值，以避免不必要的重新计算和重新渲染。
- 使用React.memo：React.memo是一个高阶组件，用于对函数组件进行浅层比较的优化。通过将组件包裹在React.memo中，可以避免在组件的父组件重新渲染时触发不必要的子组件重新渲染。
- 细化依赖项：在使用钩子时，可以通过传递依赖项数组来告诉React只在依赖项发生变化时才重新渲染组件。这样可以避免对不感兴趣的钩子值的重新渲染。
总结起来，对钩子中的值不感兴趣会导致重新呈现是一个性能问题，可以通过使用useMemo、useCallback、React.memo和细化依赖项等优化技巧来避免不必要的重新渲染。
相关·内容
类组件
在React类组件中，我们被告知setState 总是会导致重呈现，而不管状态是否实际更改为新值。实际上，组件将在状态更新到之前相同的值时重新呈现。
除非setState()返回false，否则shouldComponentUpdate()总是会导致重呈现。
钩子(功能组件)
但是，使用钩子，文档指定将状态更新为与前一个状态相同的值，not将导致(子组件的)重呈现：
退出状态更新
如果您将状态挂钩更新为与当前状态相同的值，则React将在不呈现子状态或触发效果的情况下退出。(React使用Object.is比较算法。)
密切相关的问题
类组件中的this.s
浏览 0提问于2019-03-27得票数 35
回答已采纳
我刚刚创建了一个内部使用useState和useEffect的自定义钩子。
当我将这个钩子导入到另一个React组件中时，当自定义钩子中的状态发生变化时，调用它为ComponentA，ComponentA重新呈现。
当它使用的钩子返回新值时，ComponentA应该重新呈现是否正确？
请参阅代码中的注释，以获得更多的问题说明。
代码：
const ComponentA = props => {
const myValue = useMyValue();
// COMMENTS:
// Whenever myValue returns a new value, Compone
浏览 0提问于2019-05-28得票数 9
回答已采纳
有这样一个简单的反应应用程序：
import React, { useState, useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
console.log("App")
const [inputValue, setInputValue] = useState(0);
return (
<>
<input
浏览 5提问于2022-05-05得票数 1
我有这个口袋妖怪api应用程序，它有一些问题，首先，当我获取口袋妖怪，它不断添加无限x口袋妖怪与1请求。其次，当我再次尝试输入一些东西时，这个应用程序就会完全冻结。代码如下：
应用程序：
import React from 'react'
import './App.css'
import {PokemonForm} from '@components/PokemonForm/PokemonForm'
import {PokemonProvider} from "@context/PokemonContext";
import {
浏览 1提问于2022-10-27得票数 0
回答已采纳
1回答
我编写了一个简单的组件来重现我在一个大得多的项目组件中遇到的问题。
假设我有一个arrayA，其中我希望在每个按钮单击时不断地添加值1，而我希望在按钮单击上更新一个状态arrayB。
export default function UseStateTest(props) {
const arrayA = [];
const [arrayB, setArrayB] = useState([1, 2]);
function handleClick() {
arrayA.push(1);
setArrayB([3, 4]);
console.log(arrayA
浏览 4提问于2022-02-13得票数 2
回答已采纳
我正在尝试创建一个从API中获取数据的React项目，并且我试图从外部文件中使用useReducer钩子和useContext。文件夹结构：
publicsrc (在src文件夹中，除了其他组件和其他files)package.json之外，还有context.js和reducer.js。
reducer.js：
const reducer = (currentState, action)=>{
switch(action.type){
case 'setBreedList':
// console.log('
浏览 2提问于2021-06-27得票数 0
回答已采纳
当我们将箭头函数传递给事件处理程序(即onClick={() => myFunction()} )时，我们将导致不必要的重新呈现，因为这是一个函数定义。
相反，当我们调用事件处理程序上的函数并希望访问onClick={myFunction.bind(this)}时，应该使用onClick={myFunction.bind(this)}而不是箭头函数吗？因为它只使用对函数的引用，所以我们不会每次都导致重呈现。
以上的理解是否正确？如果是这样的话，为什么我们会使用箭头函数作为事件处理程序的支柱？似乎自从引入ES6以来，通常不推荐像我们在这里一样使用.bind，但是由于它不会导致不必要的重呈现
浏览 6提问于2022-01-06得票数 0
回答已采纳
我想解释一下上一个Redux商店的回忆录。
我现在拥有的，
import { useCallback, useMemo, memo } from "react";
import { useSelector, useDispatch } from "react-redux";
import { createSelector } from "reselect";
const Plus = memo(({ onIncrement }) => {
console.log("rendering <Plus>...")
浏览 6提问于2022-04-15得票数 0
1回答
如何使钩子状态更改为只呈现钩子而不是组件的呈现？为此，我将逻辑添加到空返回中间件组件中，但我不知道这是否是个好主意。
import { useState, useMemo, useEffect } from "react";
import "./styles.css";
function useTime() {
const [a, setA] = useState(0);
console.log("good-render", a);
useEffect(() => {
setInterval(() => {
浏览 0提问于2021-04-20得票数 0
回答已采纳
我正在尝试创建一些钩子来获取Redux存储的切片，这样存储就不能直接访问以返回任何内容。
如果我直接在组件中使用useSelector，它可以很好地工作，并且不会不必要地重新渲染：
*** Modal.tsx ***
const { isModalOpen } = useSelector((state: RootState) => state.carsSlice); // Works great. No unnecessary re-renders
如果我创建一个钩子来返回carsSlice，那么它就会不必要地重新呈现整个页面。为什么？
例如，
*** StateHooks.ts ***
浏览 0提问于2021-02-22得票数 2
1回答
由于某些原因，当尝试连接此组件时，react只是挂起而不会给出任何错误： import React, { useState, useEffect } from 'react';
import { useHttp } from '../../hooks/http.hooks';
import _ from 'lodash';
import profileImg from '../../img/system/profile/profileImg.svg';
function ProfileLink() {
const
浏览 17提问于2021-04-03得票数 1
回答已采纳
我是新的反应-本地应用程序开发。
我试图理解为什么动画停止工作，如果我不评论第11行setTest(false)的链接博览会小吃。
谢谢!
相关代码副本：
export default function App() {
const element1 = useRef(new Animated.ValueXY()).current;
const element2 = new Animated.ValueXY();
const [test, setTest] = useState(true);
useEffect(() => {
// setTest(false)
浏览 3提问于2020-11-02得票数 0
回答已采纳
我仔细阅读了文档，了解到如果需要前一个状态，可以将一个setState函数传递给一个函数。
在这里，我试图根据一个变量的状态，设置另一个变量的状态。这在逻辑上对我来说似乎是正确的，但就是感觉很奇怪。寻找一个人来检查它是否正常。
export default function Comp(props) {
const [command, setCommand] = useState("");
const [items, setItems] = useState(allowedTags);
useEffect(() => {
setCommand(
浏览 0提问于2021-10-17得票数 0
2回答
我目前正在构建一个与TypeScript反应的web应用程序。我正在尝试获取一个定制的API。然而，他们中的许多人正在回归。在将它们存储在状态后，如何访问整个API来对它们进行过滤？
import React, { useEffect, useState } from "react";
import axios from "axios";
interface Invoice {
id: number;
customer_id: number;
customer_name: string;
date: string;
total_invoic
浏览 2提问于2021-06-29得票数 1
回答已采纳
2回答
我在使用redux saga和redux工具包。在EachUser组件中，如果不使用useEffect钩子，我就不明白为什么组件会一次又一次地挂载。谁能帮我弄明白为什么。
我不会改变任何道具或状态，所以我不认为无限循环应该发生，但它正在发生。
下面是指向我的代码沙箱的链接：
浏览 1提问于2021-05-07得票数 0
回答已采纳
1回答
函数后的数组
、、
你好，我的新的反应有时我发现有数组后的一个函数，我试图找到它的使用，可以解释它的使用，或提供一个链接的文档将是有帮助的。谢谢
这是代码的示例
export const PostsList = () => {
const {
data: posts = [],
isLoading,
isSuccess,
isError,
error
} = useGetPostsQuery()
const sortedPosts = useMemo(() => {
const sortedPos
浏览 5提问于2021-12-20得票数 0
回答已采纳
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
回答已采纳
为什么由useRef钩子返回的对象存储它应该在current属性中保存的值？为什么我们不能直接给ref对象赋值，如下所示：
const sampleRef = useRef([]);
/** why can't we do this... */
sampleRef.push('1');
/** ...instead of this? Why an extra `current` object? */
sampleRef.current.pus('1');
使用current属性返回包装在另一个对象中的参数时，useRef的作用是什么？
浏览 1提问于2019-12-15得票数 4
我有两个组件渲染不同的用户界面基于用户类型。这两个组件在从api获取数据、连接到存储的逻辑上几乎有50%的相似性。 我试过了，通过创建自定义钩子重用了登录。 const { products, loading} = useFetchProducts(userId); 现在我可以定义一个useFetchProducts reducer const useFetchProducts= (userId) => {
const [ loading, setLoading ] = useState(false);
const [ products, setProducts ] =
浏览 8提问于2019-06-12得票数 0
我有一个父组件和子组件。
在子组件中，输入字段发生了更改，我想让父组件知道这一更改。所以我现在的做法是这样的。
//parent component
const [text, setText] = useState<any>('');
<childComponent :text={text} :setText={setText} />
//child component
export const childComponent: React.FC<childComponent> = ({
text,
setText
}) =>
浏览 38提问于2021-05-17得票数 0
回答已采纳
在我的自定义钩子中使用状态时，我会得到一个无效的钩子调用错误。这是我的密码
import { useState } from 'react';
export default function useFetch() {
const [randomValue, setRandomValue] = useState<number>();
setRandomValue(3);
return randomValue;
}
钩子位于路径上的钩子文件夹中：./src/hooks
有什么理由吗？
浏览 1提问于2021-05-28得票数 0
回答已采纳
希望你能澄清这个问题：
I有父组件：
function App() {
const [ thanks, setThanks ] = useState(null);
const thankerHandler=(value)=>{
setThanks(value)
}
**//in the return**
<Route component={PaymentPage} thankerHandler={thankerHandler} path="/payment" />```
和子组件:
const PaymentPage=({thankerHandl
浏览 5提问于2020-07-12得票数 1
回答已采纳
我正在if条件中更新我的nudgeList状态。如果条件为true，我将一些对象插入到我的空状态数组中 const [avgOrderCount, setAvgOrderCount] = useState('')
const [productCategory, setProductCategory] = useState('')
const [ecoPackage, setEcoPackage] = useState('')
const [domesticDelivery, setDomesticDelivery] = useS
浏览 69提问于2021-05-11得票数 0
回答已采纳
1回答
我已经看过许多redux的示例代码，并发现我们使用useSelector的方式主要有两种。
nested
import React from 'react'
import { useSelector } from 'react-redux'
export const UserComponent = () => {
const name = useSelector((state) => state.user.name)
const age = useSelector((state) =>
浏览 0提问于2021-06-02得票数 1
我正在尝试构建一个react组件，它显示一个基于API响应的随机数。但是我注意到显示的数字是无限重呈现的，当我检查服务器控制台时，它会收到来自react的无限请求。如何解决这个问题？我使用react状态来显示数字。
API randomnumber.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function (req, res, next) {
let randomNumber = Ma
浏览 4提问于2022-10-31得票数 0
1回答
我有下面的react组件，它根据购物车中的项从mongodb集合中移除产品。当我运行代码时，我会得到这个错误：
构成部分：
function AddOrder() {
const d = new Date();
let text = d.toString();
const { currentUser } = useContext(AuthContext);
const { data, loading, error } = useQuery(queries.GET_USER_BY_ID, {
fetchPolicy: "network-
浏览 2提问于2022-05-06得票数 0
回答已采纳
在这个reactjs文档中，关于自定义钩子的例子
import React, { useState, useEffect } from 'react';
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscr
浏览 1提问于2019-12-05得票数 1
回答已采纳
我有一个简化的react结构，如下所示，我希望MyGrandChildComponent基于对MyParentComponent的'list‘属性的更改来重新呈现。我可以看到这个列表在MyParentComponent和MyChildComponent中有了新的值。然而，它甚至没有命中MyGrandChildComponent的返回函数。我是不是漏掉了什么？ const MyGrandChildComponent = (props) => {
return (
<div>props.list.listName</div>
浏览 28提问于2020-06-10得票数 0
回答已采纳
我有一个，它呈现包含段落的JSX、库的下拉列表和Nivo库的线条图。
当我第一次呈现组件时，我有一个useEffect钩子，它帮助我从后端检索数据，列表。数据根据模式值从后端返回。
此模式可以是：
year月week
我有一个useState，const [mode, setMode] = useState("week")。
Select下拉列表有帮助我设置新模式的onChange事件侦听器
setMode(e.value) -可以是week，month或
当我设置一个新模式时，它返回到后端，并用数据检索一个新列表。
我的问题是：
I从下拉 mode重新呈现中选择一个新值，并
浏览 6提问于2020-02-09得票数 0
1回答
我正在使用axios向react中的端点发送POST请求，如果我返回的响应成功，我将设置一些状态。
下面是我的代码：
axios.post('/some/endpoint', {mydata})
.then(res => {
console.log(res.data);
if(res.data.success)
{
setMsg('successful');
setActive('alert alert-success fade-
浏览 0提问于2021-09-24得票数 0
我在使用Firebase方面非常缺乏经验，如果有些代码是愚蠢的，那么事先很抱歉。
我正在尝试从一个实时的防火墙数据库中呈现数据。当我试图将数据传递给useState常量时，当尝试console.log useState变量时，它会返回一个空数组，就会出现问题。
这是我使用的代码：
import { StyleSheet, Text, View } from "react-native";
import Contador from "../components/Partida/Contador";
import { database } from "../
浏览 5提问于2022-11-24得票数 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
3回答
我有一个对象作为一个有一些属性的状态。我想在带有钩子的情况下更新状态。但它会导致无限循环。
我可以像这样直接更新状态吗？
const [info, setInfo] = useState({name: '' })
if (info.name === '') {
info.name = 'empty'
}
这样可以吗？
浏览 6提问于2020-09-28得票数 0
回答已采纳
我只是不明白，在list.vue中，我只触发一个异步改变updated钩子中state.list的list操作。items是一个只依赖于state.list的计算属性。为什么这会导致无限的更新事件？
我发现，如果我将updated钩子中的代码移动到watch选项中，如下所示：
watch: {
'$route': function () {
this.$store.dispatch('list')
},
},
无限的问题就会消失。但这将在每次监视updated更改时触发两次$route钩子，我也不知道为什么。
来了。相关代码
// main.j
浏览 1提问于2017-07-11得票数 0
回答已采纳
我有一个钩子useSingleValueChartData，它接收数据数组(“目标注册”)并进行计算。我在不同的组件中使用钩子，如下所示：
SleepContainer.ts
import React, { FC, useContext } from 'react'
import SleepDetails from './layout'
import { SingleValueChartData } from 'models/ChartData'
import { appContext } from 'contexts/appContex
浏览 1提问于2019-10-29得票数 0
1回答
我添加了redux来创建-react，并且我一直试图让一个导航器工作。我是通过突出显示活动的“页面链接”来做到这一点的。我使用的代码是react (使用状态来记住当前页面)和npm包classNames的组合。
classNames(object‘’key‘& classes.activeItem)
因此，在激活特定项时，我有对象‘’key‘求值为true，以便项目获得activeItem类。
当我将对象‘’key‘替换为true时，它就有效了。当我单击console.log对象‘’key‘后，它的计算结果也为true。
为什么这不管用？谢谢!
import React, { useE
浏览 0提问于2019-06-07得票数 1
回答已采纳
在第一个文件中(抱歉没有重构代码)
有带有useRef()值的数组，
除以下情况外，还对其作了更新：
const [refsArr, setRefsArr] = useState([]);
useEffect(() => {
setRefsArr([
{ fromAddress },
{ fromCity },
{ fromPC },
{ fromCountry },
{ toCName },
{ toAddress },
{ toCity },
{ toPC },
{
浏览 2提问于2021-11-26得票数 0
回答已采纳
这是一个经典的菜单案例，单击一个按钮即可打开，如果没有活动，则在5秒内隐藏。我们有两个状态变量。打开和激活，对应于两种不同的状态=菜单打开，激活(正在使用)。我使用按钮单击来设置open变量，然后实际上我启动了5秒超时。现在，如果用户将鼠标移到菜单上，我将active属性设置为true，并尝试清除超时。但这是行不通的。这意味着，在应该清除超时变量的代码中，超时变量始终为空。 下面是一些代码，可以帮助您理解： let [open, openMenu] = useState(false)
let [active, activateMenu] = useState(false)
let time
浏览 30提问于2020-10-21得票数 2
回答已采纳
2回答
const [input, setInput] = useState("");
const [searchedProducts, setSearchedProducts] = useState(products);
const inputChange = (e) => {
setInput(e.target.value);
};
if (input) {
let newProducts =
products &&
products.filter(function (el) {
retu
浏览 1提问于2021-08-26得票数 0
我试图在useSelector中使用一个useSelector。是否有任何限制或良好的编码做法禁止使用它？
const { items } = useSelector((state: any) => ({
items: state.appReducer.items.map((item: any) => {
return { itemID: item.id, itemDescription: item.desc }
})
}))
浏览 0提问于2021-10-18得票数 0
回答已采纳
当可观察到的更新时，Mobx @observer组件是否会在该组件上触发render或forceUpdate？当它发生时，会触发哪些生命周期方法？render和forceUpdate有什么区别吗？
即使在render方法中，子对象如何保持不变？React或Mobx是否负责检测何时将道具传递给子对象并需要重新渲染？
谢谢!
浏览 2提问于2017-03-27得票数 3
我试图在特定的url中更改文本值。所以我尝试使用useState()，但是我得到了这个错误。
react-dom.development.js:16317 Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
如何解决此问题并更改特定URL上的值？下面给你看我的代码。
import React,{useState} from 'react';
import Form from 'react-bootstrap/Form
浏览 6提问于2022-07-25得票数 0
回答已采纳
2回答
我有一个在两个不同页面中呈现的react组件，我希望每个页面都有不同的css。因此，我向它传递了一个在css类之间切换的prop，但是，因为在两个页面之间没有页面刷新，所以我的组件不会更改css类，只有当我手动刷新页面时，我的组件才会看到我传递的prop并更改css类。谁能告诉我如何在页面更改时重新渲染组件？即使没有页面刷新？到目前为止，我尝试使用componentDidUpdate更改组件的状态，但最终在无限循环中重新呈现，并且页面不再加载。 有没有其他方法可以做到这一点？
浏览 118提问于2021-04-07得票数 0
回答已采纳
融合问题:我想用合并代码更新onAfterAction钩子中的集合(pages=集合名称)：
var document = pages.findOne({page: "stats"})._id;
console.log(document);
var counter = pages.findOne({_id: document}).counter + 1;
console.log(counter);
pages.update(document, { $set: { counter: counter },});
在这里，整个路线：
Router.route('/stats
浏览 2提问于2016-05-13得票数 1
回答已采纳
我目前正在尝试传入一个用于正向地理编码的位置，但我不知道为什么我的调用似乎会触发无限循环。 我尝试使用地图传入位置，然后在代码中的其他地方使用来自API的响应。 这是我的数据提供者..。 import React, {
useEffect,
useState
} from "react"
export const GeoCodeContext = React.createContext()
export const GeoCodeProvider = (props) => {
const [latLong, setLatLong] = useState(
浏览 11提问于2020-09-23得票数 0
回答已采纳
如何解决以下问题？：
对于primereact datatable，我使用react挂钩。当我试图在类似于useEffect的axios调用中使用axios调用(下面代码中注释掉了代码的一部分)中时，我一直得到以下错误：
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of
浏览 3提问于2021-05-11得票数 1
我是新来的。我知道UseEffect对于保持相关数据的同步非常有用。
示例1：
下面的代码更新了、calendarDate、和inputDate，无论什么时候更新道具rawDateInput。
const DATE_FORMAT = 'MM/DD/YY';
type Props = {
name: string;
label: string;
required?: boolean;
value?: Date | undefined;
readOnly?: boolean;
};
const DatePicker: FunctionCom
浏览 0提问于2021-04-23得票数 1
我试图用从映射到数组长度的输入字段中提供的值更新数组中的标题和正文对象。body对象完全更新，而标题只使用当前输入值进行更新。例如，如果我尝试输入"the“。
标题对象将更改为“：”t“=>”标题："h"“=>”标题："e“。
期望输出为"title：“t”=>“标题："th"”=>“标题："the”。
这对身体是有效的，所以我很困惑，为什么它不是与标题有关，也许我错过了什么。
export const NewsArticlesPage = () => {
const [newsArticles
浏览 3提问于2021-04-28得票数 0
即使依赖数组有常量对象，useEffect也会被触发。
我尝试提取逻辑并将对象放在useState中
const payload = {
limit: 5,
offset: 0,
filterBy: 'All',
};
useEffect(() => {
const defaultPayload = {
limit: 10,
offset: 0,
filterBy: 'All',
};
dispatch({ type: RANDOM_CONST, pa
浏览 4提问于2019-10-31得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
