每天一点点之 taro 框架 - 生命周期 & state

注意：从vue过来的小朋友要注意，taro直接赋值时不会更新组件的，同react一致更新数据必须调用setState方法，例如：this.setState({name:'张三'}) 

 

1.render函数

　　return中的标签可以是但标签，也可以是多标签

 

2.index.js文件内容介绍

import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.scss'

export default class Index extends Component {

  config = {
    navigationBarTitleText: '首页'
  }



  componentWillMount () { 
    console.log('componentWillMount，第一次渲染之前执行，只执行一次')
   }

  componentDidMount () { 
    console.log('componentDidMount，第一次渲染之后执行，只执行一次')    
  }

  componentWillUnmount () { 
    console.log('componentWillUnmount，卸载时执行')    
  }

  componentWillUpdate () {
    console.log('componentWillUpdate，state数据将要更新')    
  }

  componentDidUpdate () {
    console.log('componentDidUpdate，state数据更新过后')    
  }

  shouldComponentUpdate (nextProps,nextState) {
    // 检查此次setState是否要进行render调用,返回true调用，false不调用
    // 一般用来多次的setState调用时，提升render性能
    // 判断状态
    if(nextState.state.text == '李四')
      return true;
  }

  componentWillReceiveProps(nextProps){
    // 会在父组件传递给子组件的参数发生改变时触发
  }

  // componentDidShow与componentDidHide在reactjs不存在，是taro为了兼容小程序实现的
  componentDidShow () { 
    console.log('componentDidShow，显示时触发')    
  }

  componentDidHide () { 
    console.log('componentDidHide，隐藏时触发')    
  }
  state = {
    name:'Helloworld'
  }
  getName () {
    return 111;
  }
  render () {
    console.log('render，第一次运行')    
    
    return (
      <View className='index'>
        <View>获取动态变量：{this.state.name}</View>
        <View>获取动态方法：{this.getName()}</View>
      </View>
    )
  }
}

 

 

3.tarojs的生命周期

　　tarojs有六个生命周期

　　　　　　　　

componentWillMount　　　　第一次渲染之前执行，只执行一次

render　　　　　　　　　　  渲染页面

componentDidMount　　　　第一次渲染之后执行，只执行一次

componentWillUnmount　　  卸载时执行

componentWillUpdate　　　  state数据将要更新

componentDidUpdate　　　   state数据更新过后

一下两个在reactjs不存在，是taro为了兼容小程序实现的

componentDidShow　　　　 　显示时触发

componentDidHide　　　　　　隐藏时触发

 

运行截图如下：

 

4.setState更新异步问题

setState方法有两个参数， 第一个时对象，第二个时回调函数

  componentDidMount () { 
    console.log('componentDidMount，第一次渲染之后执行，只执行一次')    
    this.setState({name:'王五'},()=>{
      console.log(this.state.name,'回调')
    })
    console.log(this.state.name,'同步')
  }

由运行结果可以看出，setState方法是异步的