React框架学习笔记

最新推荐文章于 2024-05-15 12:10:03 发布
最新推荐文章于 2024-05-15 12:10:03 发布
阅读量3k 收藏 10
点赞数 9
文章标签： react.js javascript 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45192089/article/details/124623354
版权

React系列知识点

一、项目初始化

1、react-script

通过react-script来帮我们配置好一切与typescript相关的配置。

tsconfig.json配置文件：在这里插入图片描述

2、TSX

tsx就是jsx的typescript版本，要在react中使用tsx：

  • 文件扩展名.tsx
  • 在配置文件中tsconfig.json启用jsx选项，jsx选项只在代码生成阶段起作用：
    preserve:生成的代码将会保留jsx，以供后续的转换操作，也就是会输出jsx后缀的文件；
    react：生成原生JavaScript，输出js文件； react-native:生成的代码将会保留jsx,但是输出的文件名扩展是js；
    react-jsx、react-jsxdev：新版本出来的

3、【组件化】配置React的CSS模组

（1）使用React最大的优势是模组化（CSS module）：

在这里插入图片描述

  • 每个jsx或者tsx文件就被视为一个独立存在的原件；
  • 原件所包含的所有内容也同样都应该是独立存在的；
  • import ‘./index.css’ ----> import style from ‘./index.css’
（2）TS的定义声明
  • *.d.ts：typescript专用的类型声明文件，会自动被typescript所识别
  • 这个文件只包含类型声明，不包含逻辑
  • 不会被编译，也不会被webpack打包
（3）css类型声明

表示只要我们import以css为文件后缀时，都会遵循以下的约定：这个约定的内容就是将会导出key所在的对象，
而原始的类名和相应的值都将会被转化为这个对象；
在这里插入图片描述

（4）CSS in JS

在这里插入图片描述

  • 这里的className实际上就是通过import模块生成了JavaScript对象，最后由JavaScript对象动态注入了css样式，这种css注入的方式叫做CSS
    in JS（JSS）；
  • 从本质上隔离了全局冲突，但是配置起来略显麻烦
  • 另外className的名称是由js动态生成的，所以会对之后的调试有一定的麻烦
  • JSS更贴合React组件独立化的原则
（5）把css转化为了js对象，那么typescript也可以实现css的类型

（1）安装插件：typescript-plugin-css-modules（只参与开发），这个插件可以解析css文件，并且生成typescript对应的引用类型；
（2）vscode文件夹的settings.json文件中配置：

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

（3）在tsconfig.json文件中，启用这个插件，就可以出来类名提示：

"plugins": [
      {
        "name": "typescript-plugin-css-modules"
      }
    ]

3、Ant Design（UI框架）

  • 安装依赖：antd (ant design本身）
  • 安装依赖：@ant-design/icons：图标项目

二、 react-router-dom

1、什么是SPA（单页网站应用）？

如果使用的是React，vue框架，那么前端服务将会提供一个SPA文件，会把所有的css，html，js全部一次性发送到用户的浏览器中，然后由SPA劫持浏览器的路由，从而控制页面之间的切换。而后端服务器，则不会提供任何路由支持，它只会访问数据库，取得数据，传递到浏览器，由UI去渲染这些数据。

  • 简单来说，就是我们每次打开网站的时候,服务器都会把网站中js，css，html打包为一个超级大的文件，一次性丢给浏览器；
  • js劫持浏览器路由，生成虚拟路由来动态渲染dom元素。
  • 单页网站应用非常符合现在前后端分离的趋势，服务器不负责UI输出，而专注于数据支持。
  • 同时支持桌面App，手机App，网站App

React网站使用的路由系统都是虚拟的：

  • 与后端服务器没有半毛钱关系，与实际文件也没有一一对应关系
  • 主页，http：//localhost：3000
  • 搜索页面，http://localhost:3000/search
  • 旅游路线详情页面，http://localhost:3000/touristRoutes/{id}

注意：React本身只是一个渲染UI的框架，它并不包含处理网站路由的能力，所以，当我们需要处理url的时候，我们还需要给react项目安装拓展的插件。实现原理：就是通过读取url，定向渲染jsx代码，动态更新虚拟dom元素，不过，除了对url的解析以外，我们还需要考虑更复杂的情况，比如说，路由的缓存，浏览器的历史记录，路由的状态等等；React-router是目前最主流、也是最完整的React路由解决方案。它可以保持UI和url的同步，而且具有代码缓存加载，路由动态匹配等等的功能，除此以外，React-router也可以在所有的浏览器中运行。

2、什么是路由，什么是虚拟路由？

针对不同的url进行渲染，就需要借助路由系统了。路由的框架使用react-router

(1) React-router
  • react-router-dom 用于浏览器，处理Web App的路由
  • react-router-native用于React Native,处理手机app的路由
  • react-router-redux提供了路由中间件，处理redux的集成
  • react-router-config用来配置静态的路由
  • react-router并没有提供原生typescript的支持，所以还需要给项目安装react-router的类型定义
  • 如果一个第三方框架没有原生支持一个typescript，那么一般来说，比较出名的框架都会有官方或者半官方提供的type支持，可以在npm
    install @type(s)/XXXX中找到
  • 可以把所有@types定义放在dev依赖下
(2) React-router-dom
  • 安装react-router-dom的时候，会自动安装react-router核心框架
  • react-router-dom使用HTML的dom元素组件化的扩展，它加入了浏览器运行环境的功能，比如在jsx代码中，用<Link />组件可以渲染出<a />标签
  • <BrowserRouter />组件利用H5 API实现路由切换
  • <HashRouter />组件则利用原生JS中的window.location.hash来实现路由切换

3、如何在Typescript中配置react-router？

  • 安装react-router-dom的时候，会自动安装react-router核心框架

4、如何进行页面切换？

  • <BrowserRouter />组件利用H5 API实现路由切换
  • <HashRouter />组件则利用原生JS中的window.location.hash来实现路由切换

注意：根据react组件化的理念，默认情况下，它并不在乎你路径的唯一性，只要你的路径可以被route组件所截获，可以被局部匹配，那么不管有多少个页面，它都会被同时显示出来。
在这里插入图片描述

为了实现页面切换，而不是页面堆叠，我们需要针对route组件做一些短路处理。当给一个Route组件加上exact属性以后，就是在告诉这个Route组件，有且仅当url的路径一模一样的时候，才会做匹配。
在这里插入图片描述
虽然加上exact属性会起作用，但是治标不治本，为了从源头上解决页面堆叠的问题，我们还需要使用重要的组件Switch，它可以自动帮我们对路径做短路处理，每次只渲染单独的路径，消除页面堆叠的影响。
在这里插入图片描述

5、使用react-router来处理路由需要满足哪些要求？（网站路由系统的要求）

  • 路由导航与原生浏览器操作行为一致（比方说：路径可以记录，可以缓存，可以按下浏览器的后退回到上一页）:
    <BrowerRouter /> 来利用H5的API进行路由
  • 路由的路径解析原理与原生浏览器一致，可以自动识别url路径:
  • <Route />组件来对url字符串进行路径匹配
  • 路径的切换以页面为单位，不要页面堆叠:
    <Switch />组件来对页面进行切换

总结：使用<BrowerRouter /> + <Route /> + <Switch /> 来构建基础的路由

6、使用react-router进行路由搭建

（1）注意：

  • 当我们在Route组件中使用component传递组件的时候，react-route会默认向下传递3个Props数据：history，location，match；
  • 通过match我们可以读取到url中的参数；

（2）如何在url中添加参数：

  • 第一种是最常见的使用“？”来引导参数：http://localhost/path?name1=value1&name2=value2
  • 第二种，分段路由Segments。RESTful的思维方式，参数作为URL片段的一部分，使用斜杆“/”；比如，http://localhost:3000/products/1111
    在这里插入图片描述

7、如何跨组件传递路由数据？WithRouter vs UseRouter

  • react-router中不同组件间路由数据传递的方法。
  • history是整个路由系统的核心。
  • HOC高阶组件withRouter : 把路由数据传递到孙组件
  • Hooks钩子：useHistory, useParams, useLocation, useRouteMatch

8、react-router在两个页面之间有两种导航方式

  • 使用history.push的方式进行页面的切换
  • 还有另外一种，它更加抽象，以组件化的思路封装，这种方式需要我们使用react-route中的<Link />组件:
    <Link />组件可以在dom元素中生成一个超链接来进行导航
    <Link />组件的原理就是一个<a>标签加上herf=history.push()

三、redux

1、redux有什么用

管理全局状态，设计模式，也是架构方案。

(1) React实际上只是一个UI框架：
  • 通过jsx生成动态dom渲染UI
  • 没有架构、没有模版、没有设计模式、没有路由、也没有数据管理
(2) 设计模式与数据管理缺一不可：

只使用React是没办法开发大型应用的

(3) 设计模式：
  • MVC、MVVM、MV*
  • 针对React项目，我们有redux，redux是一种设计模式，同时也是项目的架构方案，它不依赖任何库或者框架
  • redux不仅可以在React中使用，同时也可以在Angular（ng-redux）、Vue（vuejs-redux）中使用
(4) redux架构：

在这里插入图片描述

  • 通过redux架构，剥离组件数据（state）
  • 数据统一存放在store中
  • 组件订阅store获得数据
  • store同步推送数据更新

总结：redux统一保存数据，在隔离了数据与UI的同时，负责处理数据的绑定。

（4）什么时候需要使用redux：
  • 组件需要共享数据（或者叫做状态state）的时候
  • 某个状态需要在任何地方都可以被随时访问的时候
  • 某个组件需要改变另一个组件的状态的时候
  • 语言切换、黑暗模式切换、用户登陆全局数据共享…
  • 使用redux最终目的就是让状态state的变化可控可预测

在这里插入图片描述

2、如何创建一个具有订阅与推送功能的数据仓库？

整个reducer函数就是一个以旧换新的过程：使用旧的state，通过action，返回一个newState。

3、什么是store？什么是action？什么是reducer？

4、如何理解redux的工作流程？

在这里插入图片描述
在这里插入图片描述

5、i8n是什么？

Internationalization:i18n国际化 能根据不同的语言及地区显示相应的界面。

（1）原理：
  • 语言包作为静态资源单独保存：xml，json
  • 每种语言对应一个文件
  • 切换语言设置时，语言文件也会随之切换
  • 彻底分离字符串和ui
（2）i18n工具：
  • i18next：目前最主流的框架
  • react-i18next：i18next的React插件
（3）react-i18next配置：
  • 文档：https://react.i18next.com/guides/quick-start
  • npm install react-i18next i18next --save
  • 无论是react-i18next ，还是i18next本身，它们都支持了原生typescript，所以不需要再安装额外的ts类型声明文件

react本身已经自带了xss攻击的机制

6、工厂模式是什么？

7、如何在redux中使用typescript定义强类型？

8、redux和react-redux有什么关系？

redux的插件：react-redux，通过语法糖，减少项目中的模板代码；

  • 第一步：安装https://react-redux.js.org/introduction/getting-started

  • 第二步：Provider
    React Redux includes a component, which makes the Redux store available to the rest of your app

  • 第三步：connect()，连接store（connect其实就是一个高阶函数）
    这个函数作用相当于订阅store步骤的封装，然后我们可以使用高阶组件或者Hooks来获得store中的数据。

9、connect() vs useDispatch() vs useSelector()

四、异步AJax与Redux中间件

1、什么是RESTful？对前端来说RESTful意味着什么？

  • 语义明确、轻量级，而且结构简单
  • REST和RESRTful是名词和形容词的关系
  • RESTful的基本特点：（1）无状态；（2）面向“资源”；（3）使用HTTP的动词；（4）HATOAS超媒体即应用状态引擎
  • RESTful只是指导性的原则，只是一种代码风格，一种代码架构，不是标准

2、什么是redux中间件？

（1）为什么需要中间件：

  • redux的核心，就是控制和管理所有的数据输入输出
  • 因此有了store、reducer以及action的dispatch

（2）redux中间件机制：
在这里插入图片描述

  • 提供了一个分类处理action的机会
    在这里插入图片描述
    （3）redux的异步处理插件：
  • redux-thunk
  • redux-promise
  • redux-saga

3、Ajax异步获取数据

（1）这里异步请求数据使用了axios，安装axios ：npm install axios;
（2）这个axios自带typescript类型定义，所以安装之后可以直接使用;

组件在初始化的第一步，就是启动构造函数，首先productList被设置为空数组，第二步，UI就会被挂载，虚拟dom开始被渲染，也就是说render函数在这个时候就已经被执行了，componentDidMount会等待UI组件全部挂载完毕才会调用。所以在使用数组时要注意。也就是要对空数据进行处理：

  • a : 可以加loading，error进行判断处理；
  • b: 可以在数组长度大于0的时候让这个组件再渲染

五、JWT

JWT的原理：https://jwt.io/

1、JWT是干什么用的？

  • JSON Web Token
  • JWT的作用是用户授权，而不是用户的身份认证

2、授权 vs 认证

  • 用户认证指的是使用用户名、密码来验证当前用户的身份，简单来说，就是用户登录
  • 用户授权指当前用户有足够的权限访问特定的资源

3、传统的session登录

  • 用户登录后，服务器会保存登录的session信息
  • session id 会通过cookie传递给前端
  • http请求会附带cookie
  • 称这种为有状态登录

4、JWT彻底改变了用户授权与认证的过程

  • 替换cookie
  • JWT信息只需要保存在客户端，而不需要保存在服务器上
  • 无状态登录

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
无状态登录最大的优势就是能完美支持分布式部署，你可以使用一个token发送给不同的服务器，而所有的服务器都会返回同样的结果；

5、redux-persist:实现登录持久化

sunshine~~~
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React知识体系
achang07的博客
12-09 1291
https://react.docschina.org/docs/hello-world.html React是一个用于构建用户界面的Javascript库。 特点：声明式，组件化，移植性。 关键字：组件Component，状态组件props，应用state，第三方库。 JSX JSX是JavaScript的语法扩展。 JSX用来声明React中的元素。 JSX中可疑使用JavaScript表...
react 学习笔记
11-16
React 学习笔记 React 是一个流行的前端框架，用于构建用户界面。学习 React 需要掌握其核心概念，包括组件生命周期、状态管理、事件处理等。本节笔记将记录 React 学习过程中的关键知识点。 一、React 组件生命...
React 框架学习笔记
valsedefleurs的博客
04-27 162
虚拟DOM什么时候该用？使用虚拟DOM的时候只需要对比差异，然后修改JS对象(生成的虚拟DOM)，最后把生成的DOM结构插入到页面中，减少渲染的次数，提升整个页面的渲染效率。当变更时，虚拟DOM使用DIFF算法进行新旧虚拟DOM的比较，将变更放到变更队列中，最终只把变化的部分重新渲染，从而提高渲染效率。在我们的课程中，在update()，也就是在更新元素的阶段，会先生成一个改变之后的DOM结构，然后对DOM树的type，props，chirdren等地方进行了对比，从而实现对整个DOM树的局部更新。
2024年最新前端框架React快速入门(1)，2024我的Web前端大厂面试之旅
2401_84435942的博客
05-15 263
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。
前端学习笔记（一）——React框架
圆鹿鹿的博客
05-15 779
前段时间学习了有关React框架，做了一份笔记，记录并分享一下。以便后续方便查找和使用。PS：这份笔记只是记录了本人在学习过程中，认为React中比较重要的点进行了记录，详细的知识点还需要深入去探讨研究***欢迎指出错误或不当的地方***React专注视图层，特点：Virtual DOM；函数式编程；JSX；单向数据流JSX基本语法：DOM元素中有两个属性特殊，class和for（JS中的关键字）...
react框架学习笔记(二)
gakkiiiiii的博客
01-21 165
Redux基础知识 redux是一个专注于状态管理的库。redux不仅仅可以在react框架中使用，也可以在其他框架中使用。 状态少的时候，可以用setState来管理，但是状态越来越庞大，复杂时，就需要用到redux管理状态了 安装redux npm install redux --save 最基本的使用redux import {createStore} from 'redux' //新建...
React 学习笔记
2301_77620227的博客
01-31 1802
什么是JSX：JSX=javascript xml，就是Javascript和XML结合的一种格式。只要你把HTML代码写在JS里，那就是JSX。在实际开发中，JSX 在产品*打包阶段*都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。官方定义是：类 XML 语法的 ECMAScript 扩展。函数方式，ES5的写法（现在不用了），ES6（类）的写法定义一个类，继承自 React.Component，并且，在该类里，必须有个render()函数，render函数。
React框架er-paper-mas开发笔记
最新发布
06-11
React框架er_paper-mas开发笔记React框架er_paper-mas开发笔记
React学习笔记（参考官方文档总结）
09-19
React 学习笔记 React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发，用于构建 Instagram 的网站。React 主要用于构建 UI，许多人认为 React 是 MVC 中的 V（视图）。React 拥有较高的性能，代码逻辑...
JavaScript基础学习笔记
10-25
JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记，涵盖了 JavaScript 基础知识点，包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构：head、body、title、...
Vue框架笔记资源学习
01-04
Vue框架笔记资源学习 Vue框架是一种基于MVVM（Model-View-ViewModel）架构的前端框架，用于构建用户界面。它提供了一个灵活的框架来构建复杂的Web应用程序。 1.1 Vue框架的历史发展 Vue框架的诞生可以追溯到2014...
react学习笔记系列（一）
LynnWonder
06-04 875
概念区分： library（库）：小而巧的库，只提供了特定的API。 Framework（框架）：大而全的是框架；框架提供了一整套的解决方案（全家桶）； react和vue做对比：（对比不完全） 组件化方面： 模块化：是从代码角度分析，把一些可复用的代码，抽离为单个的模块；便于项目的维护和开发； 模块化的好处： 解决命名冲突：在早期，使用立即执行函数实现模块化是常见的手段，通过函数作用域...
前端框架 React 学习总结
qq_50909707的博客
11-17 6788
（1）创建store仓库，reducers分开管理reducers: 数据开发中type字符串应放入一个常量管理default:}}default:}}count,user}//1、引入redux//引入日志//导入reducers//2、创建仓库//合并多个reducer})（2）导入到src/index.js文件,全局配置(3)组件中的使用return (
react 基础语法
qq_42451776的博客
07-02 234
文章目录react 基础语法环境搭建安装脚手架create-react-app。创建项目jsx语法列表渲染配置代理生成的build的文件可以直接打开 react 基础语法 环境搭建 安装脚手架create-react-app。 cnpm install -g create-react-app 创建项目 create-react-app reactapp jsx语法 1、由HTML元素构成 2、中间如果需要插入变量用{} 3、{}中间可以使用表达式 4、{}中间表达式中可以使用JSX对象 5、属性
第三章 React之JSX、TSX语法
Etc.End的博客
11-30 2544
TSX语法在保留了HTML的标记语言的同时，增加了类型注解和JSX语法的特点，并通过构建工具将它们结合在一起，为构建大型、复杂的Web应用提供了更高效、更灵活的编程方式。在下一篇文章中我将讲解typescript的使用。我是Etc.End。
create-react-app 构建 react应用程序 （一）（react-scripts）
飞天代码的博客
07-09 5332
踩了一个坑又一个坑，以前都是自己手动创建react的开发环境，要安装webpack、babel、react、react-dom的组件，还需要修改、新增各种配置文件。 正为这个环境新建犯愁时，突然发现了 react-scripts。用来构建了一个项目试试： 第一步：全局安装下create-react-app。npm install -g create-react-app第二步：通过create-r
构建 react应用程序 （二）（react-scripts实现原理）
热门推荐
飞天代码的博客
07-09 1万+
在前面讲到了使用create-react-app来创建项目，这节我们来分析下原理。 react-scripts有以下支持，都帮你配置好了：React, JSX, ES6, and Flow syntax support. Language extras beyond ES6 like the object spread operator. Import CSS and image files di
react-scripts的工作原理
zxl1990_ok的博客
09-28 5250
使用react脚手架工具create-react-app初始化react项目时，打开package.json : 在命令行中执行npm run start/yarn start时，相当于执行react-scripts start， 我们去node_modules/中去找 react-scripts.js文件会根据参数去判断执行哪种构建脚本，比如当前参数是start，那么就会去执行scripts目前下的start.js 在start.js中引入了webpack-dev-server，该模块是
React项目 加入 TS
赵乘风_i
10-31 1万+
1、全局安装ts npm i -g typescript 2、创建tsconfig.json tsc --init 修改tsconfig.json，开启jsx和allowJs配置， 3、安装开发环境依赖 npm install --save-dev typescript @types/react @types/react-dom ts-loader 4、修改webpack.config.js ....
前端学习笔记 javascript
08-31
对于前端学习笔记，我可以给你一些常见的主题和要点，帮助你开始学习前端开发。 1. HTML基础： - 了解HTML的基本结构和标签 - 学习如何创建和组织网页内容 - 掌握常用的HTML标签，如标题、段落、链接、图像等 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值