React:重新设置状态 - Hooks与this.setState

问题描述 投票:4回答:1

类组件

在React类组件中,我们被告知setState总是会导致重新渲染,无论状态是否实际更改为新值。实际上,当状态更新为之前的相同值时,组件将重新呈现。

Docs (setState API Reference)

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


挂钩(功能组件)

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

Docs (useState API Reference)

拯救国家更新

如果将状态挂钩更新为与当前状态相同的值,则React将在不渲染子节点或触发效果的情况下进行挽救。 (React使用Object.is比较算法。)


密切相关的问题

  1. 即使新的this.setState值与之前的相同,类组件中的state总是会导致重新渲染,这是正确的吗?
  2. 在具有钩子的函数组件中,如果setState值与之前的值不同,来自useStatestate只会导致重新渲染吗?
  3. 在类组件的state方法中使用this.setState设置render,与使用钩子在函数组件的函数体内设置state相同吗?
  4. 以下是否正确? 在类组件中,如果我们在state方法中设置render,则会发生无限循环。这是因为类组件并不关心新的state与之前的state相同。它只是在每个this.setState上重新渲染。 但是在带有钩子的函数组件中,在函数体内设置state(类似于类组件中的render方法重新渲染运行)不会成为问题,因为函数组件在看到它时会重新渲染重新渲染state与之前的state相同。
javascript reactjs react-hooks
1个回答
6
投票

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

如果除了在setState中返回null之外设置有效值,则除非您的组件是PureComponent或者实现了shouldComponentUpdate,否则将始终通过类组件中的react来触发重新呈现。

在具有钩子的函数组件中,如果状态值与先前值不同,那么来自useState的setState只会导致重新渲染吗?

对于使用useState钩子的功能组件,如果使用相同状态调用setter,则不会触发重新渲染。但是对于偶尔的情况,如果立即调用setter它会导致两个渲染而不是一个渲染

是否在类组件的render方法中使用this.setState设置状态,与使用hooks在函数组件的函数体内设置状态相同?

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

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

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

但是在带有钩子的函数组件中,在函数体内设置状态(在类组件中与渲染方法类似地重新渲染时运行)不会成为问题,因为函数组件在看到它时会重新渲染重新渲染国家与以前的州相同。

不是100%为真,因为您可以使用先前的值触发状态更新,以使前一个值和当前值不相同。例如

setCount(count => count + 1);

在这种情况下,您的组件仍将处于无限循环中

© www.soinside.com 2019 - 2024. All rights reserved.