使用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。