设置状态: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')
);
相关文章
|
2月前
|
前端开发
为什么调用setState而不是直接改变state
为什么调用setState而不是直接改变state
24 0
|
1月前
|
前端开发
React保留和重置状态
React保留和重置状态
|
1月前
|
前端开发 JavaScript
react保留和重置状态
react保留和重置状态
|
2月前
setState 和 replaceState 的区别
setState 和 replaceState 的区别
23 2
|
9月前
|
前端开发
13 # promise 的状态更改问题
13 # promise 的状态更改问题
43 0
|
11月前
|
JavaScript
state 和 props 触发更新的生命周期分别有什么区别?
state 和 props 触发更新的生命周期分别有什么区别?
|
2月前
|
前端开发
setState和repalceState的区别
setState和repalceState的区别
24 0
|
11月前
|
前端开发 算法
调用setState后发生了什么?
调用setState后发生了什么?
156 0
|
JavaScript 前端开发
this.setState更新
this.setState更新
56 0
|
前端开发 开发者
使用 this.setState 修改 state 上的数据|学习笔记
快速学习使用 this.setState 修改 state 上的数据
80 0
使用 this.setState 修改 state 上的数据|学习笔记