一、 类组件
class Welcome extends React.Component {
constructor() {
super()
this.state = {
n: 0,
m: 0,
}
}
addN() {
this.setState({
n: this.state.n + 1
})
}
addM() {
this.setState({
m: this.state.m + 1
})
}
render() {
return (
<div>
<span>我是n:{this.state.n}</span>
<button onClick={() => this.addN() }>
点我 n + 1
</button>
<span>我是m:{this.state.m}</span>
<button onClick={() => this.addM() }>
点我 m + 1
</button>
</div>
)
}
}
export default Welcome
使用方法：<Welcome />
上面的代码在 setState n 的时候并没有给 m 赋值， m 会被覆盖为 undefined 吗？答案是不会 ，类组件里的 setState ,如果你对其中一部分进行修改，而其他的部分自动的延用上一次的值，而不会被 undefined 覆盖。
或者可以自己延用：
this.stateState ({ ...this.state , n : this.state.n + 1 })
上面代码意思是，我先把之前的 state 里的值拷贝过来，然后把 n 变成 n + 1 ,一般我们不需要这样写，React 会自动加上 ...this.state,称之为自动合并。
注：setState 只会自动合并第一层属性，不会合并第二层属性
- 当 state 有第二层属性时
class Welcome extends React.Component {
constructor() {
super()
this.state = {
n: 0,
m: 0,
user: {
name: 'fang',
age: 18,
}
}
}
changeUser() {
this.setState({
// m 和 n 不会被置空
user: {
name: "jack"
// age 被置空
}
})
}
render() {
return (
<div>
<div>user.name: {this.state.user.name}</div>
<div>user.age: {this.state.user.age}</div>
<button onClick={() => this.changeUser()}>change user</button>
</div>
)
}
}
export default Welcome
上面代码，当你在 set user里的 name 时 age 会被置空，就如同：
{ name : 'fang' , age : 18 } => { name : 'jack' }
如何解决：
1.使用 ...操作符
changeUser() {
this.setState({
// m 和 n 不会被置空
user: {
...this.state.user,
name: "jack"
}
})
}
2.使用 Object.assign
const user = Object.assign({}, this.state.user)
user.name = 'jack'
this.setState({
// m 和 n 不会被置空
user: user
})
二、函数组件
const Welcome = () => {
const [n, setN] = React.useState(0)
const [m, setM] = React.useState(0)
return (
<div>
<span>我是n:{n}</span>
<button onClick={() => setN(n + 1)}>点我 n + 1</button>
<span>我是m:{m}</span>
<button onClick={() => setM(m + 1)}>点我 m + 1</button>
</div>
)
}
上面代码为函数组件里有两个 state 该如何使用，是否觉得函数组件的代码比类组件的代码少了很多？所以个人推荐用函数组件。
- 不推荐写法：
const Welcome = () => {
const [state, setState] = React.useState({
n: 0, m: 0
})
return (
<div>
<span>我是n:{state.n}</span>
<button onClick={() => setState({ n: state.n + 1 })}>
点我 n + 1
</button>
<span>我是m:{state.m}</span>
<button onClick={() => setState({ m: state.m + 1 })}>
点我 m + 1
</button>
</div>
)
}
上面代码，当你点击 n + 1 再去点击 m + 1 时 m会变成 NaN ，因为当你点击 n + 1 时 m 也会被赋值为 undefined ,当再点击 m + 1 就会为 NaN ,就等同于下面写法：
<button onClick={() => setState({ n: state.n + 1 ,m : undefined})}>
从而得出函数组件的 setState 不会自动合并
解决办法：
- 使用...操作符
<button onClick={() => setState({ ...state , n: state.n + 1 })}>
总结
- 类组件的 setState 会自动合并第一层属性，但是并不会合并第二层属性，使用 Object.assign 或者 ...操作符 来解决
- 函数组件的 setX 则完全不会合并，要合并就使用 ...操作符
