对比 一下 react 生命周期和 Taro 生命周期 ,但是 过程中 发现了 一个令我十分疑惑的问题, 在 pages/index 下创建了一个 子组件 Child.js 和 Index.js(父组件) 同级,但是 index.js 还没有 引入 Child.js 时就已经运行了 child render ,同时Index.js 的 render 运行了两次,

这是因为,Taro 的组件编译后就是小程序的自定义组件,而小程序的自定义组件的初始化时是可以指定 data 来让组件拥有初始化数据的。开发者一般会在组件的 constructor 中设置一些初始化的 state,同时也可能会在 render 中处理 state 与 props 产生新的数据,在 Taro 中多出的这一次提前调用,就是为了收集组件的初始化数据,给自定义组件提前生成 data ,以保证组件初始化时能带有数据,让组件初次渲染正常。
所以,在编码时,需要在处理数据的时候做一些容错处理,这样可以避免在 constructor 与 render 提前调用时出现由于没有数据导致出错的情况。


注意使用componentDidShow调用数据!
第一步初始化,顺序:
- 初始化组件profile(此时没有data)
- 3豪秒后初始化user页面(异步http已经返回data)
第二步渲染,顺序:
- 首先渲染user页面(有data-一直有)
- 按照组件profile顺序渲染组件(继承user数据data)
和生命周期函数的关联
- 初始化
- componentWillMount
- componentDidMount
- 网络请求
- componentDidShow
- componentWillReceiveProps
- componentWillUpdate
- 渲染
- componentDidUpdate