2 亦是木子也是雨

尚未进行身份认证

我要认证

一个记笔记的地方

等级
TA的排名 8w+

react-router 的使用

文章目录单页面富应用(SPA)前端路由url 的 hashhtml5 的 historyreact-router路由的基本使用常见的一些 APIBrowserRouter或HashRouterLink和NavLinkRouteSwitchRedirect路由的嵌套路由传递参数动态路由search 传递参数to传入对象react-router-config单页面富应用(SPA)单页面富应用:single-page application,简称SPA;单页面富应用是指整个Web应用有一个页面,当 url

2020-08-13 13:25:39

react-redux的使用

文章目录认识 react-reduxreact-redux 的使用react-redux 相关 APIProviderconnect()mapStateToprops()mapDispatchToProps()redux-thunk的使用reducer 的合并redux 调试工具的使用举例不使用 redux使用 redux使用 react-redux认识 react-reduxreact-redux 是一个 react 的插件库,它是专门用来简化 react 应用中使用 redux的传送门react

2020-08-11 17:10:04

redux的简单使用

文章目录redux 简介为什么需要 reduxredux 核心理念storeactionreducerredux 三大原则单一数据源State 是只读的使用纯函数来执行修改redux 的基本使用redux 简介redux 是一个帮助我们管理State的容器:redux是JavaScript的状态容器,提供了可预测的状态管理redux 不是只能用于 react 中的,它还可以用在 vue 等其它框架中redux 的主要作用就是:集中式管理(读/写)react 应用中多个组件共享状态为什么需要 red

2020-08-11 10:16:32

node 对 es6 模块化的支持

node v13.2.0之前node v13.2.0之前,是不支持 ES6 模块化的,如果还想使用 ES6 的模块化,需要在 package.json 里做这样的配置在package.json中添加属性:"type": "module"在执行命令中添加如下选项:node --experimental-modules src/index.js{ "type": "module", "scripts": { "start": "node --experimental-modules

2020-08-11 10:11:32

React高阶组件

文章目录什么是高阶组件高阶函数高阶组件的使用props 的增强不修改原有代码的情况下,添加新的props利用高阶组件来共享Context属性渲染判断鉴权生命周期劫持什么是高阶组件高阶组件(HOC)就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件高阶函数高阶组件其实有点类似与高阶函数,高阶函数是接收一个或多个函数作为参数,并返回一个函数举例有两个函数 login 和 exit,一个welcome,一个goodbye。两个函数先从localStorage 读取了username,然后对

2020-08-05 20:44:30

Fragment和StrictMode的使用

Fragment由于 render 函数的返回值中只能有有一个根节点,所以每次返回内容时都需要包裹一个div元素这个div元素对于某些场景是需要的(比如我们就希望放到一个div元素中,再针对性设置样式)某些场景下这个div是没有必要的,比如当前这里我可能希望所有的内容直接渲染到root中,而不是所有的内容外面还需要包裹一个 div此时,就可以使用 Fragmentclass Title extends PureComponent { render() { return (

2020-08-03 22:06:12

ref的使用

文章目录ref的作用如何使用传入字符串传入一个对象传入一个函数举例ref 的节点类型ref的作用react 中,很少直接的操作dom 元素,如果需要操作 dom 元素的话,那么就需要使用到 ref常见的应用场景管理焦点,文本选择或媒体播放触发强制动画集成第三方 DOM 库如何使用传入字符串使用时通过 this.refs.传入的字符串格式获取对应的元素传入一个对象对象是通过 React.createRef() 方式创建出来的使用时获取到创建的对象其中有一个current属性就是对

2020-08-03 21:26:35

react 事件总线

react 事件总线解决的问题:跨组件之间的事件传递如何实现借助第三方库 events来实现 传送门常见的 api创建EventEmitter对象:eventBus对象发出事件:eventBus.emit(“事件名称”, 参数列表)监听事件:eventBus.addListener(“事件名称”, 监听函数)移除事件:eventBus.removeListener(“事件名称”, 监听函数)使用前需要先安装,下面两种方式任选一个npm install events yarn ad.

2020-08-03 20:58:37

如何避免组件没有必要的重新 render

文章目录render什么时候被调用组件没有必要的重新 render如何避免组件没有必要的重新 rendershouldComponentUpdatePureComponentmemorender什么时候被调用如图所示当 props 或 state 发生改变时, render 函数会被重新调用组件没有必要的重新 render在 App 中,有一个计数器的代码,当点击 +1 时,由于 state 发生了改变,那么就会重新执行App 中的 render 函数,而当 App 中的 render 函数被调

2020-08-02 22:18:26

详解setState 方法

文章目录为什么要是用 setStatesetState 异步更新为什么要异步更新如何获取更新后的值同步 or 异步setState的合并数据的合并多个setState合并setState性能优化react 更新机制diff算法的作用传统 diff算法react diff算法对比不同类型的元素对比同一类型的元素对子节点进行递归keys的优化在最后位置插入数据在前面插入数据为什么要是用 setState当我们希望通过点击一个按钮从而改变一个文本时,就需要使用到 setState方法,比如:import R

2020-08-02 21:47:31

react 组件化开发

分而治之的思想将一个复杂的问题拆分成许多小的问题,通过解决每一个小问题进而解决复杂的问题。比如:在求解大数问题上就用到了分而治之的思想。组件化开发组件:组件允许你将 UI 拆分为独立可复用的代码片段,并对每个片段进行独立构思。将一个完整的页面分成很多个组件,每个组件都用于实现页面的一个具体功能。而每一个组件还可以根据具体需求进行具体的划分,另外有的组件也可以在不同的页面进行复用常见的组件常见的组件有两种类组件,也叫做有状态组件函数组件,也叫做无状态组件区别:有状态组件:拥有状态、拥有

2020-08-01 20:21:54

jsx的用法

什么是 jsxjsx 是一种 JavaScript 的语法扩展(eXtension),有时候也叫做 JavaScript XML,它能让我们可以在 js 中编写 htmljsx 的使用书写规范jsx的顶层只能有一个根元素,即就是最外层需要包括一个 div 标签或者 Fragment在 jsx 最外面包裹一个 () ,就可以进行换行书写jsx 中单、双标签都可以注释的使用render() { return ( <div> {/* 注释 */}

2020-07-31 23:14:13

初始react

react 简介react 是用于构建用户界面的 JavaScript 库 官网特点声明式编程:我们只需要维护自己的状态(数据),当状态(数据)改变时,React可以根据最新的状态(数据)去渲染我们的UI界面组件化开发多平台适配:可以开发移动端跨平台或 web 应用程序开发依赖react:react开发所必须的核心代码react-dom:渲染在不同平台所需的核心代码babel:将 jsx 转换成 react 代码的工具<script src="https://unpkg.c

2020-07-31 22:14:38

声明式编程和命令式编程

声明式编程声明式编程是一种编程范式,,它关注的是你要做什么(what),而不是 如何做(how)也就是你只需要告诉“机器”你想要的是什么(what),让机器想出如何去做(how)举例:// 想要显示一个p标签<p>This is a text</p>查询学生中年龄大于18对的学生的信息select * from students where age > 18;命令式编程告诉“机器”如何去做事情(how),这样不管你想要的是什么(what),它都会按照你的命

2020-07-31 21:08:24

字典(map)

字典的简单封装,key 为对象时暂时没有做处理,后续会处理class Dictionay { constructor() { this.items = {}; } set(key, value) { this.items[key] = value; } has(key) { return this.items.hasOwnProperty(key); } remove(key) { if (!this.has(key)) {

2020-07-25 21:49:19

集合(set)

简介集合是由一组无序的、不能重复的元素构成,和数学中的集合相比,计算机中的集合是要求元素是不能重复的,但是在数学中的集合趋势可以的。集合其实也是特殊的数组,和数组最大的区别就是:集合里面的元素是没有顺序且不能重复的没有顺序意味着不能通过下标值进行访问不能重复意味着相同的对象在集合中只会存在一份因为集合中的元素是不能重复的,我们正好可以利用对象的属性是不能重服的这一特点,进行集合的封装集合的常见操作由于 es6 中 Set常见的操作自己封装的操作add(value):向集合添加一个

2020-07-13 15:46:08

单向链表、双向链表

单向链表链表和数组一样,都可以用于存储一系列的元素。链表的每个结点(最后一个结点除外)由一个存储元素本身的结点的数据和一个指向下一个元素的引用(指针)组成。这有点类似于一个火车,火车的每节车厢都装着自己的东西并连接着下一节车厢(最后一节车厢除外)。链表通常有一个head 属性(头指针)一直指向第一个结点,最后一个结点指向 null数组与链表的对比数组内存中是一块连续的空间,一般需要提前分配固定的空间大小,空间利用率不高在数组的起始位置插入和删除数据效率低,改变一个数据需要移动后续所有的数据

2020-07-12 20:51:54

队列(Queue)、优先队列、双端队列

队列的简介队列和栈一样,也是一种运算受限的线性表(线性结构),它只允许在表的前端(front)进行删除操作,在表的后端(rear)进行插入操作。它的特点是先进先出(FIFO)队列的具体表现生活中学校餐厅中,先来排队的人先买饭,后来的人排在先来的人的前面计算机中打印队列:当打印多个文件时,就需要排队打印线程队列:开启多线程时,当新开启的线程所需要额资源不足的时候就会放入线程队列,等待CPU的处理另外还有消息缓冲器、邮件缓冲器、操作系统资源管理等普通队列只允许在表的前端进行删除操作,在

2020-07-08 11:53:04

栈的简介栈是一种运算受限的线性表(线性结构),它只允许在表的一端(栈顶)进行进行插入和删除运算,另一端是栈底,栈它的特点是后进先出(LIFO)一个栈如图所示入栈出栈栈的具体表现生活中生活中,餐厅里面叠放在一起的盘子,刚放上去的,往往会被最先拿走程序中函数调用栈:假设函数A中调用函数B,函数B中又调用了函数C,函数C中还调用了函数D;在函数A执行的过程中会将函数A压入栈;随后轮到函数B执行时,也会将函数B压入栈。另外函数C和D执行时也都会被压入栈。所以当前栈的顺序为:A->B

2020-07-07 15:10:01

let 和 const

文章目录变量声明:varvar 声明变量的特点变量的声明提升可重复定义变量被挂载到 window 上变量声明:letlet 变量声明的特点没有变量的声明提升、不能重复的定义、也不能被挂载到 window 上和 {} 一起使用会产生块级作用域临时死区(TDZ)变量声明:constconst 与 let 声明变量的相同之处const 与 let 声明变量的不同之处for循环中的 var 和 let变量声明:var在看 let、const 声明变量之前,先来看一下 var 声明变量的特点var 声明变量的特

2020-07-06 18:34:32

查看更多

勋章 我的勋章
  • 签到新秀
    签到新秀
    累计签到获取,不积跬步,无以至千里,继续坚持!
  • 新人勋章
    新人勋章
    用户发布第一条blink获赞超过3个即可获得
  • 阅读者勋章Lv2
    阅读者勋章Lv2
    授予在CSDN APP累计阅读博文达到7天的你,是你的坚持与努力,使你超越了昨天的自己。
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv3
    勤写标兵Lv3
    授予每个自然周发布7篇到8篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。
  • 学习力
    学习力
    《原力计划【第二季】》第一期主题勋章 ,第一期活动已经结束啦,小伙伴们可以去参加第二期打卡挑战活动获取更多勋章哦。
  • 分享学徒
    分享学徒
    成功上传1个资源即可获取