相关平台

微信小程序

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

复现步骤

使用下方代码，点击 测试 createSelectorQuery 查看控制台

import { useRef } from 'react';
import Taro from '@tarojs/taro';

const TypeDemo = () => {
    const ref = useRef<HTMLDivElement>(null);
    return (
        <>
            <a
                onClick={() => {
                    console.time('a');
                    const query = Taro.createSelectorQuery();
                    query
                        .select(`#aaa`)
                        .boundingClientRect()
                        .exec(data => {
                            console.log('data', data);
                            console.timeEnd('a');
                        });
                }}
            >
                测试 createSelectorQuery
            </a>
            <a
                onClick={async () => {
                    console.time('b');
                    const d = await ref.current?.getBoundingClientRect();
                    console.log('d', d);
                    console.timeEnd('b');
                }}
            >
                测试 getBoundingClientRect
            </a>
            <div id="aaa" ref={ref} style={{ height: 100, width: 200 }}>
                122
            </div>
        </>
    );
};

export default TypeDemo;

期望结果

耗时 1 毫秒左右

实际结果

耗时 100 多毫秒

环境信息

👽 Taro v3.6.17

  Taro CLI 3.6.17 environment info:
    System:
      OS: macOS 13.5.2
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 16.19.1 - ~/.nvm/versions/node/v16.19.1/bin/node
      Yarn: 1.22.19 - ~/.yarn/bin/yarn
      npm: 8.19.3 - ~/.nvm/versions/node/v16.19.1/bin/npm
    npmPackages:
      @tarojs/cli: ^3.6.17 => 3.6.17 
      @tarojs/components: ^3.6.17 => 3.6.17 
      @tarojs/plugin-framework-react: ^3.6.17 => 3.6.17 
      @tarojs/plugin-html: ^3.6.17 => 3.6.17 
      @tarojs/plugin-platform-alipay: ^3.6.17 => 3.6.17 
      @tarojs/plugin-platform-h5: ^3.6.17 => 3.6.17 
      @tarojs/plugin-platform-weapp: ^3.6.17 => 3.6.17 
      @tarojs/react: ^3.6.17 => 3.6.17 
      @tarojs/runtime: ^3.6.17 => 3.6.17 
      @tarojs/taro: ^3.6.17 => 3.6.17 
      @tarojs/taro-h5: ^3.6.17 => 3.6.17 
      @tarojs/webpack5-runner: ^3.6.17 => 3.6.17 
      babel-preset-taro: ^3.6.17 => 3.6.17 
      react: ^18.2.0 => 18.2.0