![](https://img-blog.csdnimg.cn/20200402202133183.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
React基础
文章平均质量分 87
React.js 学习
X北辰北
坐标成都,专注于Web开发,主要技术栈为React。
展开
-
26【React基础-5】React Hook
hook出现的意义hook是react 16.8版本才增加的知识,它出现的目的就是让我们可以在函数组件中使用很多类组件中才有的特性,例如state、生命周期等。hook简介hook说白了其实就是一些react中特殊的函数,只不过这些函数允许我们通过钩子的形式钩入一些react的特性,例如我们想要在函数组件中使用state的话就不用将其转为类组件,直接使用useState()这个hook函数即可;如果想要在函数组件中使用类似于类组件的生命周期这些函数的话,直接使用useEffect()这个h.原创 2021-05-26 16:23:02 · 422 阅读 · 2 评论 -
25【React基础-4】组件 & Props
写在前面本文是【React基础】系列的第四篇文章,这篇文章中我们介绍一下在react开发中经常提及的"组件"以及"props"到底是什么东西,以及它们之前的关系,并且简单介绍下组件的种类:函数组件和类组件。概述上文中我们简单介绍了"元素"的概念,并且了解到"元素构成组件,组件构成页面"这样一个规律。所以通过上文了解了元素之后,这篇文章我们来继续了解下组件的相关概念。项目demo地址https://github.com/xuqwCloud/reactbasic组件简介组件其实就原创 2020-11-02 11:02:21 · 407 阅读 · 0 评论 -
24【React基础-3】元素渲染
写在前面本文是【React基础】系列的第三篇文章,这篇文章中我们介绍一下在react中的"元素"这个概念,并且了解下它跟我们传统的浏览器DOM元素有什么不同。概述上一篇文章我们为大家介绍了react中独特的代码编写方式——JSX。通过上文的了解,我们知道我们可以将一段HTML标签代码直接赋值给一个JS变量,并且将这个变量传给react相应的方法之后,前端浏览器页面就会看到预期的显示效果,那在这个过程中,我们本文所介绍的"元素"这个东西到底是什么呢,我们接下来给大家简单介绍一下。项目demo地原创 2020-10-24 09:08:05 · 349 阅读 · 0 评论 -
23【React基础-2】JSX
写在前面本文是【React基础】系列的第二篇文章,这篇文章中我们介绍一下在react中一种另类的编码方式——JSX。它可是允许我们将HTML标签直接编写在JS代码中的呦,感兴趣的话就一起来学习吧。概述上一篇文章在结束时大家肯定会有很多疑问,这篇文章开始我们就为大家开始一一解答这些疑问。本文首先解答一下第一个疑问:为什么在js后缀的代码文件中可以编写HTML标签代码,并且代码还不会报错?项目demo地址https://github.com/xuqwCloud/reactbasicJ原创 2020-10-15 09:09:53 · 471 阅读 · 3 评论 -
22【React基础-1】Hello World
写在前面从这篇文章开始,我们重新来学习一下React的官网。本文从经典的Hello World示例开始,给大家介绍下react应用的创建,通过本文的介绍,我们学会新建一个react应用。概述React其实就是一个JS文件库,本质上跟我们的jQuery这些JS库是一样的,所以大家在开始的时候不要有任何的心理负担,觉得它很难,其实它一点都不难。这篇文章我们先来新建第一个react应用。项目demo地址https://github.com/xuqwCloud/reactbasicRe原创 2020-10-13 08:52:03 · 2003 阅读 · 18 评论 -
15 React——路由配置(动态路由&GET传值)
一、动态路由 我们通过配置基本路由,可以实现页面间的切换,但是如果在一个页面中有一列表标题,我们点击各个标题,就能进入到此标题所表示的内容页面中,这该如何实现呢,下面就要用到我们的动态路由了,实际效果如下图所示: 首先,我们已经在App根组件中已经配置了主页、新闻、产品三个组件的路由,如下: 接下来我们要在News组件中定义一组数据,然后将其渲染到...原创 2018-11-05 15:46:13 · 8730 阅读 · 1 评论 -
16 React——JS跳转路由(实现登陆功能)
运用JS跳转路由实现登录功能。具体操作如下:1 定义一个登录组件,里面包含两个输入框,一个提交按钮,三个表单控件写在一个<form>标签里,同时,我们定义form的onSubmit事件,阻止它提交页面防止页面刷新,如下: 2 我们在表单提交事件中获取输入框的值,并做判断,在此处使用了ref操作dom的写法,当然,我们也可以使用react双向绑定数据的写法,如下:...原创 2018-11-05 15:51:02 · 4279 阅读 · 0 评论 -
17 React——路由的模块化及嵌套
一、路由模块化 路由的模块化其实就是类似于vue中的路由模块化,我们通过定义一个数组,将路径和组件包含在里面,然后在配置路由的时候用模块化写法就可以,如下所示:1 定义路由路径及组件包:2 配置路由时用模块化写法:3 在src目录下新建一个route目录,在此目录下新建一个routes组件,然后将上述的数组剪切到这个文件中,如图: 4 最后,在根组...原创 2018-11-05 15:56:54 · 3865 阅读 · 4 评论 -
18 React——Ant Design的使用
之前的文章都在介绍React的入门,我们从一个react项目的创建到组件的新建,再到路由的配置,最后的路由模块化。我们可以创建的都是一些简单的react页面,它的样式我们最然可以写css文件来修饰,但是工作量有点大。 接下来我们讲解react搭配使用的一套组件库——Ant Design。它类似于Bootstrap,里面提供了丰富的组件,我们只需配置环境后即可按需引用它们来...原创 2018-11-05 16:01:52 · 2068 阅读 · 0 评论 -
19 React——Ant Design(按需加载样式文件)
在上篇文章中我们简单介绍了Ant Design组件的使用,但是在使用过程中我们在样式文件中直接加载了全部的Antd样式文件,这对于前端页面来说并不符合其开发要求,接下来我们介绍css样式文件的按需加载。1 首先,我们需要在项目文件中安装自定义配置的工具。在项目文件夹中打开命令行工具,输入“npm install react-app-rewired --save”,如图:2 ...原创 2018-11-06 08:38:42 · 3793 阅读 · 0 评论 -
20 React项目生成及部署
react项目的部署和普通的web项目部署过程不同。下面来看一下整个项目从生成到发布的整个流程。一、项目生成1 进入项目文件夹,在此处打开命令行工具,输入“npx create-reacr-app my test”生成一个名为mytest的项目文件,如图:2 然后进入到这个文件夹,输入命令“npm start”启动项目,如图: 3 如上所示就是一个简单的...原创 2018-11-06 08:39:07 · 2789 阅读 · 3 评论 -
21 React生命周期整理流程图
React Component,就像人会有生老病死一样有生命周期。一般而言 Component 有以下三种生命周期的状态:Mounting:已插入真实的 DOM Updating:正在被重新渲染 Unmounting:已移出真实的 DOM针对 Component 的生命周期状态 React 也有提供对应的处理方法:Mounting componentWillMount() co...原创 2019-06-06 10:13:48 · 895 阅读 · 0 评论 -
14 React——生命周期函数
生命周期函数其实是控制组件各个阶段所触发的事件,以下是常见的几种生命周期函数: 组件生命周期函数执行流程大致可以这样区分: 一般来说,componentDidMount方法里面放置dom操作和请求数据的代码。...原创 2018-11-05 15:37:23 · 415 阅读 · 0 评论 -
13 React——约束性组件&非约束性组件
非约束性组件: <input type="text" defaultValue="a" /> 这里面的defaultvalue其实就是原生DOM中的value属性,这样写出来的组件,其value值就是用户输入的内容,react完全不管理输入过程。约束性组件: <input value={this.state.data} type="t...原创 2018-11-05 15:34:48 · 651 阅读 · 0 评论 -
02 React快速入门(二)——this的指向和数据修改问题
问题描述: 在react学习中,通过定义一个按钮,然后为此按钮绑定一个事件,此事件主要的功能就是用户点击按钮,就会在相应的页面增加一个item选项。在代码层面来说,在代码里的state下的list会增加一个数据,如下所示: 初始化函数中定义了一个state变量,此变量下有一个空的list数组,来存放数据:constructor(props){ //组件初始化函...原创 2018-09-29 13:53:43 · 379 阅读 · 0 评论 -
03 React快速入门(三)——实现从一个输入框中添加完数据后此输入框内容清除的功能
功能描述: 我们在一个输入框输入内容,然后点击添加按钮,此输入框的内容就会添加到页面上,但是此输入框中还存在上次输入的内容,我们想在每次输入添加完成之后,此输入框中的内容就会清除,如图: 实现思路: 我们可以先在输入框上定义一个onChange事件,此事件通过一个e参数来获取到输入框中的内容,将它保存在一个变量中,然后每次点击按钮就会动态的在...原创 2018-09-29 13:58:58 · 3468 阅读 · 0 评论 -
04 React快速入门(四)——组件拆分
问题描述: 在目前存在的实例中,代码结构如下图所示: 在index.js中引入了TodoList.js中定义的组件来实现页面上的一个简单布局,一个输入框和一个按钮,通过点击按钮来依次将输入框中的内容显示在页面上,并且也实现了删除功能,点击某一列,此列将会被删除,如图: 因为此时的页面是一整个的TodoList组件,所以我们想将它进行拆分,分解为更...原创 2018-09-29 14:09:34 · 1979 阅读 · 0 评论 -
05 React快速入门(五)——react中优化代码
在之前的文章中,react代码的书写有很多冗余,所以接下来对代码进行一下优化。 首先优化的是关于this指向这一块的代码,我们不必在每次的绑定后面加bind(this)语句,只需在构造函数里做处理就可以,如图: 其次就是在渲染的时候,代码量有点大,我们可以定一个函数来实现,如图: 最后是关于定义组件时候的写法: ...原创 2018-09-29 14:16:45 · 562 阅读 · 0 评论 -
06 React快速入门(六)——使用css样式
在react中组件使用样式主要有两种方式:内联式和外联式。下面分别介绍两种方式: 一、内联式 使用内联样式,和html中差不多,不多在此处需要注意的是,通过style属性不能直接用双引号就定义样式,而要用对象的方式来定义样式,如图: 二、外联式 外联样式表主要是通过类名来实现,将样式定义代码放在一个单独的样式表...原创 2018-09-29 14:21:48 · 467 阅读 · 0 评论 -
07 React+Ant Design学习(一)——快速构建一个主页
通过对React.js一周左右的学习后,就想着自己写一个主页,在这一周的学习中虽然对react组件化开发的思想有了较深的理解,但自己还是很迫切的希望能动手结合Ant Design写出来一个主页。因为当初学react的目的就是为了学习怎样使用Ant Design,也不知道出于这样的目的去学习react是不是正确的做法。 第一次看见Ant Design时就觉得这东西好玩,有点...原创 2018-10-19 12:18:06 · 9998 阅读 · 6 评论 -
08 React+Ant Design学习(二)——路由配置
路由配置流程: 具体操作流程 1 打开计算机命令行工具,输入命令“npm install react-router --save-dev”安装路由包,如果出现下图所示信息,则说明安装失败:解决方法: 出现此问题的原因主要是我没有定位到项目文件夹导致。通过定位到项目文件夹安装路由模块可解决上述问题。 但是,在安装过程中可能还会...原创 2018-10-19 12:35:41 · 3345 阅读 · 0 评论 -
09 React——创建组件、使用组件
创建好一个react应用程序后,我们就需要创建组件并且使用组件,其实react开发本身就是创建组件、使用组件的过程。下面来看一下示例: 上图中的html页面上总共有三个组件:根组件、Home组件和列表组件,下面就具体聊聊该怎么创建这些组件以及如何使用它们。创建组件:1 我们修改一下默认创建的react应用程序的代码结构,在src目录下创建相应的文件夹及文件,方...原创 2018-11-05 14:52:46 · 382 阅读 · 0 评论 -
10 React——绑定数据、引入图片、数组循环
在react中我们可以实现数据的绑定。可以绑定组件的属性数据、样式数据等,通过绑定后它们的显示效果和之前直接写在代码中相比并无差异,只是实现了代码和数据的分离,如下图:下面来看一下具体的实现方式。一、绑定数据1 绑定数据 绑定的数据我们一般要放在构造函数中,如下: 通过this.state定义我们要绑定的数据,然后在组件的属性值位置我们可...原创 2018-11-05 15:03:45 · 3236 阅读 · 0 评论 -
11 React——定义&执行方法、获取&改变this.state中的数据、方法传参
一、定义&执行方法、获取this.state中的数据 在react中定义方法的时候,可以在consructor()和render()平级定义方法,它们之间不能用逗号进行分割,如下所示: 上述定义的就是一个hello方法,向页面输出一段字母。 如果我们定义一个方法去获取this.state中的msg的值的时候,会牵扯到一个this指向的问题...原创 2018-11-05 15:13:12 · 6207 阅读 · 0 评论 -
12 React——事件对象、表单事件、双向数据绑定
1 事件对象 react中点击一个按钮,然后调用一个方法,在这个方法定义时如果定义一个参数event,此时的这个event就是事件对象,我们可以通过在控制台输出它来查看,如图: 此对象有一个target属性,我们可以获取它来获取到此时点击的这个dom节点,如图: 进而,可以通过getAttribute()方法获取到节点...原创 2018-11-05 15:32:48 · 2053 阅读 · 0 评论 -
01 React快速入门(一)——使用循环时对于‘key’报错处理
问题描述: 在刚开始接触react学习的时候,编写一个小功能时,使用了map来循环一个数组中的数据,输出到前端页面,代码调试运行后正常显示,但是打开控制台却发现有一条关于“key”的报错消息,详细信息如下: 上网查阅资料得知,此错误出现是因为与react中的diff算法有关系; 简单的理解就是:react中循环输出时要有一个key,并且这个key不...原创 2018-09-29 13:47:19 · 2392 阅读 · 2 评论