react18框架笔记

React

React 是 facebook 出的一款针对视图层的库(library)。它是基于单向数据流思想开发的，主要的一个功能就是针对视图显示，让我们把一个项目拆分成一个一个组件进行开发维护。

官网

目前我们讲的 react 是基于 18.2 的版本。react 每一个版本更新之后会加入新的 api，但是同时也会保证向下兼容

基础语法和常见 API

<!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>jsx语法</title></head><body><div id="root"></div><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><scriptcrossoriginsrc="https://unpkg.com/react@18/umd/react.development.js"></script><scriptcrossoriginsrc="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script type="text/babel">const App = () => {return (<><h1>这是一个组件</h1></>);};ReactDOM.createRoot(document.querySelector("#root")).render(<App />);</script></body>
</html>

jsx 语法

就是在 js 中可以直接写 html 标签

组件定义和组件传参

function 定义的组件又叫无状态组件。每一个组件都需要一个返回值，返回当前组件展示的 dom 结构

组件传参

  • 父传子，使用属性

  • 子传父，使用方法调用

  • 非相关组件，使用 context 上下文或者 redux 状态管理插件

children

组件内部嵌套的标签可以通过 children 属性获取

常见的 Hooks

hooks 是 react16.8 之后新增的 API，可以在 function 定义的组件中设置局部状态数据和模拟组件生命周期

hooks 只能在 function 定义的组件内部使用，因为它内部实现的时候使用了数组和闭包，所以 hooks 不能放置在条件表达式和循环语句中。只能放在组件的最外层

useState

最用式定义一个局部状态数据，当组件的状态或者属性改变的时候组件会重新渲染(即定义组件的这个方法会重新执行)

const Counter = () => {// useState定义一个状态数据//  接收一个默认值作为参数，返回一个数组//    数组的第一项表示可以使用的变量名 第二项表示改变数据的方法//  一定要注意，数据改变只能调用方法二const [count, setCount] = React.useState(0);return <button onClick={() => setCount(count + 1)}>按钮--{count}</button>;
};
useEffect

副作用，useEffect 接收两个参数，参数一是一个回调函数，参数二是一个依赖数组。当依赖数组中的数据改变之后，会触发回调函数重新执行。可以模拟组件的生命周期钩子函数

...
useEffect(()=>{console.log('执行了')return () => {// 此方法在组件销毁的时候执行}
}, [a, b, c])
...

useEffect 的参数二有以下三种形式：

  1. 参数二为空数组。那么参数一的回调函数只有在组件初始化的时候执行一次

  2. 参数二中存在数据。那么参数二中的每一个数据改变，都会触发回调函数的执行

  3. 参数二不存在，就是只有参数一。那么每一次组件更新的时候，回调函数都会执行

useEffect 参数一的回调函数中，可以返回一个 function，这个返回的方法在组件销毁的时候执行

memo

memo 的作用是对组件做缓存，当组件接收到的属性不改变的话，组件不会重新更新。以后会经常使用

推荐大家大量使用，主要做优化

useRef

useRef 的作用是获取 dom 元素，通过 current 属性实现

const App = () => {const hTag = React.useRef();const pTag = React.useRef();React.useEffect(() => {console.log(hTag);console.log(pTag); // .current属性可以获取dom元素pTag.current.style.color = "red";}, []);return (<><h1 ref={hTag}>这是一个组件</h1><p ref={pTag}>这是一段话</p></>);
};
useCallback

作用是缓存一个 function，接收两个参数，参数一表示被缓存的方法，参数二表示依赖项。当依赖的数据不改变的话，回调被缓存的方法不会重新定义

React.useCallback(() => {}, []);
useMemo

作用是缓存一个值，接收两个参数，参数一是被缓存的数据，参数二是依赖项。当依赖项不改变的时候，缓存的数据不会更新

useMemo 和 useCallback 的区别：useMemo 缓存一个值，useCallback 缓存一个 function

useContext

context 上下文，用来实现跨组件之间传参。useContext 可以获取 context 中的数据

useReducer

useReducer 是另一种状态数据存储的方案，和 useState 不一样。类似于 redux 的实现

useReducer 接收两个参数，返回一个数组。它的数据改变只能通过 dispatch 一个 action 实现。两个参数分别为：

  1. reducer 函数,这个方法接收两个参数。原始状态数据和一个 action，在方法体中根据 action 的 type 不一样，返回个新的数据作为状态数据值

  2. 初始值

useReducer 函数的返回值是一个数组，数组的第一项表示状态数据，第二项是 dispatch 方法。如果要改变数据，只能 dispatch 触发 reducer 函数执行。

...
const [state, dispatch] = useReducer((state, action)=>{switch(action.type) {case 'PLUS':return {...state, count: state.count+1}default:return state}
}, initState)
...
自定义 hooks

就是自己定义一个 hooks，定义的时候把方法名按照 hooks 的命名方式写，比如 useXXX

class 定义组件

class 定义的组件有自己的局部状态和生命周期钩子函数。class 定义的组件都继承者 Component 或者 PureComponent。

Component 和 PureComponent，他们两个都可以用来作为被继承的父类，实现 class 定义组件。PureComponent 定义的组件相当于做了缓存，在进行数据比较的时候是进行的浅比较，和 memo 效果类似。

function 定义的组件和 class 定义的组件两者是可以混合使用

class Counter extends React.Component {constructor(props) {super(props);this.state = {count: 1,title: "这是一个计数器组件",};}// 每一个class定义的组件都需要render方法，这个方法返回一个dom元素，表示组件需要显示的节点内容render() {return (<><h1>{this.state.title}</h1></>);}
}
state

状态数据定义的时候使用 state 进行。改变状态使用 setState，setState 是异步的，我们想获取改变之后的最新值，可以使用 setState 的参数二，它是一个 function，可以在里面获取 state 的最新值

...
this.setState({count: this.state.count+1
}, () => {// 在此处可以获取state的最新值
})
...
context 和 ref 在 class 定义的组件中使用
class Counter extends React.Component {constructor(props) {super(props);this.state = {count: 1,title: "这是一个计数器组件",};}// 每一个class定义的组件都需要render方法，这个方法返回一个dom元素，表示组件需要显示的节点内容render() {return (<><h1 ref="ht1">{this.state.title}</h1><buttononClick={() => {// refs获取所有设置了ref属性的标签}}>获取dom</button></>);}
}
Counter.contextType = context; // 设置了之后，就可以直接在组件中通过this.context获取上下文中的数据
生命周期钩子函数

16.3 之前

  1. componentWillMount,将要挂载

  2. render

  3. componentDidMount【重要】，挂载完成，很重要。一般在这里进行调接口取初始化数据

  4. componentWillReceiveProps，将要接收新的属性。属性数据改变之后执行

  5. shouldComponentUpdate【重要】，判断组件是否需要更新，主要用来做组件性能优化。返回一个 bool 值，为 true 后续的更新阶段会执行；否则不执行更新阶段

  6. componentWillUpdate，将要更新

  7. render

  8. componentDidUpdate，更新

  9. componentWillUnmount，卸载

class 定义组件的生命周期和 function 组件的 useEffect 对应关系：

  1. componentDidMount，对应参数二为空白数组

  2. componentDidUpdate，对应参数二中有数据

  3. componentWillUnmount，对应参数一返回的 function

嵌套组件的生命周期，在执行完父组件的 componentWillMount 之后，进行 render 时，开始解析 dom。发现子组件之后，就会执行子组件的创建到挂载的生命周期钩子函数，当子组件全部挂载完成之后，会执行父组件的挂载完成。

脚手架搭建项目和单文件组件

官方脚手架

官方的脚手架，搭建项目

npx create-react-app first-react-app # 创建一个react项目
cd first-react-app
npm start # 启动项目，默认3000端口

vite

使用 vite 创建 react 项目

npm init vite@latest #

单文件组件

常用插件和 ui 组件组件库

react-router-dom

路由是一个组件，这个东西是你以后面试的时候几乎不会问的一个问题。

官网

npm i react-router-dom # 安装插件，我们讲的是6.4的

常见的组件：

  1. HashRouter，路由的最外层节点，所有的路由组件都需要放在它里面

  2. Link，链接。需要一个 to 属性，可以添加 state 和 replace 等属性

  3. Routes，Route 的外层节点

  4. Route，每一个路由。需要 path 和 element 两个属性。path 表示路径，element 表示对应的组件

  5. NavLink，链接。相对于 Link 来讲，多了一个选中样式

  6. Navigate，实现跳转。通过 to 属性

常见的 hooks：

  1. useParams,可以获取动态路由中的参数

  2. useLocation,可以获取 location 数据，直接通过 search 或者 state 获取传递的参数

  3. useNavigate,可以实现页面跳转。参数一表示地址，参数二是配置项。配置项中常用的有:state(传递的数据),replace(不生成历史记录)等

传参方式，有三种：

  1. params，动态路由传参

  2. search，url 中直接通过?拼接字符串

  3. state，就是 state

路由嵌套

  • 直接写 Route 在对应的位置就好

  • 可以使用 Outlet 组件，它表示子路由展示的位置

私有路由即登录判断

需要借助自定义组件的封装

404

antd

官网

ui 组件库

antv

antd 出的一款图表插件https://charts.ant.design/zh

npm i @ant-design/charts # 安装插件

redux

redux 官网

redux 中文网站

是一个状态管理插件，作用是实现项目中的数据共享。可以和任何一个框架结合，比如：react、angular、vue 都行。遵循单向数据流的机制:数据是单向流动的，我们在视图中 dispatch 派发一个 action 改变数据，数据改变之后视图重新渲染。

原始使用方式
# redux是做数据管理的，所有的数据相关的操作都放在redux中
npm i redux # 安装核心库
npm i react-redux # 这个插件可以让我们redux数据和react项目关联

redux中常用的 api：

  • createStore，创建一个 redux 数据。目前(2022-11)已经不被推荐使用，建议使用 redux-toolkit 创建

  • combineReducers，合并多个 reducer 函数为一个

react-redux中常用的组件和 api：

  • Provider，组件。放在项目的最外层，通过 store 属性实现 redux 数据和 react 项目的关联

  • connect，高阶组件。作用是把 redux 中的数据和 dispatch 方法映射到组件的属性上。可以在 class 和 function 定义的组件中同时使用

  • useSelector，方法。作用是在 function 定义的组件中获取 redux 中的数据

  • useDispatch，方法。作用是在 function 定义的组件中获取 dispatch 方法

redux-thunk，这是一个中间件，用来解决 redux 中的异步操作。在 redux 中，所有的 action 都是一个 plain object，如果牵涉到异步，需要借助中间件实现。它的作用是判断我们的 action 数据类型，如果是一个对象，那么直接执行；如果是一个 function，那么会把 dispatch 函数当参数传给方法，在方法内可以调用 dispatch

redux-toolkit 工具包

RTK 官网

作用是可以让我们快速的实现 redux 开发，封装好了各种功能

npm i @reduxjs/toolkit react-redux # 安装

权限控制

权限控制分为前端和服务器端，都会做限制。我们前端会根据当前登录用户的角色展示不同的路由信息，每一次调接口的时候服务器端也会验证权限，没有权限的时候返回 401 状态码，我给用户提示。

展开讲讲：每一个路由上都会添加一个属性 role，我会根据用户登录之后服务器端返回的角色，进行动态路由展示的控制

React 企业级开发框架

就是在公司中可以直接拿来开箱即用的框架，不需要额外的做多余的配置

umi 和 dva

umi

是蚂蚁金服出的一个框架，内置了路由等各种插件，可以直接拿来做项目开发

【官网】

nvm，是一个 nodejs 的版本管理工具，可以在电脑上安装不同版本的 node。当然你也可以直接安装不同的 node 安装包

# 创建项目，国内建议使用pnpm
# pnpm是一个node的包管理工具，超级好用
pnpm dlx create-umi@latest# or 使用npx创建项目
# npx create-umi@latestpnpm dev # or # npm run dev
dva

【官网】

antd pro

【官网】

npx @ant-design/pro-cli create pgsq-doctors-app # 创建一个antd pro项目

其他的

tailwind.css

这是目前很流行的一个 css 库，可以让我们非常方便的实现页面布局。它内置了很多 css 效果，我们只需要按照样式名进行使用就好

官网

中文翻译的文档，版本有些老

使用

# 在vite项目中使用
npm install -D tailwindcss postcss autoprefixer # 安装
npx tailwindcss init -p # 初始化配置文件

next.js

是一个 react 的开发框架，可以让我们是用 react 做多页面开发和服务器端渲染。最新的版本是 13 的，十月份的时候刚更新的。这个内容是作为大家了解的知识点

【中文网站】

【官网】

npx create-next-app test-app # 创建一个next项目

SPA 单页面应用程序做 SEO 的解决办法：SPA 就是单页面应用程序，所有的页面都是只有一个入口 html 文件，没有办法做 SEO，为了解决这个问题我们可以使用 nuxt.js 或者 next.js 等这种服务器端渲染框架作为替代。早期的解决方案，就是制作一个专门用来做 SEO 的静态网站，判断访问我们的是搜索引擎的蜘蛛时，跳转到静态网站，用户访问的时候显示我们的真实项目。可以通过这个网站查站点的 seo 优化信息SEO综合查询 - 站长工具

目录

pages 文件夹中的文件会自动的生成路径；其中 api 文件夹中的内容为服务器端数据接口

获取数据的方式

  • 直接通过 api 文件夹中的接口

  • 在页面中使用对应的方法

    • getServerSideProps，每一次请求页面的时候都会执行

    • getStaticPaths，编译的时候执行一次，用来生成静态页面

    • getStaticProps，编译的时候执行一次，用来根据 getStaticPaths 中路径参数生成对应路径的静态页面。两个方法需要配合使用

样式化组件和其他 ui 组件库

styled-components

样式化组件，以后如果你进了一些好公司，做组件封装的时候可能会用到这个东西

其他的 ui 组件库

  • antd mobile

  • mui

  • ionic

  • framework7

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

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

相关文章

Java多线程＜二＞多线程经典场景

Java多线程＜二＞多线程经典场景

leetcode 多线程刷题 上锁上一次&#xff0c;还是上多次&#xff1f; 同步的顺序。 1. 交替打印字符 使用sychronize同步锁使用lock锁使用concurrent的默认机制使用volitale关键字 Thread.sleep() / Thread.yield机制使用automic原子类 方式1 &#xff1a;使用互斥访问st…
阅读更多...
window 服务使用powershell 调用office进行文档内存不够的处理

window 服务使用powershell 调用office进行文档内存不够的处理

在项目中为了实现office文件的预览&#xff0c;专门做了个service进行文件的定时转换。 在测试时发现&#xff0c;服务程序 双击执行的时候&#xff0c;文件的转换一切正常&#xff0c;但是当把服务程序安装为服务的时候吗&#xff0c;就会出现如下错误&#xff1a; $PowerPo…
阅读更多...
Matlab figure窗口最大化 窗口全屏 图表窗口最大化

Matlab figure窗口最大化 窗口全屏 图表窗口最大化

我有一个项目&#xff0c;需要把多个数据文件画成的曲线一个个保存为图片&#xff0c;然后再进行集中对比分析。程序运行后&#xff0c;打开目录下保存的图片&#xff0c;发现图片的尺寸都很小&#xff0c;画质也不清晰&#xff0c;后来发现原来matlab显示图片的时候&#xff0…
阅读更多...
UCi数据集处理技巧记录

UCi数据集处理技巧记录

如何起步使用UCI数据集 这里记录一下如何把带分号的数据变成经常使用的csv形式。这里使用wine的例子 https://archive.ics.uci.edu/dataset/186/winequality 原始数据 Wine UCI数据操作 这种带分号的使用python的不好阅读&#xff0c;可以尝试以下步骤&#xff1a; 转变为t…
阅读更多...
2023-12-20 LeetCode每日一题（判别首字母缩略词）

2023-12-20 LeetCode每日一题（判别首字母缩略词）

2023-12-20每日一题 一、题目编号 2828. 判别首字母缩略词二、题目链接 点击跳转到题目位置 三、题目描述 给你一个字符串数组 words 和一个字符串 s &#xff0c;请你判断 s 是不是 words 的 首字母缩略词 。 如果可以按顺序串联 words 中每个字符串的第一个字符形成字符…
阅读更多...
微信小程序-父子页面传值

微信小程序-父子页面传值

父子页面传值 父页面向子页面传值 方法一&#xff1a; 父页面&#xff1a; 1. /page/xxx/xxx?id1子页面&#xff1a; onLoad:function(option){ }方法二 <bindtap“func” data-xxx””> 子页面向父页面传值 定义父子页面 父页面&#xff1a;hotspot 子页面&a…
阅读更多...
网安面试三十道题(持续更新)

网安面试三十道题(持续更新)

91 mof提权 ## 是mysql的提权方式&#xff0c;在Linux下不能用&#xff0c;就是利用了 c:/windows/system32/wbem/mof/目录下的nullevt.mof文件&#xff0c;每分钟都会在一个特定的时间去执行一次的特征 sql语句&#xff1a; ## 通过shell上传这个文件&#xff0c;通过sql语句写…
阅读更多...
惨案后续之---重装python 3.8版本的一系列操作

惨案后续之---重装python 3.8版本的一系列操作

AssertionError: The environment must specify an action space. 报错 引发的惨案-CSDN博客https://blog.csdn.net/qq_38480311/article/details/135210089 总结&#xff1a; 接上昨日惨案&#xff0c;大意就是 为了解决一个错误&#xff0c;要安装gym0.18.0&#xff0c;经历了…
阅读更多...
小信跳房子的题解

小信跳房子的题解

原题描述&#xff1a; 时间&#xff1a;1s 空间&#xff1a;256M 题目描述&#xff1a; 小信在玩跳房子游戏&#xff0c;已知跳房子游戏的图表现为一颗完美的具有个节点的二叉树。从根节点依次编号为。节点的左子节点编号为&#xff0c;右子节点编号为。 小信从从节点出发&…
阅读更多...
Docker之镜像上传和下载

Docker之镜像上传和下载

目录 1.镜像上传 1) 先上百度搜索阿里云 点击以下图片网站 2) 进行登录/注册 3) 使用支付宝...登录 4) 登录后会跳转到首页->点击控制台 5) 点击左上角的三横杠 6) 搜索容器镜像关键词->点击箭头所指 ​ 编辑 7) 进入之后点击实例列表 8) 点击个人实例进入我们的一个…
阅读更多...
C++每日一练（8）：图像相似度

C++每日一练（8）：图像相似度

题目描述 给出两幅相同大小的黑白图像&#xff08;用0-1矩阵&#xff09;表示&#xff0c;求它们的相似度。 说明&#xff1a;若两幅图像在相同位置上的像素点颜色相同&#xff0c;则称它们在该位置具有相同的像素点。两幅图像的相似度定义为相同像素点数占总像素点数的百分比。…
阅读更多...
【HarmonyOS】ArkTS语言介绍与组件方式运用

【HarmonyOS】ArkTS语言介绍与组件方式运用

从今天开始&#xff0c;博主将开设一门新的专栏用来讲解市面上比较热门的技术 “鸿蒙开发”&#xff0c;对于刚接触这项技术的小伙伴在学习鸿蒙开发之前&#xff0c;有必要先了解一下鸿蒙&#xff0c;从你的角度来讲&#xff0c;你认为什么是鸿蒙呢&#xff1f;它出现的意义又是…
阅读更多...
设计模式：抽象工厂模式（讲故事易懂）

设计模式：抽象工厂模式（讲故事易懂）

抽象工厂模式 定义&#xff1a;将有关联关系的系列产品放到一个工厂里&#xff0c;通过该工厂生产一系列产品。 设计模式有三大分类&#xff1a;创建型模式、结构型模式、行为型模式 抽象工厂模式属于创建型模式 上篇 工厂方法模式 提到工厂方法模式中每个工厂只生产一种特定…
阅读更多...
NFS的基本使用

NFS的基本使用

#江南的江 #每日鸡汤&#xff1a;岁月匆匆&#xff0c;时光荏苒&#xff0c;感悟人生路漫漫&#xff0c;不忘初心方得始终。 #初心和目标&#xff1a;和从前的自己博弈。 NFS(存储共享服务) 本文要点摘要&#xff1a; 下面将讨论什么是NFS&#xff0c;如何配置NFS&#xff0c;…
阅读更多...
全新ui自动化测试框架教学——Cypress

全新ui自动化测试框架教学——Cypress

前言 在现阶段自动化测试领域大规模普及的是selenium及appium等常规自动化测试工具&#xff0c;但在其中会有遇到很多影响因素导致测试结果不理想和不准确的情况发生。在经过Darren洋对自动化测试工具调研后&#xff0c;发现了Cypress这一款针对端到端的自动化测试工具&#xf…
阅读更多...
52.网游逆向分析与插件开发-游戏反调试功能的实现-检测调试器

52.网游逆向分析与插件开发-游戏反调试功能的实现-检测调试器

码云地址&#xff08;master分支&#xff09;&#xff1a;https://gitee.com/dye_your_fingers/sro_-ex.git 码云版本号&#xff1a;be9f058bfaaa4b015f2659db842e07ee37e58996 代码下载地址&#xff0c;在 SRO_EX 目录下&#xff0c;文件名为&#xff1a;SRO_Ex检测调试器.z…
阅读更多...
认识计算机网络——计算机网络的概念

认识计算机网络——计算机网络的概念

计算机网络是指将多台计算机通过通信介质连接起来&#xff0c;以便共享资源、交换信息和进行协作的技术体系。在现代社会中&#xff0c;计算机网络已经成为了各个领域的重要基础设施&#xff0c;改变了人们的生活方式和工作方式。本文将介绍计算机网络的基本概念、组成要素和发…
阅读更多...
vue3框架笔记

vue3框架笔记

Vue Vue 是一个渐进式的前端开发框架&#xff0c;很容易上手。Vue 目前的版本是 3.x&#xff0c;但是公司中也有很多使用的是 Vue2。Vue3 的 API 可以向下兼容 2&#xff0c;Vue3 中新增了很多新的写法。我们课程主要以 Vue3 为主 官网 我们学习 Vue 需要转变思想&#xff0…
阅读更多...
Springboot整合JSP-修订版本(Springboot3.1.6+IDEA2022版本)

Springboot整合JSP-修订版本(Springboot3.1.6+IDEA2022版本)

1、问题概述&#xff1f; Springboot对Thymeleaf支持的要更好一些&#xff0c;Springboot内嵌的Tomcat默认是没有JSP引擎&#xff0c;不支持直接使用JSP模板引擎。这个时候我们需要自己配置使用。 2、Springboot整合使用JSP过程 现在很多的IDEA版本即使创建的项目类型是WAR工…
阅读更多...
kivy BoxLayout说明

kivy BoxLayout说明

BoxLayout的特点 自动排列&#xff1a;BoxLayout会根据其orientation属性&#xff08;垂直或水平&#xff09;自动排列其子部件。这简化了布局的过程&#xff0c;尤其是当你有许多需要按顺序排列的部件时。可定制的间距和对齐&#xff1a;通过spacing属性&#xff0c;你可以控…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023