React中的setState、replaceState的区别

文章类型:React

发布者:admin

发布时间:2023-04-09

setState和replaceState都是用于更新组件状态的方法,今天,整理一下它们的区别

一:setState,根据参数修改原数据

1:定义:用于设置状态对象,合并nextState和当前state,并重新渲染组件

2:形式

setState(object nextState[, function callback])

this.setState({ count: this.state.count + 1 });

this.setState({ count: this.state.count + 1 }, () => {
console.log('State has been replaced:', this.state);
});

3:参数

nextState,将要设置的新状态,该状态会和当前的state合并

callback,可选回调函数。该函数会在setState设置成功,且组件重新渲染后调用。

二:replaceState直接将原数据替换

1:定义:只会保留nextState中状态,原state不在nextState中的状态都会被删除

2:形式

replaceState(object nextState[, function callback])

this.replaceState({ count: this.state.count + 1 });

3:参数

nextState,将要设置的新状态,该状态会替换当前的state。

callback,可选回调函数。该函数会在setState设置成功,且组件重新渲染后调用。

三:总结

1:setState 是修改其中的部分状态,相当于 Object.assign,只是覆盖,不会减少原来的状态。

2:replaceState 是完全替换原来的状态,相当于赋值,将原来的 state 替换为另一个对象