React函数式组件

news2024/12/29 9:33:49

1. 创建函数式组件

        我们可以通过所定义的函数来进行react中组件的定义。首先我们可以定义一个函数,然后通过函数的返回值来进行相关组件的定义。例如下面这张写法,我们可以通过调用一个函数,通过其返回值来进行相关的操作。

function Test(){
  return <h1>我是测试组件</h1>
}

2.通过react进行render来进行渲染

ReactDOM.render(<Test/>,document.getElementById('root1'))

        我们可以通过render来将我们定义的函数式组件添加到容器root1中,然后来进行渲染。但是这里要注意的是为什么我们所定义函数式组件的首字母大写,难道全小写不行吗?这里是不行的。因为react是基于jsx来进行渲染的。因此就需要符合jsx的相关语法。那么在jsx中规定。如果对应的标签首字母小写的话,在渲染为虚拟DOM的时候,react会将其转化为html中的标签。如果首字母大写的话,在渲染虚拟DOM的时候,react获取寻找我们所定义的组件,若找到就对应的渲染,若没找到就会提示我们报错信息

3.为什么react所定义的函数组件的this为undefined

        由于react在编译的过程中,是经过babel来将JSX转化为JS代码。且转化后的代码将会在JS的严格模式下执行。这就意味着在严格模式下,我们定义的函数中的this将会从windows中转化为undefined。因此react中需要搞懂this的相关指向。babel的作用就是将JSX代码转化为对应的函数式组件。

 4.全部代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>函数式组件</title>
</head>
<style>
 
</style>
<body>
  <!-- 容器 -->
  <div id="test"></div>

  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <script type="text/babel">
    // 1、创建函数式组件
    function demo() {
   	  console.log(this)  	// undefined   
      return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
    }
    // 2、渲染组件到页面   ReactDOM.render(函数组件名,容器节点)
    ReactDOM.render(<demo/>, document.getElementById('test'))
  </script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/698464.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

chatgpt赋能python:Python遍历A到Z:SEO优化的关键

Python遍历A到Z&#xff1a;SEO优化的关键 对于任何一家网站来说&#xff0c;SEO (Search Engine Optimization, 搜索引擎优化)都是至关重要的&#xff0c;特别是在当今数字时代&#xff0c;人们常常会在搜索引擎中查找信息并浏览不同网站。其中一个重要的SEO策略是为每个网站…

笔记本安装双系统ubuntu时踩的坑——戴尔

如果你遇到以下的这些问题&#xff0c;不要直接装了&#xff0c;无解&#xff01;&#xff01;&#xff01; 建议看我另一篇教程&#xff0c;把硬盘取出来在另外的电脑上装好系统再放回去&#xff0c;这样嘎嘎快。 移动硬盘中安装Ubuntu 20.04系统——立省99%的问题_放风筝的…

水质监测的重要性及应用

水质监测是保障水环境安全和人民健康的重要手段。随着城市化进程的加速和工业化程度的提高&#xff0c;水污染问题日益严重&#xff0c;水质监测的重要性也越来越凸显。水质监测是指对水体中的各种物理、化学和生物参数进行监测和分析&#xff0c;以评估水体的质量和污染程度。…

概率论--随机事件与概率--贝叶斯公式--随机变量

目录 随机事件与概率 概念 为什么要学习概率论 随机事件与随机事件概率 随机事件 随机事件概率 贝叶斯公式 概念 条件概率 概率乘法公式 贝叶斯公式 举个栗子 随机变量 随机变量的定义 随机变量的分类 离散型随机变量 连续型随机变量 随机事件与概率 概念 …

和Git相关的一些问题

1. Git拉取项目的两种方式以及区别 方式 Http&#xff1a;通过http方式的clone项目&#xff0c;不需要在git上手动绑定ssh&#xff0c;只需要在clone的时候输入账号&#xff0c;密码即可&#xff1b;SSH&#xff1a;通过ssh方式clone项目&#xff0c;需要手动绑定ssh密钥 区别 …

Linux——从零到精通

目录 前言&#xff1a; 一.Linux介绍 二.Linux基础命令 三.链接和文章从零到实战 基本信息介绍 Linux 操作系统的诞生、发展和成长过程始终依赖着五个重要支柱&#xff1a; 桌面环境 Linux为什么象征着企鹅 命名与读法 前言&#xff1a; 本篇文章结合所有从零到精通 Linux…

如何在jupyter notebook 中添加虚拟环境

一&#xff0e;如何在jupyter notebook 中添加虚拟环境 假设在D:\tf_training\envTraining创建了名为env_training的虚拟环境。 1.安装IPykernel < python2 > pip install ipykernel < python3 > pip install ipykernel 说明&#xff1a;最好进入到虚拟环境…

STM32单片机(九)USART串口----第九节:STLINK Utility

❤️ 专栏简介&#xff1a;本专栏记录了从零学习单片机的过程&#xff0c;其中包括51单片机和STM32单片机两部分&#xff1b;建议先学习51单片机&#xff0c;其是STM32等高级单片机的基础&#xff1b;这样再学习STM32时才能融会贯通。 ☀️ 专栏适用人群 &#xff1a;适用于想要…

第24天-订单服务(订单确认、订单接口幂等、订单验价、锁定库存)

f# 1.Docker安装RabbitMQ docker run -d --name rabbitmq \ -p 5672:5672 -p 25672:25672 -p 15672:15672 \ -e RABBITMQ_DEFAULT_USERadmin -e RABBITMQ_DEFAULT_PASSadmin \ --restartalways \ rabbitmq:management5672&#xff1a;AMQP端口25672&#xff1a;集群端口15672&…

和Cookie相关的一些问题

目录 1. Cookie储存在哪里&#xff1f; 2. 不同网站可以互相访问对方的Cookie吗&#xff1f; 3.二级域名能够读到一级域名的Cookie吗&#xff1f; 1. Cookie储存在哪里&#xff1f; Cookie是前后端共享的&#xff0c;故肯定是存在浏览器的。 在浏览器开发者工具中可以找到C…

### 4.1 Hadoop生态系统

狭义的Hadoop VS 广义的Hadoop 广义的Hadoop&#xff1a;指的是Hadoop生态系统&#xff0c;Hadoop生态系统是一个很庞大的概念&#xff0c;hadoop是其中最重要最基础的一个部分&#xff0c;生态系统中每一子系统只解决某一个特定的问题域&#xff08;甚至可能更窄&#xff09;…

UE5.2 Mobile安卓游戏 Graphics Profile工具使用总结

Android Graphics Profile工具 Android游戏Profile 图形帧的常用工具有: snapdragon profiler, renderdoc, 手机游戏APP环境 (1)opengl es3.1/3.2或者vulkan (2)UE5 Android 打Debug包 (3)USB连接电脑的设置: 手机连接电脑&#xff0c;开启USB传输文件模式&#xff0c;开…

全志V3S嵌入式驱动开发(解决32M spi-nor无法复位问题)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 之前制作spi-nor image的时候&#xff0c;就发现v3s存在无法复位的问题。只要进入linux之后&#xff0c;不管是console输入reboot指令&#xff0c;…

【C/C++解决读者-写者问题】

目录 一、问题描述二、问题分析三、三种策略实现1.读者优先策略2. 读写公平策略3.写者优先策略&#xff08;后续更新&#xff09; 一、问题描述 有读者和写者两组并发进程&#xff0c;共享一个文件&#xff0c;当两个或两个以上的读进程&#xff08;只是读数据&#xff0c;不会…

将数据转化为创新机会:8 种业务分析模型指南

当我们想要创新时&#xff0c;往往需要有实际的依据来支撑我们的想法。商业咨询顾问通常被认为是聪明的人&#xff0c;他们拥有模型化的分析思维&#xff0c;这种思维方式可以帮助他们更好地理解市场、竞争对手和客户需求。商业分析思维是一种系统性的思考方式&#xff0c;它可…

力扣 222. 完全二叉树的节点个数

题目来源&#xff1a;https://leetcode.cn/problems/count-complete-tree-nodes/description/ C题解1&#xff1a;层序遍历计算节点。 时间复杂度&#xff1a;O(n)空间复杂度&#xff1a;O(n) /*** Definition for a binary tree node.* struct TreeNode {* int val;* …

已开源!网易云信的热点探测平台实践

背景 对于一个互联网平台&#xff0c;特别是 toB 的 PaaS/SaaS 平台&#xff0c;热点 key 是一个绕不过去的问题。作为一个开放的系统&#xff0c;平台每天要承载来自大量的外部系统或者海量终端的请求&#xff0c;虽然所有的请求都需要满足开放平台定义好的鉴权规则&#xff0…

虚幻引擎(UE5)-大世界分区WorldPartition教程(四)

文章目录 前言一、Data Layers的使用1.添加Actor到Data Layers2.运行时处理 总结 上一篇&#xff1a;虚幻引擎(UE5)-大世界分区WorldPartition教程(三) 前言 Data Layers&#xff08;UE4中叫Layers&#xff09;用于将Actor划分到不同的Layer中&#xff0c;通过在编辑器和运行…

Qt在Ubuntu下如何进行桌面软件开发?

文章目录 0.引言1.新建项目2.编写第一个程序3.在Qt外部启动程序 0.引言 笔者研究的方向涉及在ubuntu中运行代码&#xff0c;早先是直接利用控制台运行代码文件&#xff0c;在控制台中虽然设法将代码精简到一个三个文件中&#xff0c;只需要在控制台运行这三个文件即可&#xff…

应用在5W~20W无线充电器中的电机驱动芯片

随着用电设备对供电质量、安全性、可靠性、方便性、即时性、特殊场合、特殊地理环境等要求的不断提高&#xff0c;使得接触式电能传输方式越来越不能满足实际需要。无线充电器是利用电磁感应原理进行充电的设备&#xff0c;其原理和变压器相似&#xff0c;通过在发送和接收端各…