react -如何强制元素立即重绘
我在react组件中有一个切换按钮：
toggleSpeak = () => {
this.setState({buttonOn: !this.state.buttonOn});
}并且该按钮根据其状态改变其样式：
<img key="headphones" className={audioclass} src={this.state.buttonOn ? white : black} onClick={this.toggleSpeak}/>这也会在子组件中触发一些东西：
play={this.state.buttonOn}这会触发一些speechSynthesis回放，这有时需要一段时间。问题是我想让用户意识到正在发生的事情。然而，该按钮并不会立即改变其样式。只要我触发其他东西，无论是通过如上所述的子对象的直通属性，还是通过触发redux操作，它仍然会延迟几秒钟更改颜色。
我想立即更改颜色而不延迟，这样用户就知道不再重复推送它。我如何才能做到这一点呢？
回答 3
Stack Overflow用户
发布于 2018-06-12 03:17:42
我不确定这是否是"react“方式，但我想出了一个可行的解决方案。我拆分了我传递的属性，以便从按钮切换中打开播放器。
state = {
buttonOn: false,
play: false
}按钮属性与上面相同，但会随着buttonOn状态的变化而变化。
ChildComponent属性：...play={this.state.play}
然后，在按钮切换事件中，我等待半秒后才更改播放状态。这是为了让按钮立即更新它的样式，然后所有播放器的东西都可以在一个滴答之后运行。
togglePlay = (newValue) => {
this.setState({play: newValue});
}
toggleSpeak = (e) => {
let newValue = !this.state.buttonOn;
this.setState({buttonOn: newValue});
if (this.state.play != newValue) {
setTimeout(function() {
this.togglePlay(newValue);
}.bind(this), 500);
}当然，在卸载时清除超时函数：
componentWillUnmount() {
clearTimeout(this.togglePlay);
}Stack Overflow用户
发布于 2018-06-11 07:49:00
你在渲染中做speechSynthesis吗？在切换按钮之后，您应该调用执行speechSynthesis的函数。就UX而言，我建议你在做一项可能需要一些时间才能完成的任务时，显示一个加载指示器。此外，您还可以禁用该按钮，直到speechSynthesis完成。
toggleSpeak = () => {
if(!this.state.doingSpeechSynthesis) {
this.setState(
{buttonOn: !this.state.buttonOn, doingSpeechSynthesis: true},
() => speechSynthesis(args, this.setState{doingSpeechSynthesis: false}));
}
}Stack Overflow用户
发布于 2018-06-11 07:54:33
this.setState({})函数确实是异步的，因此考虑到触发器中包含的所有内容，在很短的几毫秒内，您所声称的可能是真的
toggleSpeak = () => {
this.setState({buttonOn: !this.state.buttonOn});
}你所说的明显的延迟应该是不可察觉的。我会认为延迟是从其他地方强加的。(假设您需要在this.setState({})之前运行一些其他同步代码。一定要向我们展示更多相关的代码，这样我们才能更好地掌握正在发生的事情。
https://stackoverflow.com/questions/50788885
复制相似问题