19 / 10 / 18

Taro前置内容 - 生命周期

前置技能

React

index.jsx

进入src/pages/index/index.jsx这个文件,然后让我们好好看看这个文件里的内容。

这是一份无添加的样式。我们看到里面的内容包括:

  • 行1-3的引用
  • 行5声明一个class
  • 行7-9设置这个页面的title(用于小程序)
  • 行11-19生命周期
  • 行21-28,一个render函数(学过React的都知道)
    • View和Text都是Taro的组件,相当于原来的div和span。(你可以这么理解一下)

这个是运行结果

生命周期

快速查看

componentWillMount () { console.log('componentWillMount') console.log('监听程序初始化,初始化完成时触发(全局只触发一次)') console.log('在此生命周期中通过 this.$router.params,可以访问到程序初始化参数') console.log('在微信/百度/字节跳动/支付宝小程序中这一生命周期方法对应 app 的 onLaunch') } componentDidMount () { console.log('componentDidMount') console.log('监听程序初始化,初始化完成时触发(全局只触发一次)') console.log('在此生命周期中也可以通过 this.$router.params,访问到程序初始化参数') console.log('在微信/百度/字节跳动/支付宝小程序中这一生命周期方法对应 app 的 onLaunch,在 componentWillMount 后执行') } componentWillReceiveProps(nextProps) { console.log('componentWillReceiveProps') console.log('已经装载的组件接收到新属性前调用') console.log('在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用') } shouldComponentUpdate(nextProps, nextState) { console.log('shouldComponentUpdate') console.log('组件是否需要更新,返回 false 不继续更新,否则继续走更新流程') console.log('返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用') return true } componentWillUpdate(nextProps, nextState) { console.log('componentWillUpdate') console.log('在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用') } componentDidUpdate(prevProps, prevState) { console.log('componentDidUpdate') console.log('在组件完成更新后立即调用。在初始化时不会被调用') } componentWillUnmount () { console.log('componentWillUnmount') console.log('组件卸载时触发') console.log('在组件从 DOM 中移除之前立刻被调用') } componentDidShow () { console.log('componentDidShow') console.log('程序启动,或从后台进入前台显示时触发,微信小程序中也可以使用 Taro.onAppShow 绑定监听') console.log('在此生命周期中通过 this.$router.params,可以访问到程序初始化参数') console.log('在微信/百度/字节跳动/支付宝小程序中这一生命周期方法对应 onShow,在 H5/RN 中同步实现') } componentDidHide () { console.log('componentDidHide') console.log('程序从前台进入后台时触发,微信小程序中也可以使用 Taro.onAppHide 绑定监听') console.log('在微信/百度/字节跳动/支付宝小程序中这一生命周期方法对应 onHide,在 H5/RN 中同步实现') } componentDidCatchError (error) { console.log('componentDidCatchError') console.log('程序发生脚本错误或 API 调用报错时触发,微信小程序中也可以使用 Taro.onError 绑定监听') console.log('在微信/百度/字节跳动/支付宝小程序中这一生命周期方法对应 onError,H5/RN 中尚未实现') } componentDidNotFound (object) { console.log('componentDidNotFound') console.log('程序要打开的页面不存在时触发,微信小程序中也可以使用 Taro.onPageNotFound 绑定监听') console.log('在微信/字节跳动小程序中这一生命周期方法对应 onPageNotFound,其他端尚未实现,微信小程序中,基础库 1.9.90 开始支持') }

run一下看看顺序是啥?

  • h5

  • 微信小程序