taro生命周期详解

taro介绍

taro是以react为基础的多端混合开发工具，使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信 / 京东 / 百度 / 支付宝 / 字节跳动 小程序、快应用、H5、React-Native 等）运行的代码。
所以taro的生命周期不仅包含了react的相关钩子函数，还包括兼容微信小程序的而设置的钩子函数

生命周期

react的钩子函数

函数名	作用
render(){}	渲染页面
constructor(){}	初始化页面的属性与状态
componentWillMount(){}	第一次渲染之前执行，只执行一次
componentDidMount(){}	第一次渲染之后执行，只执行一次
shouldComponentUpdate	页面是否需要更新，当返回false时不会再次触发render函数即不再更新视图
componentWillUpdate	state数据更新前，多次更新多次触发
componentDidUpdate	state数据更新之后，多次更新多次触发
componentWillReceiveProps	当props改变时触发
componentDidShow	显示时触发
componentDidHide	隐藏时触发
componentWillUnmount	卸载时执行
componentDidCatchError	错误监听函数
componentDidNotFound	页面不存在监听函数

为兼容小程序的钩子函数

函数名	作用
componentDidShow	显示时触发
componentDidHide	隐藏时触发
onPullDownRefresh	页面相关事件处理函数–监听用户下拉动作
onReachBottom	页面上拉触底事件的处理函数
onShareAppMessage	用户点击右上角转发
onPageScroll	页面滚动触发事件的处理函数
onTabItemTap	当前是 tab 页时，点击 tab 时触发
componentWillPreload	预加载，只在微信小程序中可用

个别生命周期详解以及注意

1.render（）函数

当被调用时，render 方法必须返回return一个 Taro 组件（可以是内置组件也可以是自定义组件）或一个 falsy 的值。

render() 函数应该纯净，意味着其不应该改变组件的状态，其每次调用都应返回相同的结果，同时不直接和浏览器/小程序交互。若需要和浏览器/小程序交互，将任务放在componentDidMount() 阶段或其他的生命周期方法。保持 render() 方法纯净使得组件更容易思考。

2.constructor()构造函数

Taro 组件的构造函数constructor()将会在mounted挂载之前被调用。当为一个 Taro.Component 子类定义构造函数时，你应该在任何其他的表达式之前调用 super(props)。否则，this.props 在构造函数中将是未定义，并可能引发异常。

构造函数constructor()是初始化状态的合适位置。若你不初始化状态且不绑定方法，那你也不需要为你的 Taro 组件定义一个构造函数，即不需要引入constructor函数。

在 Taro 中对小程序的兼容方面，即便你不写 constructor()，编译到微信小程序时也会自动给你加上，因为 Taro 运行时框架需要在 constructor() 中多做一些事情。

可以基于属性来初始化状态。这样有效地“分离（forks）”属性并根据初始属性设置状态。

3.在各个生命周期钩子函数中修改state的属性或者参数

修改state里的属性要用setState()函数，

this.setState({
    counter: 1
  }, () => {
    // 在这个函数内你可以拿到 setState 之后的值
  })

如果直接 使用this.state.counter =1会造成视图不响应

4频繁调用setState后性能下降网页变卡shouldComponentUpdate（）{}

当频繁调用setState后网页响应可能会变满，可以使用shouldComponentUpdate函数来做一个类似于守卫拦截器的操纵

shouldComponentUpdate（nextPorps,nextState）{
	if(nextState.某个属性名 == 你想要变化后的属性值) return true 
	//这样就会传递给render()函数进行页面响应并且刷新页面
	else return false
	//return false 就不会执行render函数，即视图不在刷新
}

5 componentWillReceiveProps的解释

当生命周期的第一次render时不会调用，但在之后每次render被调用时，或者props接收新的参数的时候会被再次调用，
该方法当props发生变化时执行，初始化render时不执行，在这个回调函数里面，你可以根据属性的变化，通过调用this.setState()来更新你的组件状态，旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的，并不会触发额外的render调用。

componentWillReceiveProps(nextProps){
	//nextProps可以读取更新后的props
	//this.props可以读取更新前的props
	
}