欢迎来到尧图网

客户服务 关于我们

您的位置：首页 > 新闻 > 社会 > React基础学习

React基础学习

2024/12/22 0:04:09 来源：https://blog.csdn.net/doomwatcher/article/details/144375786  浏览:  次   关键词：React基础学习

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;

效果

点击

版权声明:

本网仅为发布的内容提供存储空间，不对发表、转载的内容提供任何形式的保证。凡本网注明“来源：XXX网络”的作品，均转载自其它媒体，著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。

我们尊重并感谢每一位作者，均已注明文章来源和作者。如因作品内容、版权或其它问题，请及时与我们联系，联系邮箱：809451989@qq.com，投稿邮箱：809451989@qq.com

相关资讯

热文排行

最新新闻

推荐新闻

热搜词

【数据可视化案列】白葡萄酒质量数据的EDA可视化分析 【SolidWorks转URDF】ROS学习笔记 15.初始接口1.0 C# [创业之路-198]：华为的成立发展与新中国的建立与发展路径的相似性比较 智能系统、通信与计算机网络 Qt WORD/PDF（二）使用 QtPdfium库实现 PDF操作、打印等