React setState()
示例
对React应用程序进行UI更新的主要方式是通过调用setState()函数。此函数将在您提供的新状态和先前状态之间执行浅表合并,并触发组件和所有后代的重新呈现。
参数
updater:它可以是具有许多键值对的对象,应将其合并到状态中,也可以是返回此类对象的函数。
callback(optional):setState()成功执行后将执行的功能。由于setState()React不能保证to的调用是原子的,因此如果您想在成功执行后肯定要执行某些操作,这有时会很有用setState()。
用法:
该setState方法接受一个updater参数,该参数可以是具有许多应合并到状态中的键值对的对象,也可以是返回从prevState和计算得到的对象的函数props。
setState()与对象一起使用updater
//
//一个示例ES6样式组件,只需单击一次按钮即可更新状态。
//还演示了可以在何处直接设置状态以及应在何处使用setState。
//
class Greeting extendsReact.Component{
constructor(props) {
super(props);
this.click= this.click.bind(this);
//设置初始状态(仅允许在CONSTRUCTOR中使用)
this.state= {
greeting: 'Hello!'
};
}
click(e) {
this.setState({
greeting: 'Hello World!'
});
}
render() {
return(
<div>
<p>{this.state.greeting}</p>
<button onClick={this.click}>Click me</button>
</div>
);
}
}setState()与功能配合使用updater
//
//当您要检查或使用时最常用
//更新任何值之前的状态。
//
this.setState(function(previousState, currentProps) {
return {
counter:previousState.counter+ 1
};
});这比使用对象参数(其中使用多次调用)更安全setState(),因为React可能将多个调用批处理在一起并立即执行,这是使用当前道具设置状态时的首选方法。
this.setState({ counter: this.state.counter + 1 });
this.setState({ counter: this.state.counter + 1 });
this.setState({ counter: this.state.counter + 1 });这些调用可以由React使用进行批量处理,从而使计数器增加1而不是3。Object.assign()
功能方法还可以用于将状态设置逻辑移到组件之外。这允许隔离和重用状态逻辑。
//在组件类之外,可能在另一个文件/模块中
function incrementCounter(previousState, currentProps) {
return {
counter:previousState.counter+ 1
};
}
//在组件内
this.setState(incrementCounter);调用setState()与物体的回调函数
//
//setState完成后,“HiThere”将记录到控制台
//
this.setState({ name: 'John Doe' }, console.log('Hi there'));