React JS - useState重新渲染过多
React JS是一个用于构建用户界面的JavaScript库。它采用了组件化的开发模式，使得开发者可以将界面拆分成独立的、可复用的组件，从而提高代码的可维护性和重用性。
useState是React提供的一个钩子函数，用于在函数组件中添加状态。它接受一个初始值作为参数，并返回一个包含当前状态值和更新状态值的数组。当状态值发生变化时，React会重新渲染组件。
当useState重新渲染过多时，可能会导致性能问题。这通常是由于频繁更新状态值引起的。为了解决这个问题，可以采取以下几种方法：
- 使用useMemo或useCallback：这两个钩子函数可以帮助我们缓存计算结果或函数，避免重复计算或创建。通过将计算逻辑或回调函数包裹在useMemo或useCallback中，可以确保只在依赖项发生变化时才重新计算或创建。
- 使用shouldComponentUpdate或React.memo：如果组件的渲染依赖于状态值的变化，可以通过shouldComponentUpdate（类组件）或React.memo（函数组件）来控制是否重新渲染。这些方法可以比较前后状态值的差异，只有在差异存在时才重新渲染组件。
- 对状态值进行合并：如果多个状态值的更新频率较高，可以考虑将它们合并成一个复合状态值，从而减少更新的次数。这样可以避免过多的重新渲染。
- 使用React的性能工具：React提供了一些性能工具，如React Profiler和React DevTools，可以帮助我们分析组件的渲染性能，并找出性能瓶颈所在。通过使用这些工具，可以更好地优化组件的渲染过程。
推荐的腾讯云相关产品：腾讯云函数（SCF）是一种事件驱动的无服务器计算服务，可以帮助开发者在云端运行代码而无需搭建和管理服务器。使用腾讯云函数可以将React应用部署在云端，并根据实际需求自动伸缩，从而提高应用的性能和可靠性。
腾讯云函数产品介绍链接：https://cloud.tencent.com/product/scf
相关·内容
1回答
性能-函数组件中的函数
javascript、reactjs、performance
当函数组件具有内部函数时，我对性能有一些疑问。
当有一个带有内部函数的函数组件时，该内部函数是否会在每次渲染时反复重新创建？在这种情况下，如果我用React.memo()对组件进行记忆，那么该函数也会被记忆吗？
下面是我所指的一个虚拟示例：
const MyComponent = React.memo(({genre, name}) => {
const someFunction = genre => {
return (genre === 'male') ? 'Mr.' : 'Ms.';
}
浏览 0提问于2019-09-11得票数 3
1回答
为什么react在输入更改时重新呈现函数组件中的所有元素
reactjs、react-hooks
我正在尝试理解如何停止在函数组件中重新呈现元素(或者我可能不需要这样做?) 我对所有输入使用单个useState，并共享相同的onChange处理程序。 我在表单(100+)中有大量的输入字段，每当我在开发工具分析器中输入其中任何一个时，我都会看到它们都被重新渲染，假设这是因为在每次渲染时，我的onChange处理程序都被“重新创建”，所有输入元素也都被重新渲染。如果我尝试将其包装在useCallback中，没有任何变化，但是如果我将输入元素包装在Rect.memo组件中，那么它不会重新呈现。 const MyInput = props => {
return <in
浏览 20提问于2020-03-30得票数 2
回答已采纳
2回答
是什么使React.memo在防止呈现方面不可靠？
reactjs
在中，它说：
该方法仅作为性能优化存在。不要依赖它来“防止”渲染，因为这会导致错误。
我不太明白这个警告。为何不能依赖它呢？如果它不一定阻止呈现，它如何是一个优化？
我希望他们在这里更深入，但既然没有，有人能详细说明这一点吗？事实上，我根本不愿意使用它，因为这个警告使得它的行为看起来非常不清楚。
浏览 2提问于2019-03-26得票数 14
回答已采纳
1回答
是否反应从React.memo转向了useMemo？
reactjs、react-hooks、react-memo、react-usememo
React.memo和useMemo钩子都允许通过减少重新计算和重命名来优化性能。但是，它们确实起作用，因为React.memo用于包装一个函数组件，useMemo钩子几乎可以用于任何函数，甚至是纯计算。更重要的是，useMemo通常从父组件调用到子组件，而React.memo通常在子组件本身的声明中被调用。
虽然两者都有不同的优势，但React.memo的一个优点是，不必从每个父级调用到子级关系。然而，随着钩子的释放，显然，React开发希望转向使用钩子来处理状态、副作用事件和其他影响的功能组件。虽然我不认为会有勇气或无视他们的用户群在未来2年内随时删除React.memo，但这让我怀疑他们
浏览 1提问于2020-04-18得票数 3
4回答
因为功能而重新渲染的孩子？
reactjs、typescript、draftjs
我在导航这些概念时遇到了困难，因为我从父函数中传递了一个函数，因此一个子函数一直在重新呈现。此父函数引用编辑器的值draftjs。
function Parent() {
const [doSomethingValue, setDoSomethingValue] = React.useState("");
const [editorState, setEditorState] = React.useState(
EditorState.createEmpty()
);
const editorRef = useRef<HT
浏览 0提问于2020-05-01得票数 1
回答已采纳
5回答
如果家长使用钩子重新命名，则防止重新进行子级重命名
react-native、react-hooks、memoization、use-reducer、react-memo
我的bestSellerDummy数据不会改变，所以我希望防止相同的产品子程序被重新命名，如果父重命名器。我尝试过在父母中使用useMemo，在子中使用React.memo，但是没有成功，它仍然显示日志“呈现产品组件”。每次父母改换。我在这里错过了什么？请指点。
注意:每次我在Product中调用addToCart函数(of CartContext)时，都会对父函数进行重命名。
我正在使用CartContext，可能与此相关，我不确定。下面是沙箱：
Home.tsx
const [bestSellerDummy] = useState(
[...new Array(5)].map((ite
浏览 7提问于2020-11-15得票数 4
回答已采纳
7回答
如何避免子组件的重呈现
reactjs
我有一个无法修复的渲染问题。在我的应用程序中，我有一个Posts组件，它的状态包含一个posts数据数组。
[
{ id: "P01", title: "First post", likeCount: 0 },
{ id: "P02", title: "Second post", likeCount: 0 }
]
在这个组件中，我映射posts状态以返回post状态内每个post的Post组件。
员额构成部分
export default function Posts() {
const [posts, setPost
浏览 4提问于2020-08-07得票数 3
回答已采纳
1回答
类组件内部呈现的箭头函数还是函数组件？性能明智
javascript、reactjs
如果在function类组件中声明箭头函数不利于性能，为什么在函数组件中声明变量(箭头函数)具有更好的性能？
现在的反应方式正在转向只使用功能组件的整个应用程序，对于那些拥有长组件树的大型应用程序，这些应用程序的每个更新都会重新声明大量的变量，这难道不存在性能问题吗？(我知道有些是垃圾收集的，但声明仍然发生，就像在类组件的呈现函数中使用箭头函数一样)
class ReactComponent extends React.Component {
render() {
return (
<div onClick={() => consol
浏览 2提问于2020-05-10得票数 4
回答已采纳
2回答
没有更改，但重新呈现
reactjs
import React, { useState, useEffect } from 'react';
const Test = () => {
const [ count, setCount ] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Count up!</button>
<ChildComponent />
浏览 11提问于2019-12-19得票数 0
1回答
怎么可能更换临时的，只调用它一次，而只是改变道具？
javascript、reactjs、typescript
我有一个标题更高的组件为我的项目，已经使用了几次，它的道具(如是否应该显示标题链接是否应该显示)已经确定每次。我的目标是只叫它一次，如果有必要的话，不要使用临时的。如何为每个组件设置道具？
这是我的特例：
import React from 'react'
import { Header } from '@@ting/molecules/Header'
export type WithHeaderProps = { showLinks?: boolean
hideOnScrollUp?: boolean stickyTransparent?: b
浏览 1提问于2021-07-12得票数 0
回答已采纳
2回答
如何在功能组件中编写处理程序和其他函数
reactjs、react-hooks
我有一个功能组件(它以前是基于类的，但我决定用react钩子重构它)。因此，现在在内部声明的每个函数都将在每个重新渲染器上声明(在本例中为handleClick)。当它是基于类的组件时，不存在这样的问题，因为函数存储在类属性中。所以，我的问题是，这些函数属于哪里？
之前：
class Select extends Component {
constructor(props) {
super(props)
state ={
value: props.value
}
}
render() {
re
浏览 0提问于2019-05-23得票数 1
2回答
React重新渲染列表
javascript、reactjs
我有一个react页面，上面有几个组件，其中一个状态显示了一个模式。我不希望应用程序中的所有组件在模式显示时重新渲染。
const CustomersPage = () => {
const [showModal, setShowModal] = useState(false);
const dataSource = [...omitted data]
return (
<>
<Modal
visible={showModal} />
<div>
<div>
浏览 1提问于2021-01-07得票数 0
1回答
为什么react窗口会在每个useState事件上重新呈现列表？
reactjs、react-window
我不明白为什么react窗口会在每个(所有) useState events上重新呈现列表，这些值甚至没有连接到列表本身。请有人解释一下，这是如何内部联系，我如何可以避免那些重新渲染？
import React, { useState } from "react";
import { FixedSizeList, areEqual } from "react-window";
function App() {
const [count, setCount] = useState(0);
const handleOnClick = ()
浏览 1提问于2021-10-07得票数 1
回答已采纳
3回答
React Hooks - useCallback性能
reactjs、react-hooks
我正在用React Hooks编写我的产品，是的，我是新手。
今天我有关于useCallback的数学，performance.This让我考虑了很多关于使用或不使用useCallback的问题。
让我们看一看。正如我们所知，使用useCallback是为了获得更好的性能。
function MainScreen() {
const [email, setEmail] = useState("");
const [pwd, setPwd] = useState(""):
const onAuthenticate = useCallback(() =
浏览 3提问于2019-12-11得票数 0
1回答
在没有useCallback的组件中使用React.memo有什么意义？
javascript、reactjs、react-hooks
举个例子：
const Child = () => {
console.log("I did re-render!");
return null;
};
const App = () => {
const [_, setValue] = useState();
const fn = useCallback(() => {
// do something
}, []);
return (
<div>
<button onClick={() => setValue(Math.rando
浏览 1提问于2022-03-09得票数 4
5回答
反应:使用或不使用useCallback的自定义获取钩子？
javascript、reactjs、react-hooks、fetch-api
我目前正在教自己如何反应，并偶然发现了以下使用fetch()方法的自定义钩子的代码片段。
import { useState, useEffect, useCallback } from "react";
import axios from "axios";
function useFetch(query, page) {
const [loading, setLoading] = useState(true);
const [error, setError] = useState(false);
const [list, setList] = u
浏览 12提问于2022-08-02得票数 2
6回答
也许我误解了什么，但是每次重呈现发生时，useCallback Hook都会运行。
我传递了输入--作为useCallback的第二个参数--不可更改的常量--但返回的回忆录回调仍然在每次呈现时运行我昂贵的计算(我很确定--您可以在下面的片段中自己检查)。
我已经将useCallback更改为useMemo --并且useMemo按预期工作--在传递的输入发生更改时运行。并且真正地回忆了那些昂贵的计算。
活生生的例子：
'use strict';
const { useState, useCallback, useMemo } = React;
const neverC
浏览 5提问于2019-03-02得票数 176
回答已采纳
2回答
useCallback是react应用程序的性能提升吗？
reactjs
谁能给我解释一下使用useMemo和useCallback是昂贵还是便宜？我检查了React的源代码，我认为它们的使用成本很低，但我也读到过一些人说它们不是。
在使用useCallback的Next.js上下文中
const MyComp = () => {
const router = useRouter():
const handleClick = useCallback(() => router.push('/some-path'), [router]);
return <button onClick={handleClick} />
浏览 2提问于2021-04-28得票数 0
1回答
如何让React.memo功能与孩子一起工作？
reactjs
我有一个无状态的函数组件<Sidebar/>，它只是在div中返回它的子组件。这个组件是由<App/>呈现的，它维护自己的状态，并将该状态的一个元素传递到它的一个子级中。
const Sidebar = React.memo(({children}) => {
return <div className='sidebar'>{children}</div>
})
const App = (props) => {
const [counter, setCounter] = useState(0);
setI
浏览 1提问于2020-05-26得票数 3
2回答
在功能组件的内部函数中调度操作
reactjs、react-redux、usecallback
我读到statefull functional component中的内部函数应该在我们使用setState时使用useCallback定义，否则该函数将作为prop传递给子组件。但是，如何调度操作呢？我们也需要在那里使用'useCallback‘吗？
import React from "react";
import { logout } from "../../../../actions/auth";
import { useDispatch } from "react-redux";
function Navbar (props)
浏览 1提问于2021-04-05得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
