深入React技术栈之setState详解
发布时间:2020-12-15 06:26:47 所属栏目:百科 来源:网络整理
导读:抛出问题 class Example extends Component { contructor () { super() this.state = { value: 0,index: 0 } } componentDidMount () { this.setState({value: this.state.value + 1}) console.log(this.state.value) // 第一次输出 this.setState({value: t
抛出问题class Example extends Component { contructor () { super() this.state = { value: 0,index: 0 } } componentDidMount () { this.setState({value: this.state.value + 1}) console.log(this.state.value) // 第一次输出 this.setState({value: this.state.value + 1}) console.log(this.state.value) // 第二次输出 setTimeout(() => { this.setState({value: this.state.value + 1}) console.log(this.state.value) // 第三次输出 this.setState({value: this.state.value + 1}) console.log(this.state.value) // 第四次输出 },0); this.refs.button.addEventListener('click',this.click) } click = () => { this.setState({value: this.state.index + 1}) this.setState({value: this.state.index + 1}) } render () { return ( <div><span>value: {this.state.value}index: {this.props.index}</span> <button ref="button" onClick={this.click}>点击</button> </div> ) } }
setState的注意点
this.setState({name: 'Pororo'}) this.setState({age: 20})
this.setState({name: 'Pororo',age: 20})
问题分析
this.setState({value: this.state.val + 1}); console.log(this.state.value); // 第一次输出 this.setState({value: this.state.val + 1}); console.log(this.state.value); // 第二次输出
setTimeout(() => { this.setState({value: this.state.value + 1}) console.log(this.state.value) // 第三次输出 this.setState({value: this.state.value + 1}) console.log(this.state.value) // 第四次输出 },0);
同步更新(函数式setState)
function increment(state,props) { return {count: state.count + 1}; } function incrementMultiple() { this.setState(increment); this.setState(increment); this.setState(increment); }
要注意的是,在increment函数被调用时,this.state并没有被改变,依然,要等到render函数被重新执行时(或者shouldComponentUpdate函数返回false之后)才被改变。 同步异步setState的用法混合function incrementMultiple() { this.setState(increment); this.setState(increment); this.setState({count: this.state.count + 1}); this.setState(increment); }
总结自:掘金(不洗碗工作室) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |