React基础学习

server/2024/12/16 18:21:43/

React基础

📣 📣 📣 📢📢📢
☀️☀️点开就是缘分认识一下，我是小冷。是一个兴趣驱动自学练习两年半的的Java工程师。
📒 一位十分喜欢将知识分享出来的Java博主⭐️⭐️⭐️，擅长使用Java技术开发web项目和工具
📒 文章内容丰富：覆盖大部分java必学技术栈，前端，计算机基础，容器等方面的文章
📒 如果你也对Java感兴趣，关注小冷吧，一起探索Java技术的生态与进步，一起讨论Java技术的使用与学习
✏️高质量技术专栏专栏链接: 微服务，数据结构，netty，单点登录，SSM ，SpringCloudAlibaba等
😝公众号😝 ： 想全栈的小冷，分享一些技术上的文章，以及解决问题的经验
⏩当前专栏：React系列

React核心价值与前置知识

核心价值

  • 组件化（易开发易维护）

  • 数据驱动视图 ：定义好数据和ui的显示规则 即UI=f(state)

    • 只关注业务数据修改，不在操作DOM 增加开发效率

使用vite创建Recat项目

image-20241127191701363

开发规范

使用 prettier & eslint 规范开发

  • eslint 检查语法语义
  • prettier 检查代码风格
#eslint :
npm install eslint@typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev#prettier:
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

vite和 webpack的区别

webpack是一个非常流行的前端打包工具 比较经典 Create-React-App 是使用webpack作为打包工具的

vite 既是构建工具 又是打包工具

vite的特点：

  1. Vite打包项目 在启动和代码更新时更快
  2. vite使用了 es Module 语法（仅开发环境）

React JSX语法

内容 ：

  1. JSX语法
  2. 组件和props
  3. 实战： 列表页

JSX特点:

  1. JSX是js的扩展 写在js代码里面 组件的ui结构
  2. 语法和html很相似
  3. 不只是React独有

标签

  • 首字母大小写的区别 ， 大写字母是自定义组件
  • 标签必须闭合 如<input>在jsx是非法的
  • 每段JSX中只有一个根节点

image-20241127200934798

属性

和html基本相似

  • class要改为 className
  • style要使用js对象 不能是string 而且key需要使用驼峰写法

如下

image-20241127201256661

在JSX中插入js变量

  • 使用{}可以插入JS变量 函数 表达式
  • 可以插入文本 属性
  • 可以用于注释

代码案例

条件判断

​ 常见的if else 可以通过{}的方式实现，但是在JSX中代码一多就显得不够实用了 以下三种方法可以解决：

  • 使用&&
  • 使用三元表达式
  • 使用函数来判断

比如这样：反之如果flag等于false 就不会出现hello

image-20241205141921850

效果：

image-20241205142005694

三元运算符：flag为判断条件 来控制标签的显示

image-20241205142326966

效果：

image-20241205142357552

函数：

function isShowHello(){if (flag)return <p>show hello</p>return <p>defaultHello</p>
}

image-20241205142731794

效果 ：

image-20241205142625910

循环

  • 使用map来循环
  • 每一个循环项（item）都要有key
  • key需要具有唯一性

实现

const list = [{username:'zhangsan', name:"张三"},{username:'shuangyue', name:"双月"},{username:'lisi', name:"李四"},
]{/*循环*/}<div>{list.map(user=>{const {username,name} = userreturn <li key={username}>{name}</li>})}</div>

效果：

image-20241205143625839

PS ： 不建议使用 index 如 :

image-20241205143728414

因为我们的key 需要具有唯一性

小结实战 列表页

开发一个列表页

image-20241205144041914

调整一下显示的jsx

image-20241205144105516

保证这个代码结构简洁 ，然后就可以开始开发了

import React from 'react';
import './App1.css';function App() {const questionList = [{id: 'q1', title: '问卷1', isPublished: true},{id: 'q2', title: '问卷2', isPublished: true},{id: 'q3', title: '问卷3', isPublished: true},{id: 'q4', title: '问卷4', isPublished: false}]function edit(id) {console.log('edit', id);}return (<div><h1>列表详情页</h1><div>{questionList.map(question => {const {id, title, isPublished} = question;return <div key={id} className="list-item">&nbsp;<strong>{title}</strong>&nbsp;{isPublished ? <span style={{color: "green"}}>已发布</span> : <span>未发布</span>}&nbsp;<button onClick={() => edit(id)}>编辑问卷</button></div>})}</div></div>)}export default App;

css

.list-item {border: 1px solid #ccc;padding: 10px;margin-bottom: 16px;display: flex;justify-content: center;
}

效果

组件

react 一切皆是组件

  • 组件拥有一个ui片段
  • 拥有独立的逻辑和显示
  • 可大可小 可以嵌套

组件拆分的价值和意义

  • 组件嵌套来组织的 ui 结构 和 html 一样没有学习成本
  • 良好的拆分组件利于代码维护和多人协同开发
  • 封装公共组件或者直接使用第三方组件复用代码

好的组件化 逻辑是清晰的 更能提升开发效率并且更加的美观易读

image-20241205150607929

我们可以将组件理解成一个一个的函数

使用我们之前的列表页代码 拆分成组件 list1

image-20241205151215018

然后用improt的方式 引入到listdemo中

image-20241205151236675

这样我们的总框架就没有那么多的代码冗余 需要修改对应的代码 只需要寻找对应的组件文件即可

属性 props

  • 组件可以嵌套 有层级关系
  • 父组件可以向子组件传递数据
  • props是只读对象

props 其实就是实现差异化组件信息传递的一种手段

实践

将之前循环内显示数据的div拆出来抽象成组件：QuestCard.tsx 。 CSS还是和之前的内容一样

使用 ts主要是方便传入泛型

QuestCard.tsx

import React, {FC} from "react";
import './QuestCard.css'type proptype = {id: string,title: string,isPublished: boolean
}
export const QuestCard: FC<proptype> = (props) => {const {id, title, isPublished} = props;function edit(id) {console.log('edit', id);}return (<div key={id} className="list-item">&nbsp;<strong>{title}</strong>&nbsp;{isPublished ? <span style={{color: "green"}}>已发布</span> : <span>未发布</span>}&nbsp;<button onClick={() => edit(id)}>编辑问卷</button></div>)
}

image-20241205152744672

改造list1.jsx 这样就将显示问卷卡片抽取出来为一个独立的组件了

import React from "react";
import './list1.css';
import {QuestCard} from "./QuestCard";export const List1 = () => {const questionList = [{id: 'q1', title: '问卷1', isPublished: true},{id: 'q2', title: '问卷2', isPublished: true},{id: 'q3', title: '问卷3', isPublished: true},{id: 'q4', title: '问卷4', isPublished: false}]return (<div><h1>列表详情页</h1><div>{questionList.map(question => {const {id, title, isPublished} = question;return <QuestCard key={id} id={id} title={title} isPublished={isPublished}/>})}</div></div>)}

小结：

  • 如何定义和使用组件
  • props-父组件给子组件传递数据
  • 重构列表页 抽象出QuestionCard

效果

image-20241210135546835

children

场景: 当我们把内容签到在子组件标签中时,父组件会自动的在名为 children的prop中接受内容

image-20241210140715462

子组件传递父组件

顾名思义 其实就是子组件给父组件传递信息

function Son({onGetSonMsg}) {
//     son 中的数据const sonMsg = 'this is son msg';return <div>this is son<button onClick={() => onGetSonMsg(sonMsg)}>sendMsg</button></div>
}function AppDemo() {const [msg, setMsg] = useState('')const getMsg = (msg) => {console.log(msg)// msg = '我是信息'  这么改是无效的setMsg(msg)}return <div>this is APP Son send msg =>{msg}<Son onGetSonMsg={getMsg}/></div>
}
兄弟组件传递

使用状态提升实现兄弟组件通信

  • 其实就是有共同父组件的两个子组件传递信息
  • a 传递给父组件 然后由父组件 传递给 b

image-20241210142620094

代码

import {useState} from "react";function A({onGetAName}) {const name = "a name"return <div>this is A<button onClick={() => onGetAName(name)}>send</button></div>
}function B({pushAName}) {return <div>this is B{pushAName}</div>
}function AppDemo() {const [aName, setAName] = useState('');const getAName = (name) => {console.log(name)setAName(name)}return <div>this is app<A onGetAName={getAName}/><B pushAName={aName}/></div>
}export default AppDemo;
function A({onGetAName}) {const name = "a name"return <div>this is A<button onClick={() => onGetAName(name)}>send</button></div>
}function B({pushAName}) {return <div>this is B{pushAName}</div>
}function AppDemo() {const [aName, setAName] = useState('');const getAName = (name) => {console.log(name)setAName(name)}return <div>this is app<A onGetAName={getAName}/><B pushAName={aName}/></div>
}

效果

image-20241210143414793

HOOKS

useState

这是React 中的一个hook 函数 它允许我们向组件添加一个状态变脸,从而控制组件的渲染结果

image-20241210141807465

 const [msg, setMsg] = useState('')
  1. useState是一个函数 返回值是一个数组
  2. 数组中的第一个参数是状态变量,第二个参数是set函数用于修改状态
  3. useState的参数将作为状态变量的初始值

修改规则

在React 中 状态被认为是只读的 我们应该替换而不是修改 直接修改状态不会得到视图的更新

    const [msg, setMsg] = useState('')const getMsg = (msg) => {console.log(msg)// msg = '我是信息'  这么改是无效的setMsg(msg)}//如果是对象作为参数const [msg, setMsg] = useState({id:'122ds'})const getMsg = (msg) => {console.log(msg)// msg = '我是信息'  这么改是无效的setMsg({...msg,id:'123'})}

useContext 组件通信

  1. 使用createContext 方法创建一个上下文对象 ctx=
  2. 在顶层组件 app 中 通过 ctx.Provider提供数据
  3. 在底层组件 通过 useContext钩子函数获取消费数据

案例 :

image-20241210143845871

我们需要将app的消息传递到b

const MsgContext = createContext()function A() {return <div>this is A<B/></div>
}function B() {const msg = useContext(MsgContext)return <div>this is B from APP:{msg}</div>
}function AppDemo() {const msg = "this is app msg"return (<div><MsgContext.Provider value={msg}>this is app<A/></MsgContext.Provider></div>)
}

useEffect

这是React中的一个 hook 函数 ,用于在React 中创建不是由事件引起而是由渲染本身引起的操作,比如发送 AJAX请求 更改DOM等

image-20241210144624854

基础使用

需求: 在组件渲染完毕后,从服务器获得列表数据展示

语法:

useEffect(()=>{},[])
  1. 参数1是一个函数,可以把它叫做副作用函数,函数内部可以放置要执行的操作
  2. 参数2是一个数组 ,数组里放置依赖项,不同依赖项会影响第一个参数的执行,当该参数是一个空数组的时候,副作用函数只会在组件渲染完毕后执行一次
import {useEffect, useState} from "react";const URL = 'http://geek.itheima.net/v1_0/channels'function AppDemo() {const [list, setList] = useState([]);useEffect(() => {async function getList() {const res = await fetch(URL)const jsonRes = await res.json()console.log(jsonRes)setList(jsonRes.data.channels)}getList()console.log("list", list)}, []);return (<div>this is app<ul>{list.map(item => <li key={item.id}>{item.name}</li>)}</ul></div>)
}export default AppDemo;

效果

image-20241210150832714

依赖项参数

image-20241210150906961

function AppDemo() {/*1. 没有依赖项*/const [count, setCount] = useState(0);// useEffect(() => {//     console.log("副作用函数执行了")// });/*2 传入空数组依赖*/// useEffect(() => {//     console.log("副作用函数执行了")// }, []);useEffect(() => {console.log("副作用函数执行了")}, [count]);return <div>this is app<button onClick={() => setCount(count + 1)}>+{count}</button></div>
}

清除副作用

在useEffect中编写的由渲染本身引起的对接组件外部的操作，社区也经常把它叫做副作用操作，我们想在组件卸载时把这个定时器清理掉，这个过程就是清理副作用

import {useEffect, useState} from "react";function Son() {useEffect(() => {const timer = setInterval(() => {console.log("定时器执行中...")}, 1000)return () => {//     清楚副作用clearInterval(timer)}}, []);return <div>this is son</div>
}function AppDemo() {const [show, setShow] = useState(true)return <div>this is app{show && <Son/>}<button onClick={() => setShow(false)}>卸载组件</button></div>
}export default AppDemo;

自定义hook

暂时没有什么很好的例子 写一个比较简单的 之后再拓展

import {useState} from "react";function useToggle() {
// 可复用代码const [value, setValue] = useState(true);const toggle = () => {setValue(!value)}return {value, toggle}
}function AppDemo() {const {value, toggle} = useToggle()return <div>this is app{value && <div>this is show Toggle</div>}<button onClick={toggle}>Toggle</button></div>
}export default AppDemo;

效果

点击


http://www.ppmy.cn/server/150691.html

相关文章

OpenCV中的图片矫正

OpenCV中的图片矫正

一、实验原理 基于计算机视觉中的透视变换&#xff08;Perspective Transformation&#xff09;&#xff0c;也称为单应性&#xff08;Homography&#xff09;。透视变换是一种几何变换&#xff0c;用于将图像从一个平面映射到另一个平面&#xff0c;同时保持直线的直线性。这种…
阅读更多...
【机器学习算法】——决策树之集成学习：Bagging、Adaboost、Xgboost、RandomForest、XGBoost

【机器学习算法】——决策树之集成学习：Bagging、Adaboost、Xgboost、RandomForest、XGBoost

集成学习 **集成学习(Ensemble learning)**是机器学习中近年来的一大热门领域。其中的集成方法是用多种学习方法的组合来获取比原方法更优的结果。 使用于组合的算法是弱学习算法&#xff0c;即分类正确率仅比随机猜测略高的学习算法&#xff0c;但是组合之后的效果仍可能高于…
阅读更多...
uniapp h5 js设置监听:超时未操作返回首页(全局只监听一次,可设置监听事件+检查时间+超时时长)

uniapp h5 js设置监听:超时未操作返回首页(全局只监听一次,可设置监听事件+检查时间+超时时长)

功能实现: 可自定义超时时长,检查时间超时后跳转首页(/pages/home/index/index); 如果在首页,则不进行跳转监控状态下, 用户有任意操作(包括但不限于点击,滑动,跳转页面等),则重置监听,重新开始算时间超时方法及逻辑封装到单独的js文件中 全局只需在app.vue创建监听,其他页面无…
阅读更多...
leetcode 面试经典 150 题：移除元素

leetcode 面试经典 150 题：移除元素

链接移除元素题序号27类型数组解题方法双指针难度简单 题目 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素。元素的顺序可能发生改变。然后返回 nums 中与 val 不同的元素的数量。 假设 nums 中不等于 val 的元素数量为 k&#xff0c;要…
阅读更多...
聊聊Oracle自适应查询优化

聊聊Oracle自适应查询优化

成也AQO败也AQO 因为工作的原因&#xff0c;我们接触到的客户大部分是金融和运营商行业&#xff0c;这些客户有个最大的特点是追求稳定&#xff0c;对于使用数据库新特性持保守的态度&#xff0c;不会轻易尝试某些可能会导致生产系统不稳定的新特性。上线前通常都会将一些新特…
阅读更多...
SpringBoot【十】mybatis之xml映射文件＞、＜=等特殊符号写法！

SpringBoot【十】mybatis之xml映射文件＞、＜=等特殊符号写法！

一、前言&#x1f525; 环境说明&#xff1a;Windows10 Idea2021.3.2 Jdk1.8 SpringBoot 2.3.1.RELEASE 在利用mybatis进行开发的时候&#xff0c;编写sql时可能少不了>、<等比较符号&#xff0c;但是在mapper映射文件中直接使用是不行的&#xff0c;会报错&#xff0…
阅读更多...
Guava库 学习入门--概览与入门

Guava库 学习入门--概览与入门

Guava库的介绍 Guava库是由Google开发的Java开源库&#xff0c;它的主要目的是简化常见的编程任务&#xff0c;提供高效的数据处理方法。Guava库中的功能覆盖了从集合操作、缓存、函数式编程、并发编程以及其他诸多实用的工具类。 Guava的安装与依赖配置 Guava库可以通过Mav…
阅读更多...
使用Docker部署FTP和Nginx并通过HTTP访问FTP里的文件

使用Docker部署FTP和Nginx并通过HTTP访问FTP里的文件

使用 Docker 部署 FTP 和 Nginx 通过 HTTP 访问 FTP 里的文件&#xff0c;这是一个常见的需求&#xff0c;通常用于将存储在 FTP 服务器上的文件通过 Web 方式提供访问。以下是如何操作的详细步骤&#xff1a; 1. 部署 FTP 服务器 (vsftpd) 我们使用 fauria/vsftpd 镜像&…
阅读更多...
最新文章

Copyright @ 2022~2023