taro 小程序安卓真机在定时器里面更新state,会特别卡,和定时器设置的时间相差很大

tpxzln5u  于 5个月前  发布在  其他
关注(0)|答案(2)|浏览(56)

相关平台

微信小程序

小程序基础库: 最新
使用框架: React

复现步骤

如果在setTimeout里面更新state,会特别卡,实际渲染的时间会比我定时器设置的时间的2-4倍左右,比如设置200毫秒,可能要800毫秒之后才会渲染,单如果是10-20ms这样的值则差距不大
ios真机,或者mac的模拟器上则没有这个问题

或者是在useEffect里面去设置也会有这种问题,比如说我下面写这个代码,在安卓真机上,show1控制的元素,在安卓真机上,要等1秒左右才会显示出来

这是代码

const YuDing = () => {

  const [show, showAction] = useBoolean()

  const [show1, setShow1] = useState()

  useEffect(() => {
    setShow1(show)
  }, [show])

  return <>
    <Button type='primary' radiusType='round-min'
      onClick={e => {
        stopPropagation(e)
        showAction.not()
        // setTimeout(() => {
        //   setShow1(!show1)
        // }, 10)
      }}
    >预定</Button>
    {show1 && <Text>show1</Text>}
    {
      show && <Text>show</Text>
    }
    {/* {show && <PullView onClose={showAction.not}>
{show1 && <Text>测试</Text>}
<CustomWrapper>
<Select />
</CustomWrapper>
</PullView>} */}
  </>
}

这是在安卓和ios真机上的执行效果

138_1682234691.mp436_1682234708.mp4

期望结果

正常渲染

实际结果

延迟渲染

环境信息

Taro CLI 3.6.5 environment info:
    System:
      OS: macOS 13.3.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.16.0 - /var/folders/5j/t9hd6v1d3s902h5xb3g1rmv40000gn/T/yarn--1682234222327-0.7099768356889637/node
      Yarn: 1.22.19 - /var/folders/5j/t9hd6v1d3s902h5xb3g1rmv40000gn/T/yarn--1682234222327-0.7099768356889637/yarn
      npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.5 => 3.6.5 
      @tarojs/components: 3.6.5 => 3.6.5 
      @tarojs/helper: 3.6.5 => 3.6.5 
      @tarojs/plugin-framework-react: 3.6.5 => 3.6.5 
      @tarojs/plugin-platform-alipay: 3.6.5 => 3.6.5 
      @tarojs/plugin-platform-h5: ^3.6.5 => 3.6.5 
      @tarojs/plugin-platform-jd: 3.6.5 => 3.6.5 
      @tarojs/plugin-platform-qq: 3.6.5 => 3.6.5 
      @tarojs/plugin-platform-swan: 3.6.5 => 3.6.5 
      @tarojs/plugin-platform-tt: 3.6.5 => 3.6.5 
      @tarojs/plugin-platform-weapp: 3.6.5 => 3.6.5 
      @tarojs/react: ^3.6.5 => 3.6.5 
      @tarojs/rn-runner: 3.6.5 => 3.6.5 
      @tarojs/runtime: 3.6.5 => 3.6.5 
      @tarojs/shared: 3.6.5 => 3.6.5 
      @tarojs/taro: 3.6.5 => 3.6.5 
      @tarojs/taro-rn: 3.6.5 => 3.6.5 
      @tarojs/webpack5-runner: 3.6.5 => 3.6.5 
      babel-preset-taro: 3.6.5 => 3.6.5 
      eslint-config-taro: 3.6.5 => 3.6.5 
      expo: ^47.0.13 => 47.0.13 
      react: ^18.2.0 => 18.2.0 
      react-native: ^0.70.7 => 0.70.7
mzillmmw

mzillmmw1#

应该和 #13716 类似? 🤔️

3npbholx

3npbholx2#

这个问题有什么思路吗,会不是是微信的问题,我这边很多个组件里面都收到了影响,但凡在 useEffect 里面 执行 setState 就一定会触发这个问题

相关问题