假设我有一个Counter
组件,它呈现了一个按钮,你可以点击它来增加它的计数:
class Counter extends Component {
constructor(props) {
super(props)
this.state = {
count: 0
}
}
inc = () => {
// Directly mutate state and setState({})
this.state.count += 1
this.setState({})
}
render() {
return (
<button onClick={this.inc}>{this.state.count}</button>
)
}
}
在inc
方法中,不执行
setState(prevState => ({ count: prevState.count + 1 }))
i直接变异状态,并给定一个空对象给setState
函数。我清楚地知道这不是一个推荐的模式,但只是好奇为什么这个例子会工作,似乎没有任何错误。我点击了按钮,它成功地更新了计数。
这两行代码在后台做了什么,它们实际上等于官方推荐的setState方式吗?
1条答案
按热度按时间xzlaal3s1#
为什么在成功更新和渲染组件后直接突变react state和setState({})[...]
调用
setState
函数要求react重新呈现组件,this.setState({})
要求重新呈现并且不更改状态值。即使你已经告诉react不要改变任何值,它仍然默认呈现,当它这样做的时候,它使用任何碰巧处于状态的值。因为你已经改变了状态,状态碰巧有了一个新的值。[...]没有bug?
它看起来没有bug,因为你有一个简单的例子。当您需要对以前的状态执行任何操作时,错误就会出现。例如,如果你添加一个
shouldComponentUpdate
,前一个状态将始终等于当前状态:Sandbox link