关于React的学习

已于 2024-08-26 18:21:37 修改
阅读量242 收藏 4
点赞数 5
文章标签： react.js 学习 前端
于 2024-08-18 12:44:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63997101/article/details/141292176
版权

一、React的框架结构说明

my-first-react-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock (或 package-lock.json)

1.1src目录下的文件说明

App.css：App组件的样式文件。
App.js：著组件文件，定义了一个基础的React组件。
App.test.js：App组件的测试文件。
index.css：全局样式文件。
index.js：应用的入口文件，负责渲染React组件到DOM中。
logo.svg： React logo的SVG文件。
reportWebVitals.js：用于检测的文件，可以帮助了解分析应用的性能。
setupTests.js：用于设置测试环境的文件。

二、Hello React

通过操作虚拟DOM来进行视图的渲染
组件化：对于页面的划分
模块化：对于功能的划分
React是一个由于构建组件化的UI库
ReactDOM.render()
React.createElement()
React.Component() // 创建组件

<body>
	//1、引入react核心库
	//2、引入创建reactDOM的库
	//3、 引入babel，用于将jsx转为js
</body>

对于script标签一定要写上type=“text/babel”

三、创建虚拟DOM的两种方式

3.1 使用jsx创建虚拟dom

流程：

  1. 引入将jsx转换成js的cdn
  2. 创建虚拟dom
  3. 渲染虚拟dom到页面上面
<script type="text/babel" > /* 此处一定要写babel */
		//1.创建虚拟DOM
		const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
			<h1 id="title">
				<span>Hello,React</span>
			</h1>
		)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>

3.2 使用js创建虚拟dom

流程：

  1. 准备容器
  2. 创建虚拟dom
  3. 渲染虚拟dom到页面上面
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>

	<script type="text/javascript" > 
		//1.创建虚拟DOM
		const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>

3.3 虚拟dom与真实dom的区别

分别但因一个真实dom和虚拟dom

console.log('虚拟DOM',VDOM); //Object
console.log('真实DOM',TDOM); //<div id="demo"></div>

关于虚拟dom：

  1. 本质上就是Object对象
  2. 虚拟dom比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
  3. 虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

四、jsx的语法规则

1.定义虚拟DOM时，不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class，要用className。
4.内联样式，要用style={{key:value}}的形式去写。
5.只有一个根标签
6.标签必须闭合
7.标签首字母
(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

举例：

一定注意区分：【js语句(代码)】与【js表达式】
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式：
(1). a
(2). a+b
(3). demo(1)
(4). arr.map()
(5). function test () {}
2.语句(代码)：
下面这些都是语句(代码)：
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsx小练习</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel" >
		
		//模拟一些数据
		const data = ['Angular','React','Vue']
		//1.创建虚拟DOM
		const VDOM = (
			<div>
				<h1>前端js框架列表</h1>
				<ul>
					{
						data.map((item,index)=>{
							return <li key={index}>{item}</li>
						})
					}
				</ul>
			</div>
		)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>
</html>

五、react中定义组件

5.1函数式组件

执行了ReactDOM.render( < MyComponent /> …之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>函数式组件</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//1.创建函数式组件
		function MyComponent(){
			console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
			return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
		}
		//2.渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
	</script>
</body>
</html>

5.2类式组件

执行了ReactDOM.render(< MyComponent />…之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_类式组件</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//1.创建类式组件
		class MyComponent extends React.Component {
			render(){
				//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
				//render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
				console.log('render中的this:',this);
				return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
			}
		}
		//2.渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
	</script>
</body>
</html>

六、组件的特性

6.1组件状态state

无需操作dom元素，需更新组件的 state，然后根据新的 state 重新渲染用户界面

//创建一个有状态的类组件
import React, { Component } from 'react';

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

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

//在 src/index.js 中渲染该组件：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Counter from './Counter';

const root = ReactDOM.createRoot(document.getElementById("root"));
// 渲染 Counter 组件
root.render(<Counter />, document.getElementById('root'));
王蛋111
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React学习路线
警警的博客
06-26 1073
React学习路线——初级、中级和高级
React 学习笔记
weixin_41184962的博客
04-25 4434
1. react- 用于构建用户界面的javaScript 库react 是一个将数据渲染微HTML视图的开源 JavaScript库2. facebook开发，且开源3. 原生JavaScript 原生javaScript操作DOM繁琐、效率低（DOM-APL 操作 UI)。 使用javascript直接操作DOM,浏览器会进行大量的重绘重排。 原生JavaScript没有组件化编码方案，代码复用率低。4. react 特点 react 核心库和re
React 入门学习
m0_62118859的博客
04-21 9324
目录 1. React 介绍 2. React 特点 （1）声明式 （2）组件化 （3）一次学习，跨平台编写 3. React 脚手架 方式 1 方式 2 4. React 基本使用 5. React 创建元素练习 1. React 介绍 了解 react 的历史背景和基本概念 React起源于 Facebook 的内部项目。因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套...
React框架的学习
Gentman_Dylan的博客
03-01 2153
前端-React框架一、环境搭建使用 create-react-app 快速构建 React 开发环境二、react目录以及文件目录结构组件基础模板三、React的知识点1.JSX语法自定义属性样式数组2.生命周期3.事件处理阻止默认行为this指向函数传参4.Context（上下文）API5.组件API设置状态:setState替换状态：replaceState设置属性：setProps替换属性：replaceProps强制更新：forceUpdate获取DOM节点：findDOMNode判断组件挂载状态
react学习小记
wajueju的博客
08-05 1264
react
React学习手册.zip
07-17
本React学习手册将深入探讨React的核心概念和实战技巧，帮助你从入门到精通。 首先，React的核心概念包括组件化开发。组件是React的基础单元，可以理解为可复用的代码块，它们像乐高积木一样组合起来构建整个应用。...
React学习路线脑图
02-01
React学习路线脑图
React学习手册完整版带目录.zip
06-25
"React学习手册完整版带目录.zip"包含了深入学习React所需的所有资料，包括基本概念、核心原理以及高级技巧。 首先，手册的目录可能会涵盖以下关键知识点： 1. **React基础知识**：介绍React的基本概念，如JSX语法...
react学习入门_react入门_react前端学习
09-20
这个“react学习入门”资料包显然是为初学者设计的，旨在帮助他们快速掌握React的基础知识。 React的核心概念是组件化。组件是React中的独立、可重用的代码块，它们可以像HTML元素一样嵌套和组合。通过这种方式，...
react-react学习心得
08-14
在学习React的过程中，掌握JSX语法至关重要。JSX是JavaScript的一个扩展，允许我们在JavaScript中书写类似HTML的结构。JSX让组件的定义更直观，同时能够方便地将属性和子组件传递给其他组件。 React的虚拟DOM...
React 入门第七天：探索状态管理与Context API
Caleb的博客
08-27 119
在React学习的第七天，我深入了解了React的状态管理机制，特别是如何通过来实现跨组件的状态共享。React的状态管理是组件交互的核心，而则为全局状态的共享提供了一个简洁而强大的解决方案。
Netty Reactor面试连环问
最新发布
Hi，我是sharkchili，CSDN Java领域博客专家，开源项目JavaGuide维护人员，我想写一些有意思的东西，希望对你有帮助。
08-27 586
笔者分别带入索引0、5、8，进行与运算时，真正参与的二进制永远是和永远是7以内的进制，得出的结果分别是0、5、0，永远不会越界，并且运算性能还能得到保证。中查看是否有继续的任务，如果有则查看它的到期时间，并基于这个时长查询是否存在就绪的任务。因为近期收到很多读者的私信，所以也专门创建了一个交流群，感兴趣的读者可以通过上方的公众号获取笔者的联系方式完成好友添加，点击备注。因为近期收到很多读者的私信，所以也专门创建了一个交流群，感兴趣的读者可以通过上方的公众号获取笔者的联系方式完成好友添加，点击备注。
React 入门第一天：从Vue到React的初体验
Caleb的博客
08-21 620
作为一名合格的前端工程师，怎么能只会Vue呢？学习React不仅是一场新技术的探索，更是对前端开发思维的一次重新审视。在这里，我将分享学习React的心得，希望能帮助那些和我一样从Vue转向React的开发者。
Zustand：让React状态管理更简单、更高效
丫丫不秃头噢---
08-24 468
这个单词在德语里是状态的意思（发音：促stand）
react 中的useState useEffect
huhudeni的博客
08-23 695
下面的这些hook使我们常用的一些useStateuseCallback、useMemo、useRef 和 useContex下面我将讲解什么时候使用是最好的首先我们需要明确的一点是，这些hook都是在做缓存。
关于 Vue/React 的 cli 中运用 webpack 打包的原理简单解析
weixin_47342624的博客
08-27 183
引入 webpack.config.js 文件，通过webpack 去加载 webpack.config.js 文件，会返回一个compiler对象，里面内置了 run方法即可对 webpack.config.js 文件进行编译运行build.jsif(err) {} else {})命令行中通过 node 命令执行该文件即可实现运用 webpack 对资源文件进行打包。
React 入门第六天：理解组件生命周期与效果
Caleb的博客
08-26 473
React组件的生命周期指的是从组件创建到销毁的全过程。理解组件的生命周期对高效管理组件的状态和副作用至关重要。虽然函数组件主要依赖于Hooks来处理生命周期和副作用，类组件依然是学习生命周期的基础。
react面试题十
笃励的博客
08-27 635
React中的Context API 是 React 提供的一种在组件树之间共享数据的方法，而无需在每个层级手动地通过 props 传递。这对于那些需要在多个层级间传递的数据（如当前认证的用户、主题或首选的UI语言）来说非常有用，因为它可以避免"prop drilling"（即通过组件树逐层传递props的过程）。综上所述，React Native是React在移动应用开发领域的延伸和拓展，它继承了React的核心思想和特性，并通过一系列技术优化和创新实现了跨平台、高性能的移动应用开发能力。
React antd 表格嵌套表格（可展开）
m0_63788547的博客
08-27 135
React antd 表格嵌套表格（可展开）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值