元气满满鸭-优快云博客

最近忽然发现新的名词，特此记录一下，其实稀疏数组和密集数组在平时经常会用到，只是没有发现它的真实名字稀疏数组稀疏数组：数组中大部分内容没有被使用，为空位那么如何创建稀疏数组呢？（1）// 最常见的创建方式let arr = new Array(3)这里创建了一个长度为3的数组，那我们看一下打印结果这里要注意一下，不是undefined，而是3个空位（2）let arr = [];arr[100] = 1 ;我们在看一下打印结果，创建了1个前100都为空位，只有101位赋值成1

2021-07-27 22:23:03 224

原创 React Hooks学习--useRequest网络请求Hooks

当前用于网络请求的Hooks是很多的，但是为什么选择使用useRequest呢？目前的许多Hooks都需要根据不同的场景来选择，比如分页usePagination，加载更多useLoadMoreuseAsync能力不足，不能支持并行请求useRequest不仅包含来Umi Hooks所有和网络请求相关的Hooks,还借鉴了swr的特性swr的主要能力在于：我们在发送网络请求时，会优先返回缓存内的数据，然后在背后发起网络请求，最终用新的请求结果来触发组件渲染。一.useRequest的基本使用

2021-05-20 20:35:49 8025 1

原创 React学习--render props

render props相当于vue中的插槽技术，在某一位置预留一行代码this.props.render()，之后只需要在特定位置传入组件，即可展示注意：此render为属性名当不需要传值时class Parent extends Component{ render(){ <div> <A render={() => <B/>} //A，B为父子组件 </div> }}class A extends Component{

2021-05-20 01:48:09 297

原创 React学习--组件通信方式总结

一.组件间的关系父子组件兄弟组件祖孙组件二.几种通信方式props(1) children props(2)render props消息订阅-发布：pubs-sub集中式管理：reduxcontext三.比较好的搭配父子组件：props父给子传用props，子给父传时，需要父组件最初给子组件传的是一个函数，子组件调用函数时，便将值传给了父组件兄弟组件：集中式管理，消息订阅-发布祖孙组件：集中式管理，消息订阅-发布，context...

2021-05-20 00:10:59 126

原创 Redux学习--异步action和react-redux汇总

一.异步action明确：延迟的动作不想交给组件自身，想交给action何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回具体编码：（1）下载yarn add redux-thunk，并配置在store，因为store只能识别对象类型的action，对于返回的函数action，则需要中间商来帮助store执行一下（2）在redux中引入applyMiddleware中间商，中间商应用刚才下载的thunk（3）创建的异步action，返回一个函数，在该函数中写

2021-05-19 21:47:01 500 4

原创 Redux学习--Redux工作流程与三个核心属性

一.Redux的三个核心属性1.action表示动作对象包含两个属性（1）type: 标识属性，值为字符串，唯一，必要属性（2）data: 数值属性，值类型任意，可选属性例子：{type:'ADD',data:{name:'tom',age:18}}2.store将state,action,reducer联系在一起的对象3.reducer用于初始化状态和加工状态加工时，根据旧的state和action，产生新的state的纯函数二.redux的基本使用例子：要使

2021-05-18 19:48:08 888

原创 React Hooks学习--useReducer，useMemo和useRef

一.useReducerfunction ReducerDemo(){ const [count,dispatch] = useReducer((state,action) => { switch(action){ case 'add': return state + 1 case 'sub' return state - 1 default: return state } },0) return ( <> <h2&gt

2021-05-17 21:40:33 487

原创 React Hooks学习--hook入门：useState，useEffect，useContext和useSelector

Hooks主打使用function component组件，替代class组件一.useStateuseState主要用做变量和方法的声明，useState(参数)中的参数表示变量的初始值在import导入时，使用useState替代之前由react导入的Component，如下import React ,{useState} from 'react' function Demo(){ const [count , setCount] = useState(0); return( &lt

2021-05-17 16:16:20 1578 1

原创 Typescript学习--类中属性的封装和泛型

一.属性的封装TS可以在属性前添加属性的修饰符public修饰的属性可以在任意位置访问，为默认值private私有属性，私有属性只能在类的内部进行访问（修改），通过在类中添加get和set方法，使得私有属性可以在外部访问protected受保护的类，只能在当前类及其子类中访问get和set方法class Person{ private _name: string; private _age: number; get name(){ // get方法 return this._na

2021-05-12 13:32:02 389

原创 Typescript学习--类和接口

一.类先举一个简单的例子class Person{ name: string = '小四' age: number = 18 static gender: string = 'male'}const per = new Person()直接定义的属性是类的实例属性，需要通过类的实例对象访问const per = new Person(); per.name使用static开头的属性是静态属性（类属性），可以直接通过类去访问Person.genderreadonly开头的属性表示一个只

2021-05-11 21:50:38 135

原创 Typescript--Typescript中的新增类型

一.anyany表示的是任意类型，一个变量设置类型为any后，相当于该变量管理了TS的类型检测，尽量不要用anylet d: any声明变量如果不指定类型，则TS解析器会自动判断变量的类型为any（隐式的any）let d;d = 10;d = 'hello'd = true二.unknownunknown表示未知的类型let e: unknown;e = 10;e = 'hello'两者的区别在于：d的类型为any，它可以赋值为任意变量。而e的类型为unknown，但是

2021-05-11 20:41:40 676

原创 redux学习

一.redux的理解redux是什么？redux是一个专门用于做状态管理的JS库（不是react插件库）可以用在react、angular、vue等项目中，但基本与react配合使用作用：集中式管理react应用中多个组件共享的状态什么情况下需要使用redux？某个组件的状态，需要让其他组件可以随时拿到（共享）...

2021-05-10 20:10:22 83

原创 React学习--BrowserRouter与HashRouter的区别，withRouter用法

一.编程式路由导航借助this.props.history对象上的API操作路由跳转、前进、后退this.props.history.push()this.props.history.replace()this.props.history.goBack()this.props.history.goForward()this.props.history.go()二.withRouter的使用import {withRouter} from 'react-router-dom'class

2021-05-09 20:19:22 376

原创 React学习--嵌套路由与组件的3种传参方式

一.嵌套路由的使用注册子路由时要写上父路由的path值路由的匹配是按照注册路由的顺序进行的，从App.jsx开始二.向路由组件传递参数数据params参数路由链接（携带参数)注册路由（声明接收）接收参数：从this.props.match.params中获取search参数路由链接（携带参数）注册路由（无需声明，正常注册即可）接收参数注意：获取到的search是urlencode编码字符串(?id=01&title='消息1')，需要借助querys

2021-05-09 19:25:49 262 3

原创 React学习--模糊/严格匹配及重定向

一.多级路径刷新页面样式丢失的问题多级路径下刷新页面样式丢失的主要原因在于：index.html文件中使用的样式文件链接为相对路径，而非绝对路径解决方法：public/index.html中，引入样式时不写./写/(常用)public/index.html中，引入样式时不写./写%PUBLIC_URL%(常用)，但只限在react中使用使用HashRouter，因为url中#号后面的hash值是不发送给服务器的(不推荐)二.路由的模糊匹配和严格匹配默认使用的是模糊匹配，简单记：给的比要

2021-05-09 13:35:57 523

原创 React学习--NavLink和Switch

一.路由组件与一般组件的区别写法不同：一般组件：<Demo/>路由组件：<Route path="/xxx" component={Demo} />存放位置不同：一般组件：component文件夹路由组件：pages文件夹接收到到props不同：一般组件：写组件标签时传递了什么，就能收到什么路由组件：接收到三个固定的属性 history、location、match二.NavLink的使用NavLink可以实现路由链接的高亮，可以使用NavLink替代Lin

2021-05-08 19:39:25 299 3

原创 React学习--react路由基础及使用

一.React路由的理解什么是路由？a. 一个路由就是一个映射关系（key : value）b. key为路径，value可能是function或component当点击路由元素时，不是页面发生了变化，而是路径path变化，例如：不是127.1.1.550/home.html而是127.1.1.550/home路由会监听path的变化，找到对应的路由组件，呈现到页面上路由分类a. 后端路由：1）理解：value是function,用来处理客户端提交的请求2）工作过程：当node

2021-05-08 14:24:45 159

原创 Macos安装react脚手架流程及遇到的问题

在安装react脚手架时发现问题百出，用正常的方法总会出现下图所示的错误，总结一下自己最终下载成功的流程供参考使用。一.首先检查一下是否安装了cnpm，通过cnpm -v查看，若没有安装则推荐安装一下，这里使用了淘宝镜像网站，下载更快sudo npm install cnpm -g --registry=https://registry.npm.taobao.org下载结束后，查看是否安装成功cnpm -v二.全局安装脚手架sudo cnpm install -g create-react-a

2021-05-07 13:59:39 1355 1

原创 React学习--生命周期函数（新）

一.对比新旧生命周期函数与旧生命周期函数相比，新的生命周期函数废弃了3个生命周期钩子，新增了2个生命周期钩子废弃的3个钩子函数：componentWillMount, componentWillReceiveProps, componentWillUpdate如果目前想在新版本中使用上述3个钩子函数，需要加UNSAFE_前缀，例如UNSAFE_componentWillMount新增2个钩子函数：getDerivedStateFromProps, getSnapshotBeforeUpdate二.

2021-05-04 19:24:59 406 1

空空如也

空空如也