设置状态:setState

简介: 设置状态:setState

参数说明

  • nextState,将要设置的新状态,该状态会和当前的state合并
  • callback,可选参数,回调函数。该函数会在setState设置成功,且组件重新渲染后调用。

合并nextState和当前state,并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。


关于setState

不能在组件内部通过this.state修改状态,因为该状态会在调用setState()后被替换。


setState()并不会立即改变this.state,而是创建一个即将处理的state。setState()并不一定是同步的,为了提升性能React会批量执行state和DOM渲染。


setState()总是会触发一次组件重绘,除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。

class Counter extends React.Component{
  constructor(props) {
      super(props);
      this.state = {clickCount: 0};
      this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(function(state) {
      return {clickCount: state.clickCount + 1};
    });
  }
  render () {
    return (<h2 onClick={this.handleClick}>点我!点击次数为: {this.state.clickCount}</h2>);
  }
}
ReactDOM.render(
  <Counter />,
  document.getElementById('example')
);
相关文章
|
存储 算法 NoSQL
还分不清 Cookie、Session、Token、JWT?看这一篇就够了
Cookie、Session、Token 和 JWT(JSON Web Token)都是用于在网络应用中进行身份验证和状态管理的机制。虽然它们有一些相似之处,但在实际应用中有着不同的作用和特点,接下来就让我们一起看看吧,本文转载至http://juejin.im/post/5e055d9ef265da33997a42cc
48390 13
|
Android开发
解决 Android Studio 日志乱码
解决 Android Studio 日志乱码
2220 0
解决 Android Studio 日志乱码
|
文件存储
PowerShell系列(十):PowerShell CmdletPowerShell Cmdlet 参数详解
【2月更文挑战第5篇】强制类型参数使用比较频繁,基本上涉及新建、更新、配置等命令都需要针对特定的对应进行操作,所有需要强制输入一个参数来确认操作的对象是谁。
PowerShell系列(十):PowerShell CmdletPowerShell Cmdlet 参数详解
|
数据可视化 搜索推荐 小程序
LowCode:低代码平台,2024国内十大主流低代码平台年终盘点
低代码平台是一种加速软件开发的高效工具,通过可视化和模型驱动的方式减少手动编码,快速构建应用。它能显著提升开发效率,降低开发成本,支持企业快速实现数字化转型。国内主流低代码平台如织信Informat、白码、钉钉宜搭等,各具特色,可根据企业需求选择合适的平台。私有化部署更是确保数据安全和定制化的重要手段。
|
前端开发 搜索推荐 数据可视化
阿里低代码引擎LowCodeEngine正式开源
低代码引擎是一款为低代码平台开发者提供的,具备强大扩展能力的低代码研发框架。由阿里巴巴前端委员会、钉钉宜搭联合出品。使用者只需要基于低代码引擎便可以快速定制符合自己业务需求的低代码平台。
阿里低代码引擎LowCodeEngine正式开源
|
图形学
【unity实战】3D水系统,游泳,潜水,钓鱼功能实现
【unity实战】3D水系统,游泳,潜水,钓鱼功能实现
604 0
|
测试技术 开发工具 git
【Git】的分支和标签的讲解及实际应用场景
【Git】的分支和标签的讲解及实际应用场景
479 0
|
开发框架 Java 开发者
Spring Boot接收参数的多种方式
【4月更文挑战第20天】
1216 0
|
存储 数据采集 JSON
Scrapy爬虫数据存储为JSON文件的解决方案
Scrapy爬虫数据存储为JSON文件的解决方案