设置状态: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')
);
相关文章
|
文件存储
PowerShell系列(十):PowerShell CmdletPowerShell Cmdlet 参数详解
【2月更文挑战第5篇】强制类型参数使用比较频繁,基本上涉及新建、更新、配置等命令都需要针对特定的对应进行操作,所有需要强制输入一个参数来确认操作的对象是谁。
PowerShell系列(十):PowerShell CmdletPowerShell Cmdlet 参数详解
|
10月前
|
Java 容器
07 Java数组与数组操作(定义+遍历+排序+增删改查)(上)
07 Java数组与数组操作(定义+遍历+排序+增删改查)
102 8
|
12月前
|
SQL 关系型数据库 MySQL
【权限提升】六种数据库提权&口令获取
【权限提升】六种数据库提权&口令获取
193 1
|
SQL 关系型数据库 MySQL
第11章 数据库的设计规范【2.索引及调优篇】【MySQL高级】4
第11章 数据库的设计规范【2.索引及调优篇】【MySQL高级】4
199 0
|
12月前
|
图形学
【unity实战】3D水系统,游泳,潜水,钓鱼功能实现
【unity实战】3D水系统,游泳,潜水,钓鱼功能实现
360 0
|
测试技术 开发工具 git
【Git】的分支和标签的讲解及实际应用场景
【Git】的分支和标签的讲解及实际应用场景
296 0
uniapp中组件库的丰富NumberBox 步进器的用法
uniapp中组件库的丰富NumberBox 步进器的用法
397 0
|
存储 数据采集 JSON
Scrapy爬虫数据存储为JSON文件的解决方案
Scrapy爬虫数据存储为JSON文件的解决方案
|
JavaScript 前端开发 开发者
【Vue2从入门到精通】超简单的vue2开发环境安装
Vue是一款非常流行的JavaScript框架,它可以帮助开发者轻松地构建交互式的Web应用程序。在本文中,我们将会讲解如何搭建Vue2的开发环境,让你可以快速开始开发自己的Vue应用程序。
741 0
【Vue2从入门到精通】超简单的vue2开发环境安装
|
城市大脑 达摩院 监控
阿里云交通数据中台解决方案,打造“数字化生产力”
在交通行业中,阿里云不仅具备成熟的方法论和工具,还联合高德、支付宝、阿里达摩院等,构成了一个内部协同生态,外部也积极与生态伙伴展开合作,全方位渗透交通各个领域和场景,是建设智能计算和催生智能分析的引擎。
阿里云交通数据中台解决方案,打造“数字化生产力”
OSZAR »