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

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 States 和 setState() 方法的详细解释。

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

State 是一个带有键值对的 JavaScript 对象。现在我们可能有许多状态（许多键：值对），假设在某个时刻只有一个状态正在改变。在这种情况下，我们可以使用 this.setState() 方法仅更改该特定状态。

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

假设我们要更新fruit1: 'watermelon'。

这里我们可以说：

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; }
        }

Answer 2

来自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 3

在 React 事件处理程序（即从基于 React 的 onChange={...} 属性等调用的函数）中，对 setState 的多次调用被批处理，并且组件仅重新渲染一次。所以，没有区别

handleClick: function() {
  this.setState({fruit1: "apple"});
  this.setState({fruit2: "mango"});
}

和

handleClick: function() {
  this.setState({fruit1: "apple", fruit2: "mango"});
}

但是，在 React 事件系统之外，对 setState 的两个调用不会合并，除非你将它们包装在传递给 React.addons.batchedUpdates 的函数中。这通常不是您必须担心的事情，但如果您开始设置状态以响应异步事件（例如计时器、承诺、回调等），则可能会成为问题。出于这个原因，我通常会推荐第二种形式（将两个对象合并为一个）而不是第一种。