首页 > 其他分享 >react类组件和函数组件的区别

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

时间:2024-02-23 17:58:57浏览次数:32  
标签:console log react 组件 import type id 函数

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

标签:console,log,react,组件,import,type,id,函数
From: https://www.cnblogs.com/ygyy/p/18030077

相关文章

  • 在mapper.xml中编写sql规则和常见函数写法
    在mapper.xml中编写规则和常见函数写法目录在mapper.xml中编写规则和常见函数写法service传到mapper.xml常见查询语句的写法group_concatcasewhenelseendCOALESCEDUAL模糊查询写法关于where1=1xml中不能存在的特殊字符——特殊转义或<![CDATA[]]>sql编写的一些......
  • 七、通过"#define"预定义函数
    七、通过#define预定义函数我们在初学C语言的时候知道,可以通过#definePI3.1415926545来在程序中预定义变量。实际上,在C++语言当中,#define也可以预定义函数,以下是一段示例函数:#include<iostream>#defineMAX(a,b)(a>b)?a:b//预定义取两个数最大值的函数using......
  • 2-1. 设置人物及基本组件
    添加刚体在Rigidbody2D上面有GravityScale,这表示人物收到的重力比例是1。重力参数可以通过ProjectSettings->Physics2D,找到Gravity的系数。此外物理更新的FixedUpdate函数会进入,就是因为SimulationMode设置了FixedUpdate另外记得把人物的刚体限制给锁定......
  • python特殊的函数
    一、文件操作1.操作googlesheetcredentials_file_path=os.path.abspath("./credentials.json")#授权:authorize():这是pygsheets库中的一个函数,用于授权对GoogleSheets的访问。为了使用GoogleSheetsAPI,你需要有一个有效的OAuth2.0凭据,这个凭据通常是一......
  • 可变参数函数
    目录一、可变参数函数1.概念2.语法3.工作原理二、创建一个可变参数函数三、给可变参数函数传入切片1.错误示范2.正确写法一、可变参数函数1.概念可变参数相当于python中定义的函数它的参数中args的功能,用来接收多个参数,而参数中带有可变参数的函数就叫可变参数函数2.......
  • 打造纯Lua组件化开发模式:Unity xLua框架详解
    在传统的Unity开发中,通常会使用C#来编写游戏逻辑和组件。但是,随着Lua在游戏开发中的应用越来越广泛,我们可以将游戏逻辑和组件完全用Lua来实现,实现纯Lua的组件化开发模式。这样做的好处是可以更加灵活地修改游戏逻辑,而不需要重新编译C#代码。 3.实现步骤对啦!这里有个游戏开......
  • Vue动态组件
    components简介在不同组件之间进行动态切换Vue的元素加一个特殊的【is】属性来实现多个组件使用同一个挂载点,之后动态在各个组件之间切换内置组件keep-alivekeep-alive动态组件默认每次切换都会销毁组件并重新创建,这样会影像性能使用keep-alive组件缓存非活动组件,可以保留......
  • 【文化课学习笔记】【数学】函数(上)
    【数学】函数(上)概念【本质】唯一确定的对应。【定义】一般地,设\(A,B\)是非空的实数集,如果对于集合\(A\)中的任意一个数\(x\),按照某种确定的对应关系\(f\),在集合\(B\)中都有唯一确定的数\(y\)和它对应,那么就称\(f:A\toB\)为从集合\(A\)到集合\(B\)的一个函数......
  • ssts-hospital-web-master项目实战记录十:master-*.vue组件实现
    记录时间:2024-02-23Master_Basic.html<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head>  <title>主页</title>  <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"......
  • Reactive UI 包的使用 [观察者模式]
     1ReactiveUI原版说明包---------  |一个高级的、可组合的、反应式的模型-视图-视图模型框架(reactiveui.net)   2ReactiveUI具体分析拆解的笔记--------- ReactiveUI使用笔记,教程总结–CodeQing3ReactiveX对于具体的关键字分析 ----------ReactiveX-随笔分......