React 基础篇(一)

💻 React 基础篇(一)🏠专栏:React
👀个人主页:繁星学编程🍁
🧑个人简介:一个不断提高自我的平凡人🚀
🔊分享方向:目前主攻前端,其他知识也会阶段性分享🍀
👊格言:☀️没有走不通的路,只有不敢走的人!☀️
👉让我们一起进步,一起成为更好的自己!!!🎁

文章目录

  • React 基础知识篇(一)
    • react是什么?
      • (1) 重要版本变更
      • (2) 项目创建
      • (3) 抽离配置文件
    • 组件的写法
      • (1) 函数组件
      • (2) 类组件
      • (3) 组件嵌套
      • (4) 两个组件的区别

React 基础知识篇(一)

react是什么?

官方解释React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。

vscode中React有助于快捷开发的插件:

ES7+ React/Redux/React-Native snippets
// 代码段快捷键:
React-Native/React/Redux/React-Native...

(1) 重要版本变更

序号版本号发版时间重要更新
1162017 年 9 月 26引入 es6 的类组件
216.32018 年 4 月 3 日生命周期更新
316.42018 年 5 月 23 日生命周期更新
416.82019 年 2 月 6 日引入 react hooks
517.02020 年 10 月 20 日过渡版本
618.02022 年 3 月 29 日写法改变,严格模式发生改变

(2) 项目创建

create-react-app 脚手架使用

需要保证电脑安装 node 版本在 14 以上,系统在 win7 以上

# 方式1:使用npx
$ npx create-react-app react-basic
# 方式2:使用npm
$ npm init react-app react-basic
# 方式3:使用yarn
$ yarn create react-app react-basic

yarn的使用

yarn的安装:npm i yarn tyarn -g
安装依赖:npm i xxx -g  ->  yarn add xxx -globalnpm i xxx -S  ->  yarn add xxxnpm i xxx -D  ->  yarn add xxx -devnpm i         ->  yarn

项目初始化目录:

项目启动yarn start

React 单页面应用 目录分析:

  • manifest.json:图片适配
  • robots.txt:seo优化
  • yarn.lock:版本锁定

(3) 抽离配置文件

eject指令用于抽离配置文件

cra脚手架基于webpack,默认webpack的配置在 node_modules下的react-scripts 内部,但是一般情况下,传输代码时,不会上传 node_modules,那么在必要情况下就必须得抽离配置文件。

通过npm run eject或者cnpm run eject 或者yarn eject指令抽离配置文件

抽离配置文件过程中注意事项

  1. 确保项目的 git 仓库是最新的
  2. 如果不需要对于 webpack 进行配置,那么不需要抽离配置文件
  3. create-react-app v2 默认支持 ts 以及 sass 以及 css 的模块化,如果使用 sass 作为 css 预处理器,那么不需要抽离配置文件

抽离后项目目录产生文件夹:config和scripts

index.js:入口文件 初始测试:

// 引入react
import React from 'react'
// 引入reactDom
// 浏览器端引入reactDom,app端引入react-native
import ReactDOM from 'react-dom/client'const root = ReactDOM.createRoot(document.getElementById('root'))
// jsx语法:允许我们在js文件里面写html
// 可以将我们写的html代码转成虚拟DOM
const msg = 'react!!!'
root.render(<div>hello {msg}</div>)

组件的写法

组件的命名:首字母大写,拓展名(js或jsx

变量名如果是小写字母开头的,认为是标签
变量名如果是大写字母开头的,认为是组件

(1) 函数组件

传参:props

const App = (props) => {return <div>hello {props.msg}!</div>;
};
// 组件实例化
root.render(<Header msg="world"/>);

(2) 类组件

传参:this.props

class App extends React.Component {render() {// 在类组件里面,不知道怎么做的时候,就打印thisconsole.log(this);return <div>hello {this.props.msg}</div>;}
}// root.render(app("world"));
// root.render(app({ msg: "world" }));
// 将组件变成标签的过程就是组件实例化的过程
root.render(<App msg="world" />);

(3) 组件嵌套

import React,{Component,Fragment} from "react";class Msg extends Component{render(){return <div>msg</div>}
}const App = ()=>{return <Fragment><div>组件嵌套</div><Msg></Msg></Fragment>
}export default App;

注:组件中必须有一个根标签

解决组件中必须有一个根标签
方式一: 使用Fragment标签嵌套在所有标签的最外面

import { Fragment } from 'react'
class App extends React.Component{render() {return <Fragment><div>Hello</div><div>World</div></Fragment>}
}

方式二: 在所有标签最外面套一层<></>

const Home = () => {return <><div>Hello</div><div>World</div></>
}

以上两种方式的本质还是共用同一个父组件,但是不会产生新标签,只做占位符,与Vue中的template标签作用相同

(4) 两个组件的区别

  1. 组件的定义方式不同。
  2. 生命周期不同:类组件有,函数式组件没有。
  3. 副作用操作执行不同:class 组件通过生命周期函数,函数组件用 Hooks 的 useEffect。
  4. state 的定义、读取、修改方式不同:函数组件用 hook 的 useState。
  5. this: class 组件有,函数式组件没有。
  6. 实例: class 组件有,函数时组件没有。
  7. ref 使用不同:类组件可以获取子组件实例,函数式组件不可以,因为函数式组件没有实例。

:官方推荐使用函数式组件

结束语

希望对您有一点点帮助,如有错误欢迎小伙伴指正。
👍点赞:您的赞赏是我前进的动力!
⭐收藏:您的支持我是创作的源泉!
✍评论:您的建议是我改进的良药!
一起加油!!!💪💪💪

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

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

相关文章

基于Matlab微分器的PID控制(附上完整源码+数据)

PID控制是一种常用的控制算法&#xff0c;广泛应用于工业控制和自动化系统中。在Matlab中&#xff0c;可以使用PID控制器对象来实现PID控制。 文章目录 说明部分代码完整源码数据下载 说明 PID控制器是一个反馈控制系统&#xff0c;它根据当前的偏差&#xff08;即实际值与期望…

数据结构和算法——快速排序(算法概述、选主元、子集划分、小规模数据的处理、算法实现)

目录 算法概述 图示 伪代码 选主元 子集划分 小规模数据的处理 算法实现 算法概述 图示 快速排序和归并排序有一些相似&#xff0c;都是用到了分而治之的思想&#xff1a; 伪代码 通过初步的认识&#xff0c;我们能够知道快速排序算法最好的情况应该是&#xff1a; 每…

torchaudio 教程

torchaudio 教程 PyTorch 是一个开源深度学习平台&#xff0c;提供了从研究原型到具有 GPU 支持的生产部署的无缝路径。 解决机器学习问题的巨大努力在于数据准备。 torchaudio充分利用了 PyTorch 的 GPU 支持&#xff0c;并提供了许多工具来简化数据加载并使其更具可读性。 …

TCP协议如何实现可靠传输

TCP最主要的特点 TCP是面向连接的运输层协议&#xff0c;在无连接的、不可靠的IP网络服务基础之上提供可靠交付的服务。为此&#xff0c;在IP的数据报服务基础之上&#xff0c;增加了保证可靠性的一系列措施。 TCP最主要的特点&#xff1a; TCP是面向连接的输出层协议 每一条…

降龙十八掌

目录 大数据&#xff1a; 1 HIVE&#xff1a; 1.1 HIVE QL 1.1.1 创建表 1.1.2 更新表 1.1.3 常用语句 1.2 hive参数配置 大数据&#xff1a; 1 HIVE&#xff1a; 1.1 HIVE QL DDL中常用的命令有&#xff1a;create&#xff0c;drop&#xff0c;alter&#xff0c;trunc…

Python web实战 | 使用 Django 搭建 Web 应用程序 【干货】

概要 从社交媒体到在线购物&#xff0c;从在线银行到在线医疗&#xff0c;Web 应用程序为人们提供了方便快捷的服务。Web 应用程序已经成为了人们日常生活中不可或缺的一部分。搭建一个高效、稳定、易用的 Web 应用程序并不是一件容易的事情。本文将介绍如何使用 Django 快速搭…

OpenShift 4 - 可观测性之用 OpenTelemetry+Jaeger 实现 Distributed Tracing

《OpenShift / RHEL / DevSecOps 汇总目录》 说明&#xff1a;本文已经在支持 OpenShift 4.13 的环境中验证 文章目录 技术架构部署 Distributed Tracing 运行环境安装测试应用并进行观测跟踪参考 说明&#xff1a; 本文使用的测试应用采用的是 “手动 Instrumentation” 方式在…

WPF快速开发(2):图标库知识点

文章目录 前言知识点windows资源Style:样式Setter:属性继承关系 Trigger:触发器 WPF层级划分数据绑定声明数据上下文绑定数据模板 前言 图标资源下载 iconfont 知识点 windows资源 Window.Resources&#xff1a;资源位置声明X:Key&#xff1a;资源Id&#xff0c;用于前端的…

Kafka 实时处理Stream与Batch的对比分析

Kafka 实时处理Stream与Batch的对比分析 一、简介1. Kafka的定义和特点2. Kafka实时处理基础架构 二、Stream和Batch1. Stream和Batch的区别2. 对比Stream和Batch的优缺点Stream的优缺点Batch的优缺点 三、使用场景1. 使用场景对比Batch使用场景Stream使用场景 2. 如何选择Stre…

PHP服务器文件日志功能

php文件日志功能 <?php w_log(123,test/); w_log(array(a>1),test/); function w_log($data, $path log/) {$root_pathstr_replace(\\, /, dirname(dirname(__FILE__)));//改成你自己目录$dir $root_path . /log/ . $path;if (!is_dir($dir)) {mkdir($dir, 0777, tr…

2023年JAVA最新面试题

2023年JAVA最新面试题 1 JavaWeb基础1.1 HashMap的底层实现原理&#xff1f;1.2 HashMap 和 HashTable的异同&#xff1f;1.5 Collection 和 Collections的区别&#xff1f;1.6 Collection接口的两种区别1.7 ArrayList、LinkedList、Vector者的异同&#xff1f;1.8 String、Str…

【云原生】Minikube 部署

minikube 介绍 minikube 是本地 Kubernetes&#xff0c;专注于让 Kubernetes 易于学习和开发。 您所需要的只是 Docker&#xff08;或类似兼容的&#xff09;容器或虚拟机环境&#xff0c;只需一条命令即可使用 Kubernetes&#xff1a;minikube start 环境准备 2 个或更多 …

前端JS 展示上传图片缩略图(本地图片读取)

需求&#xff1a; 点击上传图片按钮&#xff0c;选择图片以后&#xff0c;不请求后端接口&#xff0c;直接将图片展示在缩略图中。 解决方案&#xff1a; 使用 FileReader 和 FileReader 中的 readAsDataURL 方法。 第一步 从input[type“file”] (上传文件标签) 里面拿到fil…

数据库管理-第九十四期 19c OCM之路-第四堂(02)(20230725)

第九十四期 19c OCM之路-第四堂&#xff08;02&#xff09;&#xff08;20230725&#xff09; 第四堂继续&#xff01; 考点3&#xff1a;SQL statement tuning SQL语句调优 收集Schema统计信息 exec dbms_stats.gather_schems_stats(HR);开启制定表索引监控 create index…

AutoSAR系列讲解(实践篇)9.2-信息发送的Filter机制

再强调一遍哈,这几节的内容大家看不懂没关系。都属于不常用的知识,仅作了解,假如用到了可以再挖出来看看。还有一点,很多的英文不太好翻译,比如这里的Filter,翻译成滤波,筛选我感觉都不太贴切,干脆就直接叫Filter了,之后应该会出现类似的英文,博主尽量想办法让大家理…

C语言每日一题:6.移除元素+合并两个有序数组。

第一题&#xff1a;移除元素 思路一&#xff1a; 一&#xff1a;暴力查找的方法&#xff1a; 1.找到对应val值的下标&#xff0c;返回数组的下标。 2.删除对应的下标&#xff0c;从前向后用后面覆盖前面。当后一个是数组最后一个数值是就赋值结束了&#xff08;注意数组越界的问…

ASCII对照表

文章目录 介绍ASCII对照表 介绍 ASCII(American Standard Code for Information Interchange)是美国信息交换标准代码。基于拉丁字母的一套电脑编码系统&#xff0c;主要用于显示现代英语和其他西欧语言。它是最通用的信息交换标准&#xff0c;并等同于国际标准ISO/IEC 646。AS…

width: calc(~“100% - 267px“);动态css 调样式

.result-filtering {color: #8b8b8b;display: flex;// width: 82.6%;width: calc(~"100% - 267px");}

leetcode131. 分割回文串(java)

分割回文串 leetcode131. 分割回文串题目描述回溯算法 动态规划代码演示 回文字符串 leetcode131. 分割回文串 题目描述 给你一个字符串 s&#xff0c;请你将 s 分割成一些子串&#xff0c;使每个子串都是 回文串 。返回 s 所有可能的分割方案。 回文串 是正着读和反着读都一…

[踩坑记] Linux环境下bitsandbytes安装是后报错解决

情境 在测试LLM Webui demo的时候&#xff0c;安装依赖pip install bitsandbytes0.40.0 后&#xff0c;python -m module name 时报错:CUDA Setup failed despite GPU being available. Please run the following command to get more information。 解决方法 从git hub 官方…