baidu_41388533的博客

一个路径 path 对应唯一的一个组件 comonent 当我们访问一个 path 自动把 path 对应的组件进行渲染

React学习笔记： Router v6参考文档参考视频：React Router6从入门到源码_哔哩哔哩_bilibili 官方文档：React Router | Docs Home 参考文档 初步认识React Router6 初步实现Routes 实现路由切换 实现路由渲染 实现路由匹配 总结 ...

React学习笔记： Router v6参考视频：【React】React Router v6_哔哩哔哩_bilibiliindex.tsx组件中使用，需要引入Link类似于一个a标签，由react-router-dom提供Routes定义路由规则，一个Route定义一个路由页面Main.tsx Outlet相当于子组件占位符，没有就不显示子组件，有则子组件显示在该位置使用hooks进行回退和获取参数获取:id参数及search字段...

React styled-components参考：styled-components 让 React 如虎添翼 https://www.bilibili.com/video/BV1w3411s7cD?spm_id_from=333.788.top_right_bar_window_history.content.click styled-components官网：styled-components styled-components 安装npm install --save ..

Ant Design Modal对话框样式设置 Modal对话框官方文档：对话框 Modal - Ant Design 样式使用插件：styled-components 注意需要设置getContainer：示例：index.tsx: import React from 'react'import { Modal } from 'antd'import { AntModalWrapper } from './style'interface propstype {

React 弹出框背景蒙版环境：react + typescript 使用module css 创建类型文件 参考：找不到模块“./index.module.less”或其相应的类型声明。ts(2307) declare module '*.module.css' { const classes: { readonly [key: string]: string } export default classes declare module '*.css'}.

《超性感的React Hooks》 《React Hooks系列》《TS》 《useMemo和useCallback的区别 及使用场景》 《useCallback 和 useMemo 及区别》 《学习TypeScript4这一篇就够了》...

项目参考：GitHub - sindu12jun/imooc-jira 课件参考：https://www.notion.so/React-491ad0643476437cafde50bee4dde6ed

项目规范1.文件夹、文件名称统一小写、多个单词以连接符（-）连接； 2.JavaScript变量名称采用小驼峰标识，常量全部使用大写字母，组件采用大驼峰； 3.CSS采用普通CSS和styled-component结合来编写（全局采用普通CSS、局部采用styled-component）; 4.整个项目不再使用class组件，统一使用函数式组件，并且全面拥抱Hooks； 5.所有的函数式组件，为了避免不必要的渲染，全部使用memo进行包裹； 6.组件内部的状态，使用useState、...

React AntDesign组件库参考：王红元老师的ReactAntDesign的安装官网：组件总览 - Ant Design 使用 npm 或 yarn 安装 npm install antd –save或yarn add antd我们需要在index.js中引入全局的Antd样式： import "antd/dist/antd.css";导入图标：npm install --save @ant-design/icons考虑一个问题：Antd是否会

React react-transition-group参考：王红元老师的Reactreact-transition-group介绍在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验。 当然，我们可以通过原生的CSS来实现这些过渡动画，但是React社区为我们提供了react-transition-group用来完成过渡动画。 React曾为开发者提供过动画插件 react-addons-css-transition-group，后由社区维护，形成了现在的 rea

React axios参考：王红元老师的React Vuejs 网络模块封装_baidu_41388533的博客-优快云博客axios的基本使用直接导入axios进行使用：axios({ url: "https://httpbin.org/get", params: { name: "why", age: 18 }}).then(res => { console.log(res);}).catch(err => { console.err

React Router前端路由的原理前端路由是如何做到URL和内容进行映射呢？监听URL的改变。 URL发生变化，同时不引起页面的刷新有两个办法： 通过URL的hash改变URL； 通过HTML5中的history模式修改URL； 当监听到URL发生变化时，我们可以通过自己判断当前的URL，决定到底渲染什么样的内容。URL的hashURL的hash也就是锚点(#), 本质上是改变window.location的href属性； 我们可以通过直接赋值location.hash

JavaScript纯函数纯函数的维基百科定义： 在程序设计中，若一个函数符合一下条件，那么这个函数被称为纯函数： 此函数在相同的输入值时，需产生相同的输出。函数的输出和输入值以外的其他隐藏信息或状态无关，也和由I/O设备产生的外部输出无关。 该函数不能有语义上可观察的函数副作用，诸如“触发事件”，使输出设备输出，或更改输出值以外物件的内容等。 当然上面的定义会过于的晦涩，所以我简单总结一下： 确定的输入，一定会产生确定的输出； 函数在执行过程中，不能产生副作用； ...

React Hooks参考：王红元老师的React为什么需要Hook?Hook是 React 16.8 的新增特性，它可以让我们在不编写class的情况下使用state以及其他的React特性（比如生命周期）。 我们先来思考一下class组件相对于函数式组件有什么优势？比较常见的是下面的优势： class组件可以定义自己的state，用来保存组件自己内部的状态； 函数式组件不可以，因为函数每次调用都会产生新的临时变量； class组件有自己的生命周期，我们可以在对应的生命周期中完成自

React 样式参考：王红元老师的React

React参考：王红元老师的React

React setState 事件总线 受控组件参考：王红元老师的ReactsetState开发中我们并不能直接通过修改state的值来让界面发生更新： 因为我们修改了state之后，希望React根据最新的State来重新渲染界面，但是这种方式的修改React并不知道数据发生了变 化； React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化； 我们必须通过setState来告知React数据已经发生了变化； .

React 组件化参考：王红元老师的React组件化介绍React的组件相对于Vue更加的灵活和多样，按照不同的方式可以分成很多类组件： 根据组件的定义方式，可以分为：函数组件(Functional Component )和类组件(Class Component)； 根据组件内部是否有状态需要维护，可以分成：无状态组件(Stateless Component )和有状态组件(Stateful Component)； 根据组件的不同职责，可以分成：展示型组件(Presentational

React 学习笔记 脚手架参考：王红元老师的React前端脚手架对于现在比较流行的三大框架都有属于自己的脚手架： Vue的脚手架：vue-cli Angular的脚手架：angular-cli React的脚手架：create-react-app 它们的作用都是帮助我们生成一个通用的目录结构，并且已经将我们所需的工程环境配置好。安装node官网地址：https://nodejs.org/en/download/ 注意：这里推荐大家下载LTS（Long-term

React的特点 – 声明式编程声明式编程： 声明式编程是目前整个大前端开发的模式：Vue、React、Flutter、SwiftUI； 它允许我们只需要维护自己的状态，当状态改变时，React可以根据最新的状态去渲染我们的UI界面； React开发依赖开发React必须依赖三个库： react：包含react所必须的核心代码 react-dom：react渲染在不同平台所需要的核心代码 babel：将jsx转换成React代码的工具 第一次接触Reac...