当前位置: 首页 > 面试题库 >

与基于类的方法相比,使用Hooks设置状态后重新渲染时,有什么区别?

邢晗日
2023-03-14
问题内容

类组件

在React类组件中,告诉我们setState 始终* 会导致重新渲染,无论状态是否实际更改为新值。实际上,当状态更新为之前的 相同
值时,组件 重新渲染。
*

Docs(setState API参考):

除非shouldComponentUpdate()返回false,否则setState()将始终导致重新渲染。

挂钩(功能组件)

但是,使用挂钩时,文档将更新状态指定为与先前状态相同的值, 不会 导致(子组件)重新呈现:

Docs(useState API参考):

摆脱状态更新

如果您将State Hook更新为与当前状态相同的值,React将在不渲染子级或激发效果的情况下纾困。(React使用Object.is比较算法。)

密切相关的问题

  1. this.setState即使新state值与以前的值相同,类中的组件始终会导致重新渲染是否正确?
  2. 在带有钩子的 功能组件中 ,如果值与先前值不同,setStatefrom useState仅会导致重新渲染是否正确state
  3. 类组件 的方法内部进行设置是否state带有钩子函数组件 的函数内部进行设置相同?this.setState``render state
  4. 以下正确吗?
    • 类组件中 ,如果我们staterender方法中进行设置,则会发生无限循环。这是因为 类组件 不在乎新state的与先前的相同state。它只是在每个上保持重新渲染this.setState
    • 但是,在 具有钩子函数组件 中,state在函数体内进行设置(render类组件中 的方法类似,在重新渲染时运行)将 不是 问题,因为当看到该 组件时功能组件 只是摆脱了重新渲染state与之前相同state

问题答案:

即使新状态值与以前的状态值相同,类组件中的this.setState总是导致重新渲染是否正确?

如果您在setState内设置了一个有效值,而不是返回null,则除非组件是PureComponent或实现了shouldComponentUpdate,否则始终会通过在类组件中进行反应来触发重新渲染

在带有钩子的函数组件中,仅当状态值与先前值不同时,useState中的setState才会导致重新渲染吗?

对于使用useState挂钩的功能组件,如果以相同状态调用设置器,则不会触发重新渲染。但是,在偶尔的情况下,如果立即调用setter,则会导致两次渲染而不是一次渲染

在类组件的render方法中使用this.setState设置状态是否与带有钩子的函数组件的功能体内的设置状态相同?

从技术上讲是可以的,如果在类组件导致无限循环的情况下,直接在render方法中设置状态将导致函数触发重新渲染(如果状态值不同,则对于功能组件而言)。无论如何,它仍然会引起问题,因为由于功能组件直接调用状态更新,任何其他状态更新都将被还原

在类组件中,如果我们在render方法中设置状态,则会发生无限循环。这是因为类组件不在乎新状态是否与先前状态相同。它只是在每个this.setState上保持重新渲染。

是的,因此建议不要在render中直接调用setState

但是,在具有钩子的函数组件中,在函数主体内设置状态(类似于类组件中的render方法,它在重新渲染时运行)不会有问题,因为当看到该功能组件时,它只是摆脱了重新渲染该状态与先前的状态相同。

不是100%正确,因为您可以使用先前的值触发状态更新,以使先前的值和当前值不相同。

setCount(count => count + 1);

在这种情况下,您的组件仍然会陷入无限循环



 类似资料:
  • 类组件 在React类组件中,我们被告知总是导致重新呈现,而不管状态是否实际更改为新值。实际上,当状态更新到以前的值时,组件将重新呈现。 文档(setState API引用): 如果您将状态挂钩更新为与当前状态相同的值,React将在不呈现子级或激发效果的情况下退出。(React使用object.is比较算法。) 密切相关的问题 类组件中的总是导致重新呈现,即使新的值与以前的值相同,这是否正确?

  • 在下面的示例中,我希望组件在列表更新时重新渲染。但是即使连接传递了新状态,它也不会重新呈现组件。 我知道connect执行浅层比较,但不知道如何使其比较对象的值。我找不到任何启用选项的连接示例。 我已经了解了redux连接的组件如何知道何时重新渲染?还有一些,但也没用。 我试过了 只是试图让它重新渲染任何变化。这似乎也不起作用。 输出

  • 我知道useState是异步的。回答前请阅读完整问题。 我试图用修改数组中的一个元素,但它没有按预期工作。 数组和修改它的函数: 因为是异步的,所以我知道数组可能不会立即更改,但是,在函数内部,即使经过几次重新渲染,结果也是相同的。 而不是: 我这样做: 然后在控制台内更新状态。在函数中生成日志,但没有重新渲染/组件更新。 我想了解为什么在第一种情况下在控制台的函数中。多次重新渲染后,日志结果相同

  • 我有一个带有两组按钮(功能和目标)的界面。当我点击一个按钮时,我希望它从一个团队转到另一个团队。我正在用react和redux实现这一点。我唯一的问题是,当状态更新并且我成功地记录了更新的状态时,除非我使用forceUpdate(),否则组件不会更新。我不明白的是,既然状态更新成功,组件不应该自动重新渲染吗? 一些js 正如您所看到的,当我单击一个按钮时,我触发updateLists函数,该函数将

  • 问题内容: 我正在尝试设计一个通知组件,在某些情况下通知会出现(例如连接问题,成功的修改等)。 我需要几秒钟后通知才能消失,因此我正在触发状态更改,以从通知内部的Redux状态删除通知。 我可以看到状态确实发生了变化,但是React-Redux并没有重新渲染父组件,因此通知仍然出现在DOM上。 这是我的Redux减速器: 和我的React组件(和): 问题答案: 您已经正确连接了所有内容,但是缺少

  • 在本例中,我将为子组件发送相同的道具和状态,所以。。。为什么在没有的情况下不重新渲染,而这些日志只显示一次?