![](https://img-blog.csdnimg.cn/23b8d8b8acd0451ba824698e409b0252.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React 相关
文章平均质量分 84
react 较为详细的讲解
我是+V
一个偏向于实用型技术分享的博主。博文内容仅为本人学习记录,切勿尽信
展开
-
# react 中使用路由 router 详解
路由就是一个映射关系( key: value)。key 为路径, value 可能是 function 或者是 component。我们学习路由的时候会遇到两个经常用的单词router和route。区别是什么呢?router 是全局的路由器对象。route 是当前激活的路由对象。打个比方哈,我们自己家里上网需要路由器吧,router 就相当于家里的 路由器。route 就相当于路由器上面的网线插口或者是那个天线,不能没有 router 就是用 route。明确好界面中的导航部分、展示部分都是哪里。原创 2022-10-26 09:09:10 · 2345 阅读 · 0 评论 -
31、react 中的 Fragment
今天说的这一小节超级简单,但是呢,不说还不行,因为在实际开发项目当中你会确确实实的发现有这样一个使用场景,很多人都会写,所以说尽管不影响我们的实际开发,但别人确实会这样操作,为了能更好的看清项目代码,稍微提一嘴吧。原创 2022-10-16 20:18:59 · 1343 阅读 · 1 评论 -
30、react 中的 Hooks
Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)发ajax请求数据获取设置订阅 / 启动定时器手动更改真实DOM// 在此可以执行任何带副作用操作 return() => {// 在组件卸载前执行 // 在此做一些收尾工作, 比如清除定时器/取消订阅等 } } , [ stateValue ]) // 如果指定的是[], 回调函数只会在第一次render()后执行可以把 useEffect Hook 看做如下三个函数的组合。原创 2022-10-03 15:40:38 · 279 阅读 · 0 评论 -
29、【拓展】 react 中的 setState
对象式的setStatestateChange为状态改变对象(该对象可以体现出状态的更改)callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用函数式的setStateupdater为返回stateChange对象的函数。updater可以接收到state和props。callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。对象式的 setState 是函数式的 setState 的简写方式 (语法糖)原创 2022-10-02 17:58:26 · 113 阅读 · 0 评论 -
28、react 使用 react-redux
reac-redux 是一个 react 的插件库。作用是专门用来简化 react 应用中使用 redux。原创 2022-09-27 19:28:27 · 972 阅读 · 0 评论 -
27、react 使用 redux 状态管理器
英文文档: https://redux.js.org/中文文档:http://www.redux.org.cn/Github地址: https://github.com/reactjs/redux作用: 集中式管理 React 应用中多个组件共享的状态,就像是 Vue 项目中的 Vuex。接下来我们写一个最简单的 redux 案例。首先得安装哈!接下来开始编写案例:我们有一个页面,求和 操作。页面显示当前求和的值,默认最开始是 ,有一个下拉框,选择要加的数,下面有四个按钮,单击“加”数据加选择的数,原创 2022-09-27 14:50:46 · 577 阅读 · 0 评论 -
26、react UI 组件库 Ant-design 蚂蚁金服UI组件库
这是国外非常流行的 react UI 组件库,但是在国内并不是很常用。原创 2022-09-25 20:32:51 · 2194 阅读 · 0 评论 -
25、react 中使用路由 router 详解
路由就是一个映射关系( key: value)。key 为路径, value 可能是 function 或者是 component。我们学习路由的时候会遇到两个经常用的单词router和route。区别是什么呢?router 是全局的路由器对象。route 是当前激活的路由对象。打个比方哈,我们自己家里上网需要路由器吧,router 就相当于家里的 路由器。route 就相当于路由器上面的网线插口或者是那个天线,不能没有 router 就是用 route。原创 2022-09-22 17:21:33 · 951 阅读 · 0 评论 -
24、react 请求 github 用户信息案例
占位,后期补上。原创 2022-09-20 17:43:46 · 295 阅读 · 0 评论 -
23、react 使用消息订阅发布机制
我们前边做了一个 todoList 的案例,案例里面拆了四个组件,然后涉及到了组件传值。其实当时已经涉及到了兄弟组件传值,但是因为那时候不会兄弟组件传值,所以说呢,就是用了父组组件传值,把组件需要用到的数据放在了最外边的 App 组件,然后通过父子组件传值实现功能的。原创 2022-09-20 17:42:06 · 252 阅读 · 0 评论 -
22、react 中的 Axios 代理配置
package.json 实现跨域配置配置简单,前端请求资源师可以不加任何前缀。不能配置多个代理。优先匹配前端资源。setupProxy.js 实现跨域配置可以配置多个代理,可以灵活的控制请求是否走代理。配置繁琐,前端请求资源时也必须加前缀。完成,今天就先到这里吧。原创 2022-09-20 13:52:34 · 1168 阅读 · 3 评论 -
21、react 制作一个 todoList 组件
上一篇博文我们说了 react 脚手架创建并使用一个组件,OK,那么重点来喽,每个框架学习的必做案例,todoList 功能。原创 2022-09-20 10:06:23 · 854 阅读 · 0 评论 -
20、一个简单的 Hello 组件
上一篇博文我们实现了脚手架工具的安装以及默认的文件结构说明,那接下来我们做一些简单的本地化处理,为啥呢?因为上篇博客我们看到,脚手架工具给我们加了很多的文件,但是我们基本上都又不到对吧,所以说我们平时开发项目只需要几个文件就可以了,这篇博客就和大家分享一下,日常使用脚手架开发 react 项目的一个关键的点。原创 2022-09-19 14:37:44 · 298 阅读 · 0 评论 -
19、react 脚手架工具初始化
public 文件夹主要用来存放静态资源文件。比如:页面,文件,图片等静态资源。网站页签图标index.html主页面logo图logo图应用加壳的配置文件robots.txt爬虫协议文件我是𝒆𝒅. 的 giteeApp.cssApp组件样式App.jsApp组件用于给App做测试index.css样式文件index.js入口文件logo.svglogo图片页面性能分析文件(需要 web-vitals 库的支持)组件单元测试的文件(需要 jest-dom 库的支持)原创 2022-09-19 11:28:33 · 282 阅读 · 0 评论 -
18、react 遍历 key 值的作用
在学习 react 或者是 vue 的时候,遍历一个数组展示到页面,都需要设置一个 key 值。那么这个 key 值作用是什么?需要怎么设置啊?原创 2022-09-18 17:11:46 · 373 阅读 · 0 评论 -
17、react 的生命周期
初始化阶段:是由 ReactDOM.render() 触发 – 初次渲染- render()更新阶段:是由 this.setState() 或者父组件重新 render 触发- render()卸载组件:由 ReactDOM.unmountComponentAtNode() 触发尽管哈,前前后后涉及到了很多钩子,但是稍作了解就可以,因为在实际开发过程中,有的钩子基本很少使用到,主要专注一下、render、原创 2022-09-18 16:46:03 · 431 阅读 · 0 评论 -
16、react 中的高阶函数和柯里化
高阶函数:如果一个函数不符合下面两个规范中的任意一个,那该海曙就是高阶函数。原创 2022-09-18 01:45:40 · 269 阅读 · 1 评论 -
15、react 的 非受控组件 和 受控组件
组件分为 非受控组件 和 受控组件,这两种有什么区别呢,单说概念不好理解,那我们通过一个案例来说明一下,一下子就可以弄懂了,很简单的。原创 2022-09-17 18:17:38 · 177 阅读 · 1 评论 -
14、react 中的事件处理
通过 onXX 属性指定时间处理函数(注意大小写)。—— 为了更好的兼容性。react 使用的是自定义(合成)事件,而不是使用原生的DOM事件。react 中的事件是通过事件委托方式处理的(委托给组件最外层元素)。—— 事件委托的原理是事件冒泡,为了高效。通过 event.target 得到发生事件的 DOM 元素对象。—— 不要过渡的使用 ref,发生事件的元素正好是我要操作的元素时可以省略。完成了,干饭去!我是𝒆𝒅. 的 gitee。原创 2022-09-17 17:28:45 · 645 阅读 · 0 评论 -
13、react 使用 refs
前面两篇博客介绍了 react 的两大模块 state 和 props。然后呢,今天来介绍最后一个 ref。学习过 vue 项目的宝子们应该对于 ref 不是很陌生,那在 react 里面 ref 的作用和 vue 是差不多的。原创 2022-09-17 15:28:05 · 767 阅读 · 0 评论 -
12、react使用 props
上一篇博文写了 react 使用 state 进行状态管理,状态是 react 一个常用的模块,今天说一下 props 这个模块,也是在开发 react 过程中必不可少的。原创 2022-09-16 17:16:49 · 442 阅读 · 0 评论 -
11、react 使用 state
之前说函数式组件和类式组件的时候我们说过,主要实现的定义,主要实现的定义,那什么是简单组件,什么是复杂组件,其实很简单,就是我们今天要了解的 。简单点说:好了,我们知道通过 的有无来判断你的组件是不是复杂组件,那新的问题又来了,什么状态 ?【理解一下】打个比方:OK,仔细理解上面这个例子,我们可以得出一个结论: 是有 的,人的 状态 会 。同样, 也是有 的,状态 会 。简单理解:接下来写一个案例,然后我们通过这个案例把 state 相关的基础东西都说一下。一个页面,内容很简单,就是一个单纯的原创 2022-09-15 21:08:47 · 532 阅读 · 0 评论 -
10、react 类式组件
第一,解析组件标签,找到 Demo 组件;第二,发现组件是使用类定义的,随后new出该类实例,并通过改实例调用到原型上的render方法。第三,将返回的虚拟dom转为真实dom呈现在页面。今天就到这里,没啥好说的,下面讲一下三大模块,下篇博文开始。拜拜了!我是𝒆𝒅. 的 gitee。原创 2022-09-15 15:06:01 · 310 阅读 · 0 评论 -
9、react 复习类相关知识
这篇博文和 react 没有关系,只是单纯的回顾一下类的相关知识,以免后边用到不知所措。这里就写两个案例,创建一个类调用,然后再写一个类继承,进行调用和复写方法。原创 2022-09-15 14:28:00 · 157 阅读 · 0 评论 -
8、react 函数式组件
上一篇博文我们稍微说了一下 react 开发者工具的安装,主要目的是使用他才管理组件很好用,那啥是组件呢?本篇博文稍微说一下。原创 2022-09-15 13:39:56 · 304 阅读 · 0 评论 -
7、react 开发者工具 React Developer Tools 的安装
今天给大家推荐一个 react 的开发者工具,这个大家应该都知道,可以帮助我们快速的查阅组件、状态、路由的工具,就像是 vue 里面的 dev-tools 工具一样,今天说一下安装和使用。这里说谷歌浏览器的哈,然后呢,需要外网,不然访问不了谷歌应用商店。但是像是 360浏览器 或者是其他浏览器操作也类似,那些浏览器的应用商店应该也是有的。原创 2022-09-14 20:32:13 · 2024 阅读 · 0 评论 -
6、react 模块和组件
上面几篇博文主要说了一下 jsx 的使用,今天稍微说一下 react 的模块和组件。原创 2022-09-13 20:49:25 · 163 阅读 · 0 评论 -
5、react 基础案例
前面几篇博客都说了一些 jsx 的基础知识,那么现在这篇博文主要是分享一个小的练习,主要是把前面的东西综合一下,案例很简单。原创 2022-09-13 20:38:32 · 120 阅读 · 0 评论 -
4、JSX 基本语法规则
JSX 全称是 JavaScript XML。react 定义的一种类似于 xml 的 js 拓展语法:js + xml。本质是 React。createElement(component, props, … children) 的语法糖。作用:- 写法:var ele = 我是𝒆𝒅. - 他不是字符串,也不是 HTML/XML 标签- 他最终产生的就是一个 js 对象标签名任意:html 标签或者是其他标签。原创 2022-09-11 17:51:45 · 428 阅读 · 0 评论 -
3、react 虚拟 DOM 与 真实 DOM
本质是一个 Object 类型的对象,也就是一般对象。虚拟 dom 比较“轻”,真实 dom 比较“重”,因为虚拟 dom 是 react 内部自己使用,不需要真实 dom 那么多的属性。虚拟 dom 最终会被 react 转化成 真实 dom 渲染在页面上。好了,今天的内容就到这里了吧,也没啥可以在说的了,就简单了解一下真实 dom 和虚拟 dom 的区别。OK,结束了,拜了个拜!下篇博文见!【本博文相关代码资料】:我是𝒆𝒅. 的 gitee。原创 2022-09-11 16:35:07 · 292 阅读 · 0 评论 -
2、react 两种方式创建 dom
原因就是 js 创建虚拟 dom 可能会遇到很繁琐的情况,jsx 的出现,就是解决 dom 创建繁琐问题,可以是开发人员快速的实现开发工作。其实还有一个小问题想说一下,就是我们使用 jsx 开发的时候,我们发现我们写的代码都在一行上,谁家开发的代码都写在一行啊,那肯定是有瑕疵的,所以说他有一个写法可以更好的优化我们的代码,看下面代码。原创 2022-09-11 16:04:35 · 1343 阅读 · 0 评论 -
1、react 基础学习前言
# react 基础学习前言## react 前期知识储备- javascript 基础知识储备。- ES6 相关基础知识储备。- 与是否掌握 Vue 编程无关。## react 学习的好处- 众所周知,小厂使用 vue,大厂使用 react。- react 的维护团队有点厉害,由 facebook 团队进行维护。- react 咋国际上的地位相比于 vue 或者是 angular 框架高一些。- react 更是纯组件开发的代表,即一切皆组件。原创 2022-09-11 15:25:24 · 97 阅读 · 0 评论