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

export default class Index extends Component {

  config = {
    navigationBarTitleText: '首页'
  }
  // 当前Index组件的对象 管理数据 
  state = {
    name: 'Taro',
    text: 'Taro',
  }
  demo = {
    name: 'demo'
  }
  fetchName = () => {
    return '123456'
  }
  // 执行componentWillMount后执行render函数
  componentWillMount () { 
    console.log("第一次渲染之前执行，只执行一次");
  }
  componentDidMount () { 
    console.log("第一次渲染之后执行，只执行一次");
    /**
     * 修改值
     * 错误： this.state.text = '哈哈哈'
     * 正确： this.setState({text: '哈哈哈'})
     */ 
    this.setState({text: '哈哈哈'}, () => {
      console.log(this.state.text);           //2、输入 哈哈哈
    });
    console.log(this.state.text);           //1、输入 Taro
    // 证明状态更新是异步
 
  }
  componentWillUnmount () { 
    console.log("卸载时执行，只执行一次");
  }
  componentWillUpdate() {
    console.log("state数据更新之前");
  }
  componentDidUpdate() {
    console.log("state数据更新之后");
  }
  // 会再父组传递给子组件的参数发生改变时触发
  componentWillReceiveProps(nextProps) {
    console.log(nextProps);
  }
  shouldComponentUpdate(nextProps, nextState) {
    /**
     *  shouldComponentUpdate
     *  检查此次setState是否要进行render更新，是返回true，否返回false
     *  一般用来多次更改state，提升render的性能
     */
    console.log("是否要更新");
    if(nextState.text === '哈哈哈') {
      return true;
    } else {
      return false;
    }
  }
  componentDidShow () { 
    /**
     * componentDidShow
     * react 不存在  Taro存在
     * 页面显示时触发
     */
    console.log("页面显示时触发");
  }
  componentDidHide () { 
    /**
     * componentDidShow
     * react 不存在  Taro存在
     * 页面隐藏时触发
     */
    console.log("页面隐藏时触发");
  }

  // render 继承Component类
  render () {
    return (
      <View className='index'>
        <Text>页面</Text>
        {/* 引用state对象 */}
        <Text>{this.demo.name}</Text>
        {/* 此处的text在componentDidMount出被修改 */}
        <Text>{this.state.text}</Text>
        <Text>{this.state.name}</Text>
        <Text>{this.fetchName()}</Text>
      </View>
    )
  }
}

/**
 * 执行顺序
 * 第一次渲染之前执行，只执行一次
 * 第一次渲染之后执行，只执行一次
 * Taro
 * 页面显示时触发
 * 是否要更新
 * state数据更新之前
 * state数据更新之后
 * 哈哈哈
 */