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

深入研究

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 8,689评论 1 33
  • React.js 小书学习 之 【使用 JSX 描述 UI 信息】 从 JSX 到页面 过程图解:JSX 到页面过...
    zdlucky阅读 1,453评论 0 20
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,954评论 1 18
  • HTML模版 之后出现的React代码嵌套入模版中。 1. Hello world 这段代码将一个一级标题插入到指...
    ryanho84阅读 6,462评论 0 9
  • 40、React 什么是React?React 是一个用于构建用户界面的框架(采用的是MVC模式):集中处理VIE...
    萌妹撒阅读 1,211评论 0 1

友情链接更多精彩内容