使用setState更新状态

使用setState更新状态

如何设置状态
之前，我们了解了如何在初始化时定义组件的状态。因为状态表示的是可改变的信息，最终会影响到所渲染的输出内容，因此组件可能还会使用 this.setState() 在其生命周期内更新其状态。我们已经知道，每次本地状态变化时，React 将通过调用其 render() 方法触发重新渲染组件。

可以通过两种方法来使用 setState()。第一个是合并状态更新。请看看下面的组件代码段：

class Email extends React.Component {
  state = {
    subject: '',
    message: ''
  }
  // ...
});

虽然该组件的初始状态包含两个属性（subject 和 message），但是它们可以被独立地更新。例如：

this.setState({
  subject: 'Hello! This is a new subject'
})

这样，我们可以让 this.state.message 保持不变，但是将 this.state.subject 替换为新的值。

使用 setState() 的第二种方式是传入函数，而不是对象。例如：

this.setState((prevState) => ({
  count: prevState.count + 1
}))

此处，传入的函数具有单个 prevState 参数。当组件的新状态取决于上个状态（即我们使上个状态中的 count 加一）时，我们需要使用函数 setState()。

setState() 总结

虽然组件在初始化时可以设置其状态，但是我们预期状态会随着时间的推移而变化（通常因为用户输入）。组件能够使用 this.setState() 更改其内部状态。每次状态发生变化，React 都知道并调用 render() 来重新渲染该组件。这样可以快速有效地更新你的应用 UI。

深入研究

• 正确使用状态 React 文档|(翻译)