百度小程序多组件嵌套时生命周期触发方式不同

[7gongzi]

问题描述

百度小程序和微信小程序更新渲染时触发生命周期方式完全不同，百度小程序更新缓慢卡顿总是有初始数据

复现步骤

百度小程序生命周期触发（错误的令人绝望的触发方式）：

微信小程序生命周期出发（正确的可接受的触发方式）：

// 爷爷组件
<FeedList  />

//父组件 FeedList
<View className='feed-container'>
     <View className={classStr}>
                    {listArray.map(item => <GoodsFeed key={item.id} option={item} />
                    })}
    </View>
</View>

// 子组件 GoodsFeed
<View> ....{this.props.option}....</View>

期望行为
列表顺畅的更新 两个小程序生命周期触发方式相同

报错信息
微信小程序列表会顺畅更新;
百度小程序列表让人很绝望 比如：FeedList加载20条数据 会先出20条GoodsFeed默认数据 然后每个GoodsFeed再更新实际数据;

系统信息

Taro v1.2 及以上版本已添加 taro info 命令，方便大家查看系统及依赖信息，运行该命令后将结果贴下面即可。

• 操作系统: [e.g. Windows 10]
• Taro 版本 [e.g. v.0.0.64]
• Node.js 版本 [e.g. v9.0.0]
• 报错平台 [h5, weapp]

补充信息
[可选]
[根据你的调查研究，出现这个问题的原因可能在哪里？]

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[Chen-jj]

@zhangce160125 父组件 componentDidUpdate 与子组件 componentWillUpdate 触发顺序对你的影响是什么，把相关生命周期代码也附上。

这一点也是（
FeedList加载20条数据 会先出20条GoodsFeed默认数据 然后每个GoodsFeed再更新实际数据），把相关代码都写清楚一下，最好能提供完整可复现代码。

另外说一点，componentDidUpdate 触发时机是 setData 的回调被调用时，各个小程序框架实现有所不同，componentDidUpdate 的触发时机也会不同。

[7gongzi]

@zhangce160125 父组件 componentDidUpdate 与子组件 componentWillUpdate 触发顺序对你的影响是什么，把相关生命周期代码也附上。

这一点也是（
FeedList加载20条数据 会先出20条GoodsFeed默认数据 然后每个GoodsFeed再更新实际数据），把相关代码都写清楚一下，最好能提供完整可复现代码。

另外说一点，componentDidUpdate 触发时机是 setData 的回调被调用时，各个小程序框架实现有所不同，componentDidUpdate 的触发时机也会不同。

代码在上面都写好了的，不是在生命周期执行代码的受到了影响，是在渲染的时候； 百度小程序现在情况是父组件和子组件相当于异步渲染了，这样会导致先渲染父组件，然后再把子组件内容填充进去的这种问题，体验很不好；期望是父组件和子组件同步渲染和微信小程序一样。。。但是百度小程序原生的写法就不会有问题，所以考虑是不是Taro编译时候对渲染逻辑产生的影响

[Chen-jj]

componentDidMount 由小程序的 setData 回调决定触发时机，看看百度新的生命周期有没有帮助吧。https://smartprogram.baidu.com/forum/topic/show/70128