设置状态: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')
);
目录
打赏
0
0
0
0
0
分享
相关文章
state 和 props 触发更新的生命周期分别有什么区别?
state 和 props 触发更新的生命周期分别有什么区别?
Mutations修改状态
Mutations修改状态
126 0
|
9月前
|
为什么调用setState而不是直接改变state
为什么调用setState而不是直接改变state
74 0
Vuex state访问状态对象
Vuex state访问状态对象
125 0
13 # promise 的状态更改问题
13 # promise 的状态更改问题
73 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等