setState() 在两个 setState() 运行时阻塞 UI答案

【问题标题】：setState() block the UI when two setState() runsetState() 在两个 setState() 运行时阻塞 UI
【发布时间】：2026-01-31 08:20:06
【问题描述】：

这是我的componentDidMount() 方法：

componentDidMount() {
    const subscription = accelerometer.subscribe(({ x, y, z, timestamp }) => {
        x = Math.trunc(x*100);
        this.setState({x})
    });
}

在上述方法中，每 100 毫秒的状态就会发生变化。我在render() 方法中使用了该状态，如下所示：

render() {
    const animatedImageStyle = StyleSheet.flatten([
      styles.captureButton,
      {
        transform: [{rotateZ:this.state.x + 'deg'}]
      }
    ])

    return (
      <SideMenu 
        menu={leftMenu}
        isOpen={this.state.isOpenLeftMenu}
        menuPosition={'left'}
        bounceBackOnOverdraw={false}
        onChange={(isOpenLeftMenu) => this.updateLeftMenuState(isOpenLeftMenu)}
      >
        <View>
            <TouchableOpacity 
                activeOpacity={0.5}
                onPress={(this.state.recordingMode == 'camera')?() => this.takePicture():() => this.toggleRecording()}
              > 
                <Image 
                  source={require('../assets/imgs/forRotate.png')}
                  style={animatedImageStyle}
                />
            </TouchableOpacity>
        </View>
      </SideMenu>
    )
}

现在，问题是当我尝试打开侧边菜单时，它没有打开，我的意思是它打开但挂得太多了。我的整个应用挂得太多了。

我认为这是因为以下方法：

updateLeftMenuState(isMenuOpen) {
    this.setState({
      isOpenLeftMenu:isMenuOpen
    })
}

请注意，我正在更新另一个名为 isOpenLeftMenu 的状态，在我更新状态 x 期间它可能会被阻止。

谁能告诉我这里出了什么问题？

【问题讨论】：

每次设置状态时，视图都必须重新绘制。这意味着您每秒要破坏和重绘界面 10 次，这在计算上是相当繁重的。尝试减慢状态变化的频率。
我不能减慢状态变化的频率，因为 100 毫秒是必需的。顺便说一句，我减速到 1 秒仍然无效。
你能检查跳过 setState 直到你得到不同的值吗？就像我们不需要设置状态，如果我们必须再次设置相同的值，因为它已经设置了。
这是个好主意@Ashish 但是，但在我的应用程序中，我根据设备旋转旋转按钮的功能（不仅纵向到横向，而且基于旋转度数）所以我需要每毫秒值。
@KishanBharda 尝试使用组件变量。设置状态将每次重新安装组件。如果您要在组件 var 中定义它，例如 this.x = x。如果有帮助的话。

标签： reactjs react-native setstate react-state-management react-state

【解决方案1】：

您可以将动画视图与订阅逻辑一起移动到单独的组件中。所以该组件的状态更新不会影响 SideMenu 组件。

【讨论】：

感谢您的回答，但这有助于我仅以完美的方式设置状态，但没有解决我的主要问题。
您可以将动画视图连同订阅逻辑和 Try 一起移动到单独的组件中。
是的。绝对正确@MohammedAshafaq。在单独的组件中移动动画视图对我有用。谢谢你。请用上述评论编辑答案，以便我接受并帮助某人。