关于 React 中的 setState 这个API

@GuoYongfeng 2017-03-30 00:39:07发表于 iuap-design/blog

关于 React 中的 setState 这个API

这两周,我已经在很多国内外的文章中感受到了大家对 setState 这个 API 的热情了(吐槽),大家纷纷发文,主要在于以下几点的讨论:

  • setState 不会立刻改变React组件中state的值
  • setState通过引发一次组件的更新过程来引发重新绘制
  • 多次setState函数调用产生的效果会合并

其实,我想强调的是,这!些!都!是!事!实。不过,在 React 官方 API 的文档其实已经说的很明确了:

Performs a shallow merge of nextState into current state. This is the primary method you use to trigger UI updates from event handlers and server request callbacks.将 nextState 进行浅拷贝到 当前的 State,这是驱动 UI 更新的主要方法,并通过callback回调来响应服务器请求

The first argument can be an object (containing zero or more keys to update) or a function (of state and props) that returns an object containing keys to update. 第一个参数可以是个object对象或是一个function,这个函数能够返回包含所需更新字段。

It's also possible to pass a function with the signature function(state, props) => newState. This enqueues an atomic update that consults the previous value of state and props before setting any values. 这个传递的函数可以是这样:(state, props) => newState

那么,对于setState可以传入function是如何使用呢,看代码:

import React, { Component } from 'react'
import { render } from 'react-dom'

function increaseCount (state, props) {
  return {count : state.count + 1}
}

class Counter extends Component {
  constructor(props){
	super(props);
	this.state = { count: 0 }
	this.handleIncreaseCount = this.handleIncreaseCount.bind(this)
  }
  handleIncreaseCount () {
    this.setState(increaseCount)
  }
  render(){
    return (
	  <div>
		<h3>{this.state.count}</h3>
		<button onClick={this.handleIncreaseCount}>
	  </div>
	)
  }
}

相关资料