Catalog
  1. 1. 区别
  2. 2. 举个栗子
在setState中传递对象和传递函数有什么区别?

区别

  • 因为 this.propsthis.state 可能会异步更新,所以不能在setState中通过传递对象方式来更新状态
  • 传递对象
    • 批处理,对相同变量进行的多次处理会合并为一个,并以最后一次的处理结果为准
  • 传递函数
    • 链式调用,React 会把我们更新 state 的函数加入到一个队列里面,然后,按照函数的顺序依次调用。同时,为每个函数传入 state 的前一个状态,这样,就能更合理的来更新我们的 state 了
    • 该函数有两个参数
      • prevState
      • props

举个栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
class Test extends Component{

state = {
age: 0
}

Click1 = () => {
this.setState({
age: this.state.age + 1
});

if (true) {
this.setState({
age: this.state.age + 1
});
}
}

Click2 = () => {
this.setState((prevState, props) => {
return {
age: prevState.age + 1
}
});

if (true) {
this.setState((prevState, props) => {
return {
age: prevState.age + 1
}
});
}
}

render() {
return (
<View>
<button onClick={() => {this.Click1}}>pass in an object</button>
<button onClick={() => {this.Click2}}>pass in a function</button>
<p>age: {this.state.age}</p>
</View>
);
}
}
  • 当点击pass in an object时age的结果为1
  • 当点击pass in a function时age的结果为2
Author: Erealm
Link: http://erealmsoft.github.io/2019/09/17/react/react-set-state/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.

Comment