Taro.createSelectorQuery()踩坑之路

其实Taro.createSelectorQuery（）这个API的坑很浅的，不算很难。
一开始刚使用的时候大家发现

const query = Taro.createSelectorQuery().select(className).boundingClientRect();
  
      query.exec(res => {
        console.log(res);
      })

res 输出的是 以下这个结果

大家 会发现输出的是[null] 这并不是我们想要的数据， 各位要是稍微留心 会很容易发现 输出为[null]的原因是因为 DOM 在此时没有渲染完成，因此 Taro.createSelectorQuery()找不到对应的DOM节点，所以才会输出[null]的结果，说到这里我想有些小伙伴应该已经知道该怎么解决这个小坑了，好了，我们直接输出真正的答案吧！（原本我还想带小伙伴们走走生命周期的，但是想到自己也不喜欢那么多废话的解答流程，因此就把生命周期的小坑跳过去吧）。

在输出真正的解决方法之前，这里我还要告诉大家一个知识点， taro 是在react 的基础上 封装的第三方框架，在渲染DOM的时候回牵扯到 异步渲染和同步渲染的问题，而我们现在遇到的Taro.createSelectorQuery()的这个问题就出现在这个异步渲染和同步渲染上面，

通常我们 获取一个页面的数据之后 ，根据数据改变页面的渲染，就要通过setSate来更新数据，在更新数据的同时 执行Taro.createSelectorQuery()来获取DOM的数据，这里就是异步渲染 ，异步就是js在执行一段代码的同时执行领一段代码，（不太懂的小伙伴可以自己去搜一下异步和同步，因为我也不太会怎么去描述这两者，哈哈！！！），在setState的时候同时执行Taro.createSelectorQuery()，这个DOM还没更新完，因此Taro.createSelectorQuery()无法获取DOM节点的信息，所以我们需要在setState 更新数据之后再去获取DOM节点的信息，而Taro.setState为我们提供了一个回调函数，我们可以通过这个回调函数来解决我们遇到的这个问题，问题到此就处理完成了，下面我将贴出对应的代码给大家参考，如有不懂可留言询问，如有错误之处也可留言相告！！！

this.setState({
     
    },() => {
      const query = Taro.createSelectorQuery().select(className).boundingClientRect();
      query.exec(res => {
        console.log(res);
      })
    });

如果此文对你有用请动动你的小手点个赞！谢谢！！！