Question

我正在使用React JS，我想知道两次调用setState()以设置两个不同的状态变量之间的区别：

this.setState({fruit1: “apple”});
this.setState({fruit2: “mango”});

和

调用setState()一次并将两个状态变量作为JSON传递：

this.setState({fruit1: “apple”, fruit2: “mango”});

还有什么是更好的做法：将状态变量名称放在双引号中：this.setState({"fruit1": “apple”})或者只是忽略引号？

Answer 1

来自React documentation：

不要直接改变this.state，因为之后调用setState（）可能会替换你所做的突变。把this.state看作是不可变的。 setState（）不会立即改变this.state，但会创建挂起状态转换。调用此方法后访问this.state可能会返回现有值。无法保证对setState的调用进行同步操作，并且可以对调用进行批处理以提高性能。除非在shouldComponentUpdate（）中实现条件呈现逻辑，否则setState（）将始终触发重新呈现。如果正在使用可变对象且无法在shouldComponentUpdate（）中实现逻辑，则仅当新状态与先前状态不同时调用setState（）将避免不必要的重新渲染。

因此，请使用this.setState({fruit1: “apple”, fruit2: “mango”});

对于第二个问题，您可以查看here和here

Answer 2

这里是对React States和setState（）方法的详细说明。

状态（和道具）只是React重新渲染/重新计算DOM的两个原因。这意味着，如果我们更改状态，就会告诉我们要更改应用程序的相关行为。

State是具有key：value对的Java脚本对象。现在我们可能有很多状态（许多键：值对），并且在某些时候，只有一种状态在变化。在这种情况下，我们可以使用this.setState（）方法仅更改该特定状态。

state = { fruit1: 'mango', fruit2: 'apple' }

假设我们要更新水果1：“西瓜”。

在这里我们可以说：

this.setState( {fruit1: 'watermelon'} );

在这里，我们没有说第二个状态（fruit2），所以react将合并已更改的状态（fruit1）与旧状态（fruit2）。

同时，我们也可以说：

this.setState( {fruit1: 'watermelon' ,fruit2:'apple'} );

但这不是必需的。

正确/命令的状态设置/更改方式：

来自React官方文档：

将setState（）视为请求而不是立即命令来更新组件。为了获得更好的感知性能，React可能会延迟它，然后在一次通过中更新几个组件。 React不能保证状态更改会立即应用。

因此，这是一种更好的方法：如果我们要更新计数器或计算某些内容：

this.setState((prevState,props) => {
 return {
           { counter: prevState.counter+1; }
        }

在Reactjs中设置状态变量的正确方法是什么？这些方法之间的区别是什么？

2 个答案: