![](https://img-blog.csdnimg.cn/2019092715111047.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React学习笔记
文章平均质量分 91
Reac学习笔记系列文章持续更新中...
前端路啊
一起学前端
展开
-
React 项目中使用 TypeScript - Redux 基本使用
1.Redux 基本使用目标:能够掌握如何在 TS 项目中初始化 redux内容: 安装依赖包:yarn add redux react-redux redux-devtools-extension redux-thunk 新建文件 store/index.ts( 后缀为.ts) import { createStore, applyMiddleware } from 'redux';import { composeWithDevTools } from 'redux-...原创 2022-05-04 09:34:24 · 1097 阅读 · 0 评论 -
React 项目中使用 TypeScript
1.useEffect 的使用目标:能够掌握 useEffect 在 TS 中的使用内容:useEffect函数不涉及到任何类型,TS 和 JS 中使用一致useEffect(() => { const onResize = () => { console.log('哈哈哈'); }; window.addEventListener('resize', onResize); return () => { window.addEventLi原创 2022-05-03 18:00:00 · 3713 阅读 · 0 评论 -
创建基于 TS 的 React 项目与类型声明文件
目录1. 创建基于 TS 的 React 项目2.tsconfig 的介绍3. 类型声明文件介绍4. TS 的两种文件类型5.类型声明文件-内置6. 类型声明文件-第三方库7. 类型声明文件-自定义8.类型声明文件的使用说明9.类型声明文件的总结1. 创建基于 TS 的 React 项目目标:能够使用 CRA 创建基于 TS 的项目内容:创建基于 TS 的 React 项目命令:npx create-react-app react-ts --...原创 2022-05-03 12:00:00 · 3852 阅读 · 1 评论 -
React路由
目录1. React路由-基本使用2. React路由-Router模式3. React路由-Link&NavLink组件4. React路由-Route组件5. React路由-路由匹配模式模糊匹配精确匹配6. React路由-执行过程7. React路由-Switch组件&404页面8. React路由-编程式导航1. React路由-基本使用能够使用 react 路由切换页面内容:2021.11月初,react-r...原创 2022-05-02 18:00:00 · 809 阅读 · 0 评论 -
React进阶-虚拟 DOM 和 Diff 算法
1.虚拟 DOM虚拟 DOM(Virtual DOM),就是一个 JS 对象,用来描述我们希望在页面中看到的 HTML 结构内容.为什么使用虚拟 DOM? 真实 DOM 对象属性多,处理起来繁琐、效率低。更重要的原因:React 要做跨平台开发,而不是被束缚在浏览器端。原生 DOM 对象: 也是一个 JS 对象,是浏览器默认提供的 DOM 对象 和 HTML 元素之间是一一对应的关系const element = { type: 'h1', props: { clas.原创 2022-05-03 08:00:00 · 1414 阅读 · 1 评论 -
React进阶-状态逻辑复用
目录1.组件复用的说明2. mixins 混入(已废弃)3. 高阶组件概述基本使用封装 withMouse 高阶组件高阶组件的注意点4.render-props 模式基本使用children 代替 render 属性5. React Hooks 状态逻辑复用6. 为什么要有 Hooks7. 性能优化8. 优化的方向9.React.memo浅对比的说明10. useCallback11. useMemo12.class 组件优...原创 2022-05-02 12:00:00 · 784 阅读 · 0 评论 -
Redux 中间件
目录1.中间件概述Redux 中间件作用:中间件说明:2.中间件的触发时机3.redux-logger中间件4.redux-thunk中间件1.不使用 redux-thunk 中间件,action 只能是一个对象2.使用 redux-thunk 中间件后,action 既可以是对象,又可以是函数5.了解:redux-thunk中间件原理6.redux-devtools-extension中间件7.了解:redux 中间件原理8.理解Redux异步数据流..原创 2022-04-30 06:00:00 · 3872 阅读 · 0 评论 -
react-redux学习
目录1.React-Redux介绍2. React-Redux-基本使用3.React-Redux-获取状态useSelector4.React-Redux-分发动作useDispatch5.理解 Redux 数据流6.Redux应用-代码结构7.Redux应用-ActionType的使用8.Redux应用-Reducer的分离与合并9.Redux应用-redux管理哪些状态1.React-Redux介绍目标: 能够说出为什么需要使用react-redux..原创 2022-04-30 12:00:00 · 434 阅读 · 0 评论 -
Redux学习
1.Redux-概念能够说出为什么需要使用Redux文档:redux 中文文档 redux 英文文档解释:Redux 是 React 中最常用的状态管理工具(状态容器)React的问题:React 只是 DOM 的一个抽象层(UI 库),并不是 Web 应用的完整解决方案。 因此 React 在涉及到数据的处理以及组件之间的通信时会比较复杂 。 对于大型的复杂应用来说,这两方面恰恰是最关键的,需要一个专门的状态工具。背景介绍:2014 年 Facebook 提出了..原创 2022-04-30 09:00:00 · 358 阅读 · 0 评论 -
React-hooks进阶
目录1. 自定义hook1.未封装前2.封装hooks之后总结:2. useRef-基本使用1.基本使用2.案例练习3. useContext-基本使用1.通过createContext创建context对象2.通过Provider组件包裹根组件,注入数据3.在后代组件中使用useContext使用数据总结:1. 自定义hook尝试自己封装一个hook也就是useXxx函数大致步骤:在App.js组件实现一个记录鼠标移...原创 2022-04-29 09:00:00 · 220 阅读 · 0 评论 -
React-hooks 基础
1. hooks-介绍能够说出 React Hooks 是什么?大致步骤:hooks 解释 hooks 作用 有了 hooks 之后组件开发模式具体内容:1.hooks 解释Hooks:钩子、钓钩、钩住 ,Hooks是React v16.8中的新增功能2.hooks 作用为函数组件提供状态、生命周期等原本 class 组件中提供的 React 功能 可以理解为通过 Hooks 为函数组件钩入 class 组件的特性 注意:Hooks 只能在函数组件中使用,自此...原创 2022-04-28 09:00:00 · 401 阅读 · 0 评论 -
React 组件进阶
目录1. props-类型校验2. props-类型校验常见类型了解常见的校验规则演示校验规则的使用总结:3. props-默认值1.知道defaultProps的作用2.如何设置props的默认值参考代码3.新版react推荐使用参数默认值来实现总结:4. props-静态属性写法1.类的静态属性写法和如何访问它2.类组件中propTypesdefaultProps的使用代码参考总结:5. 生命周期-概览1.什么是组件生命周期...原创 2022-04-27 09:00:00 · 332 阅读 · 0 评论 -
React 组件通讯
目录1. 组件通讯-概念1.组件的特点2.知道组件通讯意义总结:2. 组件通讯-props 基本使用1.传递数据和接收数据的过程2.函数组件使用 props3.类组件使用 props总结:3. 组件通讯-props 注意事项1.知道什么是单向数据流?2.props 可以传递什么数据?任意总结:4. 组件通讯-父传子方式1.父组件提供要传递的 state 数据2.给子组件标签添加属性,值为 state 中的数据3.子组件中通过 p...原创 2022-04-26 09:00:00 · 1973 阅读 · 0 评论 -
React 组件学习(函数组件、 类组件)
目录1. React 组件介绍2. 函数组件1)什么是函数组件?2)定义函数组件3)使用组件总结:3. 类组件-复习 class 语法1.掌握 class 定义类,定义属性,定义函数2.掌握 extends 继承父类4. 类组件-基本使用步骤1.什么是类组件?2.定义类组件3.使用类组件总结:5. 类组件-组件抽离6. 类组件-无状态组件和有状态组件和1.无状态组件2.有状态组件3.它们的区别4.如何去选择...原创 2022-04-25 09:13:47 · 4428 阅读 · 0 评论 -
JSX语法学习(三)
目录1. JSX 样式-style 方式2.JSX 样式-className 方式3. JSX 样式-动态 className4. JSX 样式-classnames 库安装导入classnames 文档认识classnamesAPI1. JSX 样式-style 方式掌握使用 style 属性设置样式知识内容:style接受一个采用小驼峰命名属性的JavaScript对象,而不是CSS字符串 style中的key采用小驼峰...原创 2022-04-23 09:15:00 · 3027 阅读 · 0 评论 -
JSX语法学习(二)
目录1. JSX 嵌入表达式2. JSX 条件渲染if/else条件渲染三元运算符完成条件渲染逻辑运算完成条件渲染3. JSX 列表渲染可以渲染JSX数组使用map渲染列表直接在JSX中使用map渲染列表key属性使用4.JSX 列表渲染练习1. JSX 嵌入表达式掌握在JSX中嵌入JS表达式,进行渲染知识内容:在JSX中使用{ }嵌入JS表达式展示数据 进行运算 三元运算 使用函数 使用 JSX...原创 2022-04-23 09:00:00 · 755 阅读 · 0 评论 -
JSX语法学习(一)
目录1. JSX 基本概念概念注意演示总结2. JSX 基本使用基本使用思考问题总结补充3. JSX 的注意事项使用细节代码示例总结1. JSX 基本概念知道 JSX 是什么,知道 JSX 的优点概念JSX是JavaScript XML的简写,表示了在 JavaScript 中书写 XML 格式的代码。它是React的核心内容,它可以让我们在React中创建元素更加简单,更加直观,提高开发效率。注意JSX是...原创 2022-04-22 09:00:00 · 691 阅读 · 0 评论 -
React 入门学习
目录1. React 介绍2. React 特点(1)声明式(2)组件化(3)一次学习,跨平台编写3. React 脚手架方式 1方式 24. React 基本使用5. React 创建元素练习1. React 介绍了解 react 的历史背景和基本概念React起源于 Facebook 的内部项目。因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套...原创 2022-04-21 09:00:00 · 9271 阅读 · 7 评论