react类组件和函数组件的区别

1.类组件

import Taro from '@tarojs/taro';
import { Component,useState } from 'react'

class Classtest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  // 组件挂载到 DOM 后立即调用，也就是在组件的初始渲染完成后执行
  componentDidMount() {
    const { id, type } = Taro.getCurrentInstance().router.params;
    console.log('id:', id);
    console.log('type:', type);
  }

  render() {
    return <div>
      <div>My Detail Page</div>
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increase Count
        </button>
      </div>
    </div>;
  }
}

export default Classtest;

 

2.函数组件

import { View, Text } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
// import './index.scss'
import { useState,useEffect } from 'react';


export default function Index() {
  // componentDidMount() {
  //   const { id, type } = this.$router.params;
  //   console.log('id:', id);
  //   console.log('type:', type);
  // }
  useEffect(() => {
    const { id, type } = Taro.getCurrentInstance().router.params;
    console.log('id:', id);
    console.log('type:', type);
  }, []);
  return (
    <View className='index'>
      <Text>路由跳转到详情页</Text>
    </View>
    
  )
}

 

 

转：https://mp.weixin.qq.com/s?__biz=MzU0MDUzOTA1Ng==&mid=2247485575&idx=1&sn=1d9f75a5c1c397be3a7bcb4400798eb9&chksm=fb36e958cc41604ec63bb7eaf29ffcdfb3c26471a9473bad8e12cd520df4104d7a1d74ce9600&scene=27