如何防止使用useState的React const的reRender
使用useState的React const的reRender是指在React组件中使用useState钩子来管理状态，并使用常量作为初始状态的一种方式。在使用这种方式时，避免不必要的重新渲染是很重要的，可以采取以下几种方法来防止重新渲染：
- 使用useMemo：useMemo是React提供的一个钩子，它可以用于缓存计算结果。通过将常量作为依赖项传递给useMemo，可以确保只有当依赖项发生变化时才重新计算常量，避免不必要的重新渲染。例如：
const constantValue = useMemo(() => {
// 计算常量的逻辑
return value;
}, []);- 使用useCallback：useCallback是React提供的一个钩子，用于缓存函数。当使用useState的常量作为回调函数时，可以使用useCallback来确保只有当依赖项发生变化时才重新创建回调函数，避免不必要的重新渲染。例如：
const handleClick = useCallback(() => {
// 处理点击事件的逻辑
}, []);- 使用React.memo：React.memo是一个高阶组件，用于包装函数组件。通过将函数组件包装在React.memo中，可以对组件进行浅比较，只有当组件的props发生变化时才重新渲染。例如：
const MyComponent = React.memo(({ constantValue }) => {
// 组件的渲染逻辑
});- 避免在组件渲染期间创建新的函数或对象：在组件的render方法中创建新的函数或对象会导致组件的props发生变化，从而触发重新渲染。可以通过将这些函数或对象移到组件外部来避免不必要的重新渲染。
- 使用shouldComponentUpdate（对于类组件）：如果使用类组件而不是函数组件，则可以重写shouldComponentUpdate方法来手动控制组件的重新渲染。在shouldComponentUpdate方法中，可以根据需要判断是否需要重新渲染组件。
这些方法可以帮助我们防止不必要的重新渲染，提高React应用的性能和效率。
在腾讯云相关产品中，可以使用云函数SCF（Serverless Cloud Function）来实现无服务器的函数计算，以减少不必要的资源消耗和优化性能。具体产品介绍和使用方法，请参考腾讯云SCF官方文档：https://cloud.tencent.com/product/scf
相关·内容
我跟随着瑞恩·弗洛伦斯的 (混音和ReactTraining.com的创建者)。在那里，他做了一个自己的useState钩子，使其半身化。
我遵循了这个过程，并在一个组件中实现了这一点。
import React from 'react'
import ReactDOM from 'react-dom';
function MadeUseStateMyself() {
const [minutes,setMinutes] = useState(5)
const [error,setError] = useState(null)
const
浏览 4提问于2022-02-23得票数 2
回答已采纳
我有一个定制的钩子，其中包括一个参考资料。如何正确地测试这样的钩子，以及如何模拟useRef()？
const useCustomHook = (
ref: () => React.RefObject<Iref>
): {
initializedRef: boolean
} => {
const [initializedRef, setInitializedRef] = useState<boolean>(false)
useEffect(() => {
if (ref) {
const { current } =
浏览 5提问于2022-11-27得票数 0
我有一个问题，一个图像闪烁，因为它是无缘无故地呈现，尽管使用React.memo，尽管它的道具或状态不被改变。
我成功地使用了，正确地利用了React.memo，BUUUT，因为一个我不明白的原因，如果我在父组件中使用一个高阶组件，那么备忘录就不再工作了，我又遇到了闪烁的问题。
。
以下是代码：
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
let interval = null
const Icon = ({ name }) =&
浏览 2提问于2020-05-06得票数 0
回答已采纳
1回答
组件im试图从以下位置reRender配置文件组件：
import React from 'react'
import {useContext} from "react"
import { UserNameContext } from '../App'
import PersonIcon from '@mui/icons-material/Person';
import { useNavigate } from 'react-router-dom';
import &
浏览 4提问于2022-03-26得票数 1
我有一个图标组件，它绘制一个图标，它是闪烁的，因为父程序使它成为一个无意义的重发器。我不明白为什么会发生这种事，也不明白如何防止这种情况发生。
显示问题的。
我们用一个setInterval来模拟父更改。
我们通过在控制台中记录“rerender”来模拟图标重命名。
以下是代码：
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
// or any pure javascript modules available in npm
let
浏览 2提问于2020-05-06得票数 2
回答已采纳
出于某种原因，每当我在React项目中使用这个按钮时，我需要按两次按钮才能将文本从“再见”更改为"Hello“，而不是反过来。
import { useState } from 'react'
const ChangeTextButton = () => {
const [buttonText, setButtonText] = useState("Click me!")
var changedBefore = false;
function changeText() {
if (c
浏览 5提问于2022-04-21得票数 0
回答已采纳
我正在用Jest测试我的自定义钩子，并使用React测试库。
在自定义钩子测试中，我试图更改状态值并对其进行测试，但它与初始值不同。
我将用例子详细解释它。
首先，看看我的自定义钩子和测试代码。
这是我的定制钩子。
自定义钩子
import * as React from 'react';
export const useCount = () => {
const [count, setCount] = React.useState(100);
const increment = () => {
console.log(count, 'i
浏览 2提问于2021-01-13得票数 1
回答已采纳
5回答
使用React钩子的标准方法如下：
const [count, setCount] = useState(0);
但是，这个const count变量显然将被重新分配到一个不同的原语值。
为什么变量没有定义为let count？
浏览 8提问于2019-11-14得票数 70
回答已采纳
我一直在努力寻找一种方法来构建一个可靠的、可重用的SearchBar组件。我试着为它做一个组件。然而，这个组件不能保持它自己的状态。这意味着您将有两个导入来使用此搜索栏。如下所示： import React, { useState } from 'react';
import SearchBar from './SearchBar';
const Parent = () => {
const [value, setValue] = useState("");
return (
<div>
浏览 9提问于2020-10-23得票数 0
当组件useState更新时，我希望在Home函数中从组件中获得相同的值，并且Home不应该重命名。
import { useState, useEffect } from "react";
function Component() {
const [count, setCount] = useState(0)
useEffect(() => {
console.log("rerender")
})
useEffect(() => {
let interval = setInterval(() => {
浏览 6提问于2022-11-10得票数 0
回答已采纳
我试图使用useState在map函数中向对象添加键值对。然而，在setContainer({...container, [data.pk]: data.name});的传播操作似乎是无效的。
下面的代码片段正好说明了我正试图解决的问题。实际上，在我的原始代码中，container是在另一个ContextProvider组件中声明并使用useContext引用的，但是为了简化起见，我用useState替换了它。
我想这与setState钩子的异步特性有关，但我不完全理解幕后发生了什么。
请让我知道是什么导致了这个问题，以及如何产生我期望的结果。谢谢。
const {useState, us
浏览 3提问于2020-06-26得票数 4
回答已采纳
1回答
我正在处理下面的代码。我原以为console.log会显示所选图片的网址。但它显示为空白。沙箱实现是
import React, {useState} from 'react';
import FormControl from "@material-ui/core/FormControl";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from
浏览 10提问于2019-07-05得票数 1
回答已采纳
我已经构建了一个自定义post钩子，它返回API响应和API post。我使用useCallback钩子来设置Response state
出错的地方是Package prop没有在useCallback钩子中更新。
当我在Package钩子之外记录useCallback时，我会在属性中获得正确的数据。但是，当我在Package prop钩子中记录useCallback时，Package的值不会改变。
不管我按了多少次按钮
--我尝试过创建一个order state，它每次更新Package prop时都会更新，但是每当我将Package设置为scope中的值时，就会得到一个无限循环。
我已经
浏览 3提问于2019-11-08得票数 6
回答已采纳
1回答
从中，我们知道反应钩子不能在一个条件下调用。我有一个定制的react钩子useRemoteData，我把它放在if(visible) return null语句之后。所以它违反了钩子的规则。
我希望RTL应该抛出无效的钩子调用警告。但事实并非如此。两个测试用例在没有任何警告的情况下通过了。
Eslint给出了正确的警告信息：
React "useRemoteData“是有条件的。在每个组件呈现中，必须以完全相同的顺序调用React。你是不是在早早回来后不小心叫了一个反应钩？
fn.tsx
import React from 'react';
import { u
浏览 6提问于2022-03-10得票数 1
import React, {useState, useEffect} from 'react';
const Test = ( {numar}) => {
const [likeStatus, setLikeStatus] = useState(true);
const [likeNumber, setLikeNumber] = useState(100);
const onLikeHandler = () => {
setLikeStatus(prevState => !prevState);
浏览 3提问于2022-07-01得票数 0
回答已采纳
import React, { useEffect, useState } from "react";
function logProps(WrappedComponent) {
return class extends React.Component {
componentDidUpdate(prevProps) {
console.log("inside componentDidUpdate");
}
componentDidMount() {
console.lo
浏览 0提问于2021-01-30得票数 3
回答已采纳
1回答
我正在尝试从收藏夹数组中获取所有对象，并将复选框设置为复选框，我已经在线检查并尝试使用localStorage，但是没有工作，刷新后值也没有保存。
会很感激你的帮助！
选定的图书部分：
import React, { useEffect, useState } from 'react';
import { bookService } from '../service/book.service';
export const SelectedBook = ({ selectedBook, setFavorites, favorites, removeFavorit
浏览 1提问于2022-02-12得票数 0
1回答
除非我弄错了，否则我相信我已经发现了@testing-library/react包如何触发重发程序(或者在本例中不是)的错误。我有一个密码箱，你可以在几秒钟内下载和复制：
作为这里的总结，我刚刚得到了一个redux存储，在组件中的装入false中的异步活动之后，我将一个布尔值从true切换到useEffect：
import React, { useEffect } from "react";
import { useAppDispatch } from "../hooks/useAppDispatch";
import { setMyCoolBoolean
浏览 2提问于2022-02-24得票数 1
回答已采纳
import React, { useState, useRef } from 'react';
import './ImageUpload.css';
const App = () => {
const [preview, setPreview] = useState();
const changedHandler = event => {
let files = event.target.files;
let reader;
let res = [];
for (var i = 0; i < fi
浏览 112提问于2020-08-03得票数 0
回答已采纳
我试图用从API.Basically中获得的数据对表进行排序，我想要的是根据单击的单元格对表进行升序或降序排序。要做到这一点，我已经创建了这段代码，但我做了一些错误的事情，但无法看到它。如果有人能给我指点我遇到麻烦的地方会很高兴的。每次运行应用程序：Too many re-renders. React limits the number of renders to prevent an infinite loop.时，我都会收到这样的错误消息
我有什么？
import React, { useState } from 'react';
import { Table } from
浏览 1提问于2020-05-23得票数 0
回答已采纳
2回答
我正在尝试在React中设置一个受控的contentEditable。每次我在div中编写一些内容时，组件都会重新呈现，并且光标/插入符号会跳回到开头。我试图通过将光标保存在onInput回调中来处理此问题： import { useState, useEffect, useRef, useLayoutEffect } from 'react'
function App() {
const [HTML, setHTML] = useState()
const [selectionRange, setSelectionRange] = useState()
浏览 44提问于2021-09-19得票数 0
回答已采纳
1回答
有人能解释一下const rerender = React.useState(0)[1]是什么吗？
import React from 'react'
import axios from 'axios'
import {
useQuery,
useQueryClient,
QueryClient,
QueryClientProvider,
} from "@tanstack/react-query"
import { ReactQueryDevtools } from "@tanstack/react-query-devt
浏览 8提问于2022-11-14得票数 1
1回答
我想做一个带有倒计时器的小测验应用。计时器使用use间隔，而测试有一个功能组件来回答问题。我已经为问题函数组件设置了react.memo。但它每一秒都会让人改道。它在桌面上工作得很好。但它在手机上闪烁，因为输入的答案保持重新聚焦。
import { useEffect, useState, memo } from 'react';
function Game() {
let interval;
const [timer, setTimer] = useState(180000);
useEffect(() => {
interval =
浏览 6提问于2022-10-09得票数 -1
我是新来的反应本地人。
我使用AsyncStorage成功地存储了“我的名字”，但是当我得到“我的名字”时，它不会显示在屏幕上。日志记录的结果顺序是"-“和”我的名字“，您可以检查下面的代码。
import React, { useState } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Text } from 'react-native';
let us
浏览 0提问于2021-09-03得票数 0
回答已采纳
我的问题与使react挂钩成为可能的Javascript机制有关。 React的最新发展让我们可以创建钩子，即。对于React状态，在如下这样的简单函数中： function App () {
const [someVar, setSomeVar] = useState('someVarDefaultValue');
return (
<div
onClick={() => setSomeVar('newValue')}>{someVar}
</div>
);
} 钩子useState返回
浏览 19提问于2018-12-22得票数 14
回答已采纳
1回答
反应状态和购物车的问题
、、、、
我已经为购物车定义了一些react上下文，我希望能够在每个子组件中访问它。我还定义了一些方法(从购物车中添加和删除)。我无法让addToCart函数工作：
import React, { useContext, useState } from "react";
const ShoppingCartContext = React.createContext();
export function useShoppingCart() {
return useContext(ShoppingCartContext);
}
export function ShoppingC
浏览 6提问于2021-12-13得票数 0
回答已采纳
3回答
我有一个名为useIsUserSubscribed的自定义钩子，它检查是否订阅了特定的用户。如果用户被订阅，则返回true，如果用户没有订阅，则返回false .
import { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import { checkSubscription } from "../services";
// this hook checks if the current user is subscribed to
浏览 7提问于2021-11-24得票数 0
回答已采纳
你好，我是ReactJs的新开发人员。我有一个关于useEffect渲染的问题。我有一个例子，我试图随着时间改变背景图像，但useEffect渲染了太多，我的背景图像随着时间循环。我只想改变我的图像的顺序，如bg1，bg2，bg3等，我如何解决这个无限渲染？ 我的示例.tsx import React, { useEffect, useState } from 'react';
import { connect } from "../../../store/store";
const LeftPart = (props: any) => {
浏览 8提问于2020-04-13得票数 0
回答已采纳
2回答
我有一个问题，我的UI在改变功能组件内部的状态后不能重新渲染，也许我错过了一些东西，但当你改变状态或道具时，它应该改变，也许是因为状态被传递给了另一个组件？ react - 16.13.1 react-native - 63 ( expo 42 ) const OrderMockData = [
{id: "1"},
];
const OrdersMockData = [
{id: "1"},
{id: "1"},
]
const OrderListSc
浏览 42提问于2021-09-25得票数 1
1回答
我真的是新的反应，我致力于一些挑战。我需要指出的是，除了功能之外，我自己做的大部分事情都是独立的，而不是对互联网有很大的依赖。我想知道我是否在代码结构方面做错了什么，是否有更好的方法来实现我所做的事情。
代码的目的是一种简单的注册表格，一步一步地验证。最后，它将完成并显示一个标题。
应用程序：
import "./App.css";
import Card from "./Card";
import React, { useState } from "react";
import UserInput from "./UserInput&#
浏览 0提问于2021-05-25得票数 3
根据和的问题，似乎用于更新useState钩子中管理的对象。
我创建了一个超级简单的示例并发现，即使对象的内容没有改变，也会触发重呈现(这很明显，因为对象更改了)：
import React from "react";
function useFriendStatus() {
const [person, setPersonProps] = React.useState({name:'Mark',age:23});
React.useEffect(() => {
console.log("rerender");
浏览 3提问于2020-03-22得票数 4
回答已采纳
我正在构建一个聊天应用程序，我有三个从父级到子级的主要组件：Chat.js、ChatLine.js、EditMessage.js。我在Chat组件中有一个函数Chat，需要传递给第二个子EditMessage，但是当我单击Edit按钮并开始键入时，它会导致每个ChatLine的重发。我不知道如何回忆录，所以它只会在我正在编辑的ChatLine上造成一个改进机。
只有当我将其传递给ChatLine时，它才能工作：
updateMessage={line.id === editingId ? updateMessage : null}
而不是：
updateMessage={updateMessa
浏览 15提问于2021-12-11得票数 1
回答已采纳
4回答
我有一个传递给flat-list的空数组。我还使用useEffect从服务器获取数据并更新列表。但是，在使用数据设置数组的新状态后，不会重新呈现flat-list。
const [listData, setlistData] = React.useState<Transaction[]>([])
const [dataUpdated, setDataUpdated] = React.useState<boolean>(false)
React.useEffect(() => {
if(route.params.showAllData)
{
浏览 0提问于2021-01-03得票数 2
1回答
我正在做一个项目，被塞进了上下文文件中。我希望我的状态planet是真的，这样我就可以在组件文件中使用它。在开始时，显示数组的正确索引就变成了真，但最终它变得没有定义。有人能指出到底是什么导致“行星”状态不明确吗？我说的是if语句- if (planet) {...}。我在浏览器控制台的上下文文件和屏幕上附加代码。如果有人也告诉我，如果我能在它自己的设置函数中改变状态的话，那就太好了，比如setPlanets(planet[0])。
import React from "react";
import { useState, useEffect } from "react
浏览 4提问于2021-11-04得票数 1
回答已采纳
我正在从enzyme迁移到react-testing-library。我有一个名为<ScrollToTop/>的组件，它只检查自上一次组件更新以来window.location是否发生了变化，如果有，则滚动到顶部。
ScrollToTop.jsx
import React from "react";
import { withRouter } from "react-router-dom";
export class UnwrappedScrollToTop extends React.Component {
componentDidUpdat
浏览 12提问于2022-05-25得票数 1
回答已采纳
编辑：我找到了一个解决方案，来自肯特C.多兹的。
只需将jest.advanceTimersByTime调用包装在act函数中即可。
所以这个：
jest.advanceTimersByTime(510);
变成：
act(()=>jest.advanceTimersByTime(510));
我实现了一个简单的自定义钩子，以消除值更新。
以下是代码：
function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() =&
浏览 0提问于2019-06-15得票数 3
我使用react钩子。如果改变了道具，有什么方法可以得到初始值？我想避免反模式效应。
情形1:在构建DOM之前。
据我所知，出于这些目的，fit useMemo.if还有其他选项可以展示。
情景2:在DOM之后
在这个变体useLayoutEffect中，useEffect.if还有其他选项，你可以展示给他们看。
import React, { useState, useMemo, useLayoutEffect, useEffect } from "react";
import ReactDOM from "react-dom";
import ".
浏览 5提问于2019-07-17得票数 2
1回答
我正试着做一个数独的解算者。我有一个父组件Board和一个子组件Possible，它显示了板中任何框的可用选项。我通过了董事会的状态，selected(在董事会中选定的框位置)和功能，更新板作为道具。但是，当我尝试将board从Possible中更改时，它不会改变，除非从父组件中更改所选的框selected。我正在尝试从子组件中更改board元素。
这是我的Board组件。
import React, { useState } from 'react';
import Possibles from './avails.jsx';
import solve, {
浏览 2提问于2022-05-30得票数 0
回答已采纳
这里是我在Reactjs函数中的代码：
const [reRender, setReRender] = React.useState(false);
let price = 10;
const changePrice = (value) => {
price = value;
console.log('price now', price);
setReRender(!reRender);
};
React.useEffect(() => {
console.log('re render happend');
浏览 1提问于2020-11-20得票数 0
2回答
我已经从‘@material/core’导入了导入{ Avatar }；来使用化身显示图像
const TheHeader = () => {
let _UsersId = localStorage.getItem("UsersId")
const classes = useStyles();
const [reRender, setRerender] = useState(false);
const [profilepic, setprofilepic] = useState();
const getProfile = async () =>
浏览 4提问于2021-10-22得票数 0
当testFn执行时，我正试图获得一个功能组件来强制重命名器。我想用state来做这件事(如果有更好的方法，那么请大声说出来)，这似乎成功地强迫了一个改进机，但只有两次，然后什么也没有。
我构建了一个简单的演示来模拟这个问题，因为使用我真正的应用程序太难演示了，但同样的原则应该适用(当函数执行并在页面上显示它时，我的真实演示将获取数据，但它不是重新绘制，我必须刷新页面以查看新的数据，因此我需要触发一个重发程序)。
import React, { useState } from "react";
const App = () => {
const [, rerende
浏览 0提问于2021-02-02得票数 2
回答已采纳
1回答
所以我做了这个axios测试，我得到了一个空的div，不知道为什么。
测试
import React from 'react';
import ReactDOM from 'react-dom';
import TestAxios from '../test_axios.js';
import {act, render, fireEvent, cleanup, waitForElement} from '@testing-library/react';
import axiosMock from "axios";
浏览 18提问于2019-07-08得票数 1
回答已采纳
我有以下代码：
import { StyleSheet, View, Text } from 'react-native';
import React, { useState, useEffect } from 'react';
const App = () => {
const [articles, setArticles] = useState([]);
const [loading, setLoading ] = useState(false);
setArticles([{"flight_number":110,"
浏览 6提问于2021-06-12得票数 0
回答已采纳
我登录了react，
import React, { Fragment, useState } from 'react';
import { useHistory } from "react-router-dom";
import { useDispatch } from 'react-redux';
import { Link } from 'react-router-dom';
import { auth } from '../actions';
export const Login = () =>
浏览 1提问于2020-06-02得票数 1
回答已采纳
2回答
我有一个搜索栏组件和一个目录组件。Catalog组件包含不同的卡片。根据在搜索栏组件的输入字段中键入的内容，我希望呈现不同的卡片。
为此，我需要能够将输入字段的值导入Catalog组件，在这个组件中，输入字段被传递到一个处理所有其余工作的搜索函数中。
我能够将值导入到Catalog组件中，但不幸的是，我不知道如何判断导入的值是否已更改，以便再次搜索？
我已经找到了一些方法在类中这样做，但我想用钩子代替。我对"useEffect“做了一些实验，但没有成功。
谢谢你的帮助!
这是我在搜索栏组件中的代码：
import React, { useState } from 'react&
浏览 3提问于2020-08-06得票数 1
回答已采纳
我玩弄着反应钩子，我遇到了一个我不明白的问题。
这里的代码是，示例有两个简单的组件：
应用程序组件
const App = () => {
const [num, setNum] = useState(0);
const [str, setStr] = useState();
const inc = () => {
setNum(num + 1);
setStr(num >= 5 ? ">= 5" : "< 5");
console.log(num);
};
const button
浏览 0提问于2019-08-18得票数 2
回答已采纳
我试图通过改变过渡道具中的持续时间值来减缓无限动画的速度。我正在使用useMotionValue钩子和动画函数：
const [count, setCount] = useState(1);
const scale = useMotionValue(1);
React.useEffect(() => {
// the [1, 2] is for [from, to]
const controls = animate(scale, [1, 2], {
repeat: Infinity,
ease: "linear",
duration:
浏览 1提问于2021-12-07得票数 1
回答已采纳
我学习javascript，react，我尝试计数从10到0，但不知怎么计时器只运行到9，我认为每n次我们设置的setInterval运行(n可以是1000 we，2000 we.)
这是代码
import "./styles.css";
import React, { useState } from "react";
export default function App() {
const [time, setTime] = useState(10);
const startCountDown = () => {
const coun
浏览 2提问于2022-02-01得票数 2
回答已采纳
React正在发出警告：
'someUnchangingArray‘数组使useEffect Hook (第42行)的依赖项在每次呈现时都发生变化。将其移动到useEffect回调中。或者，将'someUnchangingArray‘的初始化封装在它自己的useMemo() Hook react钩子/详尽-deps中。
为什么？someUnchangingArray是一个常量且不会改变，为什么render暗示它将在每次呈现时触发useEffect？
export default function Component(
const [initialized, setIni
浏览 2提问于2022-02-14得票数 0
我在react上下文中遇到了麻烦。特别是使用函数getProductCategory，我在第二个组件中使用它。我的React上下文提供程序如下所示：
import React, { createContext, useState, useEffect } from "react";
import data from "./data";
export const ProductContext = createContext();
const ProductContextProvider = ({ children }) => {
const [pro
浏览 0提问于2020-12-09得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
