关于两次渲染Taro和REACT不同

1,876 阅读1分钟

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

很多细心的开发者应该已经注意到了,在 Taro 编译到小程序端后,组件的 constructor 与 render 默认会多调用一次,表现得与 React 不太一致。

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

所以,在编码时,需要在处理数据的时候做一些容错处理,这样可以避免在 constructor 与 render 提前调用时出现由于没有数据导致出错的情况。

注意使用componentDidShow调用数据!

第一步初始化,顺序:

  1. 初始化组件profile(此时没有data)
  2. 3豪秒后初始化user页面(异步http已经返回data)

第二步渲染,顺序:

  1. 首先渲染user页面(有data-一直有)
  2. 按照组件profile顺序渲染组件(继承user数据data)

和生命周期函数的关联

  1. 初始化
  2. componentWillMount
  3. componentDidMount
  4. 网络请求
  5. componentDidShow
  6. componentWillReceiveProps
  7. componentWillUpdate
  8. 渲染
  9. componentDidUpdate