React功能组件未使用相同的状态或道具重新渲染[重复]
在本例中，我将为子组件发送相同的道具和状态，所以。。。为什么在没有React.memo（）的情况下不重新渲染，而这些日志只显示一次？
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
const Child = ({ num }) => {
const [count, setCount] = useState(0);
return (
<>
{console.log('Child rendered')}
{count}<br />
{num}<br />
<button onClick={() => setCount(count)}>Add</button>
</>
)
}
const App = () => {
const [num, setNum] = useState(0);
return (
<>
{console.log('App rendered')}
<Child num={num} />
<button onClick={() => setNum(num)}>Add</button>
</>
)
}
ReactDOM.render(
<App />,
document.getElementById('root')
);共有2个答案
子组件不会重新加载，因为对num的状态引用从未更改。它总是设置为相同的参考。react使用浅引用相等来协调状态和属性更新。
const App = () => {
const [num, setNum] = useState(0);
return (
<>
{console.log('App rendered')}
<Child num={num} />
<button onClick={() => setNum(num)}>Add</button> // <-- same object reference
</>
)
}
您没有更改任何值
() => setNum(num)
是和一样的
() => setNum(0)
这与初始状态（0）相同，因此不会发生重新渲染
-
问题内容： 我正在尝试将表示性组件与容器组件分开。我有一个和一个。容器负责触发redux操作，以根据当前用户获取适当的网站。 问题是在最初呈现容器组件之后，异步获取了当前用户。这意味着容器组件不知道它需要重新执行其函数中的代码，该代码将更新数据以发送到。我认为我需要在其props（user）之一更改时重新渲染容器组件。如何正确执行此操作？ 问题答案： 您必须在方法中添加条件。 该示例用于比较对象。
-
<罢工> 是否存在这样的情况：父组件将新道具传递给子组件，导致子组件重新呈现，但这不是简单地由父组件重新呈现引起的？ 有没有可能看到这样一个例子：组件会因为接收到新的道具而重新呈现，而不是因为父组件正在重新呈现（或者它自己的状态改变了）？ 对不起，如果这是一个基本的问题，我是新的反应。
-
问题： 有异步路由，从中获取参数并返回（组件）。问题是当我从一个到另一个（只是相同的路由，但不同。参数）我的路由器卸载并重新渲染组件。但它应该只传递新的道具，不要触及我的组件生命周期。怎么解决呢？我做错了什么？ 代码： 路由器 组件将装入电影组件中 更新：好的，做了一些实验。 替换
-
我试图将表示组件与容器组件分开。我有一个和一个。容器负责触发redux操作，以基于当前用户获取适当的站点。 问题在于，在容器组件最初呈现之后，当前用户是异步获取的。这意味着容器组件不知道需要在其函数中重新执行代码，该函数将更新数据以发送到。我想当容器组件的一个道具（用户）发生变化时，我需要重新渲染它。如何正确地执行此操作？
-
我正在用反应原生构建一个项目。我有一个动态的玩家列表，我希望用户能够编辑。 我想实现的是： 用户输入名称 用户按enter键 我们称之为addPlayer，它添加一个播放器 新的输入出现并得到关注（通过其他功能） 我得到的是: < li >用户输入姓名 < li >用户按enter键 < li >我们调用addPlayer来添加播放器 < li >键盘开始关闭一会儿，然后在新输入出现时重新打开。
-
我有一个基于url的react组件，它应该导入一些数据，然后在另一个子组件中显示。当页面首次加载时，它将初始数据作为组件状态加载到中。至于进一步的url更改，它们将在export default class Info（）中处理。组成部分{ 我的问题是，尽管switch语句中有状态更新，但组件不会重新渲染。我不知道我的方法有什么问题。有人能帮我吗？谢谢 编辑：这是使用而不是的代码：