taro介绍

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

生命周期

react的钩子函数

为兼容小程序的钩子函数

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

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
	
}