设置状态: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')
);
相关文章
|
7月前
|
JavaScript 数据处理
当数据发生变化时,`watch`函数是如何被触发的?
当数据发生变化时,`watch`函数是如何被触发的?
65 3
|
7月前
|
前端开发
为什么调用setState而不是直接改变state
为什么调用setState而不是直接改变state
56 0
|
1月前
|
前端开发
在 componentWillMount 中调用 setState 会发生什么
在 `componentWillMount` 生命周期方法中调用 `setState` 会导致组件在初始渲染前进行额外的状态更新和重新渲染,可能影响性能并引发潜在的逻辑问题。建议避免在这种情况下使用 `setState`。
|
2月前
|
前端开发 开发者
为什么调用 setState 而不是直接改变 state
为什么调用 setState 而不是直接改变 state
|
4月前
|
前端开发
React组件实例更改state状态值(四)
【8月更文挑战第14天】React组件实例更改state状态值(四)
53 1
React组件实例更改state状态值(四)
|
前端开发
13 # promise 的状态更改问题
13 # promise 的状态更改问题
58 0
|
7月前
setState 和 replaceState 的区别
setState 和 replaceState 的区别
53 2
|
JavaScript
state 和 props 触发更新的生命周期分别有什么区别?
state 和 props 触发更新的生命周期分别有什么区别?
|
7月前
|
前端开发
setState和repalceState的区别
setState和repalceState的区别
65 0
|
前端开发 算法
调用setState后发生了什么?
调用setState后发生了什么?
205 0