为什么即使我使用了useCallback，子组件也会重新渲染？
即使使用了useCallback，子组件仍然会重新渲染的原因可能有以下几点：
- 父组件的状态变化：useCallback只能缓存函数的引用，而不是函数内部的变量。如果父组件的状态发生变化，即使使用了useCallback，父组件重新渲染时传递给子组件的props也会发生变化，从而导致子组件重新渲染。
- 子组件的依赖项变化：useCallback的第二个参数是一个依赖项数组，只有当依赖项发生变化时，才会重新创建函数。如果依赖项发生变化，即使使用了useCallback，子组件也会重新渲染。
- 父组件重新渲染：即使子组件使用了React.memo进行了优化，但如果父组件重新渲染，子组件也会重新渲染。
为了解决子组件重新渲染的问题，可以考虑以下几点：
- 使用React.memo进行子组件的优化，确保只有props发生变化时才重新渲染。
- 使用useMemo对子组件的props进行缓存，避免不必要的重新渲染。
- 检查父组件的状态变化是否会导致子组件重新渲染，如果是，可以考虑将状态提升到更高层级的组件中，避免不必要的重新渲染。
- 检查子组件的依赖项是否正确设置，确保只有必要的依赖项发生变化时才重新创建函数。
总结起来，即使使用了useCallback，子组件仍然会重新渲染的原因可能是父组件的状态变化、子组件的依赖项变化或父组件重新渲染。为了解决这个问题，可以使用React.memo、useMemo等进行优化，并检查依赖项的设置和状态的管理。
相关·内容
1回答
为什么react在输入更改时重新呈现函数组件中的所有元素
reactjs、react-hooks
我正在尝试理解如何停止在函数组件中重新呈现元素(或者我可能不需要这样做?) 我对所有输入使用单个useState，并共享相同的onChange处理程序。 我在表单(100+)中有大量的输入字段，每当我在开发工具分析器中输入其中任何一个时，我都会看到它们都被重新渲染，假设这是因为在每次渲染时，我的onChange处理程序都被“重新创建”，所有输入元素也都被重新渲染。如果我尝试将其包装在useCallback中，没有任何变化，但是如果我将输入元素包装在Rect.memo组件中，那么它不会重新呈现。 const MyInput = props => {
return <in
浏览 20提问于2020-03-30得票数 2
回答已采纳
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
1回答
如何优化子组件中的premitive和reference类型？
javascript、reactjs、components、react-props
我对备忘录和回调挂钩有疑问。
如果函数和数据属性都从父组件传递到子组件。如何使用纯组件优化类型。
浏览 8提问于2021-05-31得票数 0
1回答
React Hooks useCallback的简单示例有问题
reactjs、react-hooks
我正在尝试创建一个简单的示例，该示例遵循页的文档中的React Hooks示例
在没有useCallback的情况下，代码会按照本例中的方式查找：
import React, { useCallback } from "react";
function Test(props) {
function doSomething(a, b) {
console.log("doSomething called");
return a + b;
}
return (
<div>
{Array.from({ le
浏览 1提问于2019-03-01得票数 12
回答已采纳
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
2回答
反应钩：“`useCallback`”通常不需要吗？
reactjs、react-hooks、usecallback
我最近正在使用React重构一个web应用程序。我遇到了一个关于useCallback的问题。在描述Kent：的基础上，useCallback将相同的函数引用传递给子组件，避免了子组件的重呈现，从而提高了性能。但是，它与React.memo一起使用。正如肯特所说：
大多数情况下，您不应该费心优化不必要的RERENDERS。反应非常快，我可以为你想出很多事情来处理你的时间，这比优化这样的事情更好。事实上，需要优化我将要展示给你们的东西是非常罕见的，以至于我从来没有必要去做.
所以，我的问题是:我声称我们通常不需要使用useCallback是正确的吗？除非创建回调的代价很高，否则使用useCal
浏览 6提问于2019-10-30得票数 10
回答已采纳
1回答
在不重新渲染子组件的情况下反应父组件的setState
javascript、reactjs、react-hooks
我有一个父组件，它有一个状态变量，它的一个子组件在交互时会更改该变量。然后，父级还根据状态变量中的数据包含一些更多的组件。 问题是子组件会在其父组件的状态更改时重新呈现，这是因为对setState函数的引用发生了更改。但是当我使用useCallback (按照建议的here)时，我父母的状态根本不会更新。 这是我当前的设置： function ArtistGraphContainer() {
const [artistPopUps, setArtistPopUps] = useState([])
const addArtistPopUp = useCallback(
浏览 20提问于2021-09-13得票数 0
回答已采纳
4回答
React - Rerender on props change /动态更改css而无需重新渲染
javascript、css、reactjs
我要求在显示/隐藏导航时隐藏React应用程序上的页面内容。
为此，我们将一个道具传递给组件，并处理样式组件中的显示css，如下所示：
<PageContent isOpen={isOpen}>
const PageContent = styled.div`
display: ${props => (props.isOpen ? 'none' : 'block')};
`;
虽然这可以很好地工作，但当属性发生变化时，内部页面内容将重新呈现，这是预期的，但不是所需的。
在这种情况下，页面内容包括一些从API获取的内容，因此每次打开/关闭导航时
浏览 0提问于2020-08-07得票数 0
4回答
反应中的useCallback与useEffect
reactjs
当您将useEffect作为第二个参数传递给它依赖项时，它与useCallback之间有什么不同？
当依赖项作为第二个参数更改时，不是同时运行作为第一个参数传递的函数/代码吗？
根据我所读到的，这两个钩子的目的是不同的，但我的问题是，实际上它们是否可以互换使用，因为它们在功能上做了相同的事情
浏览 0提问于2021-06-29得票数 6
回答已采纳
2回答
函数在function呈现返回中创建，好的或坏的
javascript、reactjs、react-hooks
我被问到了这样的问题，比如，函数组件中的函数返回对象是好的还是坏的？
喜欢
export const Button = ({...props}) => {
const [isChecked, setIsChecked] = useState(false);
return (
<div
onClick={()=> setIsChecked(true)}>
<div>
...
</div>
</div&
浏览 0提问于2021-03-25得票数 1
回答已采纳
6回答
为什么在父级更改时会重新呈现子元素呢？
reactjs
如果父母重新呈现，反应中的孩子也会被重新呈现，不管传递的道具是否改变。
，为什么会这么做？如果当父母呈现时，如果不重新呈现子元素(没有更改的道具)，那么会有什么问题呢？
更新:我在分析器中谈到了这一点：
示例代码：
App.tsx：
import React, { useMemo, useState } from "react";
import "./App.css";
import { Item, MyList } from "./MyList";
function App() {
cons
浏览 8提问于2021-01-09得票数 15
3回答
即使道具没有改变，为什么react也要重新渲染组件呢？
javascript、reactjs
我已经使用react了一段时间，并阅读了文档，我发现了一些对我来说很奇怪的东西，为什么react重新渲染组件的子元素在父组件的每个状态更改上，即使子道具是相同的?？为什么我要把我的组件包装在Memo()中以防止这种重现呢？将Memo设置为每个react组件的默认设置，或者我是否应该对所有组件都使用它，并不是更好。
浏览 4提问于2021-04-22得票数 2
2回答
是什么使React.memo在防止呈现方面不可靠？
reactjs
在中，它说：
该方法仅作为性能优化存在。不要依赖它来“防止”渲染，因为这会导致错误。
我不太明白这个警告。为何不能依赖它呢？如果它不一定阻止呈现，它如何是一个优化？
我希望他们在这里更深入，但既然没有，有人能详细说明这一点吗？事实上，我根本不愿意使用它，因为这个警告使得它的行为看起来非常不清楚。
浏览 2提问于2019-03-26得票数 14
回答已采纳
1回答
useCallback:什么时候使用？是否存在任何缺点/性能问题？
javascript、reactjs、react-hooks、usecallback
有一些文章介绍了什么是useCallback以及在必要时如何使用它。但在一个大型项目中，很难理解何时开始使用它。那么，如果我在每个用例中都使用它，它会影响应用程序的性能吗？
浏览 2提问于2020-07-21得票数 1
2回答
React用于更改父组件从子组件的状态而不重新渲染所有子组件的最佳实践？
javascript、reactjs、performance、react-hooks、usecallback
我有一个项目，在这个项目中，我在文本字段中显示包含人员属性的卡片，用户可以编辑文本字段以直接更改该人员的属性值。然而，每次他们编辑文本字段时，都会导致所有卡片的重新渲染，这会降低应用程序的运行速度。下面是一个示例：
export default Parent() {
const [personList, setPersonList] = useState(/* list of person objects*/);
const modifyPerson(index, property, value) {
const newPersonList = _.cl
浏览 20提问于2021-03-07得票数 0
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
回答已采纳
2回答
当值相同时使用回调get
javascript、reactjs
我有一个组件，每当我移动鼠标时，他都会重新计算dom上垂直行的位置，光标的位置移动也会导致一些副作用，使上面的静态文本总是重新呈现。
为了防止这种情况，我尝试使用，使用回调钩子，如下所示：
const renderSection = useCallback(() => {
console.log('title: ', title);
return (
<Header>
<HeaderTitle>{title}</HeaderTitle>
</Header>
);
}, [title])
浏览 3提问于2020-01-09得票数 0
回答已采纳
5回答
React.useMemo不工作以防止重新呈现。
javascript、reactjs、typescript、react-hooks
我有以下简单的组件：
const Dashboard = () => {
const [{ data, loading, hasError, errors }] = useApiCall(true)
if (hasError) {
return null
}
return (
<Fragment>
<ActivityFeedTitle>
<ActivityFeed data={data} isLoading={loading} />
</Fragment>
)
}
e
浏览 1提问于2019-10-22得票数 4
4回答
React.js如何重新呈现组件？
reactjs
我是新来的。我在看他们的医生了解反应是如何运作的。因此，有人提到，当state/props/setState()更改/调用时，重新响应整个组件。
此外，我还看到react元素是不可变的，只有在发生更改时才会呈现它们。因此，当react试图呈现组件时，它实际上遍历所有元素，检查差异，并且只呈现数据被更改的元素。它不会简单地重新呈现整个组件。
我说得对吗？还是我的理解错了？
浏览 8提问于2020-10-23得票数 3
回答已采纳
2回答
为什么React.Memo()一直呈现我的组件
reactjs、react-hooks
为了更深入地了解React.Memo()，我做了一个例子。
我试图将一个字符串从parent传递给child。然后，除了第一个默认重定位之外，组件不会被出租。
但是，当我将array从parent传递给child时，组件会重新呈现。
那么，为什么组件在传递arrays和objects时保持重呈现，而在传递string时保持重呈现。
这与reference values和primitive values of javascript有关吗？
这是我想要做的事情的密码。
the parent
import Child from "./Child";
export default f
浏览 7提问于2022-07-19得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
