随笔分类 - React.js 学习
摘要：React Component，就像人会有生老病死一样有生命周期。一般而言 Component 有以下三种生命周期的状态： Mounting：已插入真实的 DOM Updating：正在被重新渲染 Unmounting：已移出真实的 DOM 针对 Component 的生命周期状态 React 也有
阅读全文
摘要：在上篇文章中我们简单介绍了Ant Design组件的使用，但是在使用过程中我们在样式文件中直接加载了全部的Antd样式文件，这对于前端页面来说并不符合其开发要求，接下来我们介绍css样式文件的按需加载。 1 首先，我们需要在项目文件中安装自定义配置的工具。在项目文件夹中打开命令行工具，输入“npm
阅读全文
摘要：react项目的部署和普通的web项目部署过程不同。下面来看一下整个项目从生成到发布的整个流程。 一、项目生成 1 进入项目文件夹，在此处打开命令行工具，输入“npx create-reacr-app my test”生成一个名为mytest的项目文件，如图： 2 然后进入到这个文件夹，输入命令“n
阅读全文
摘要：之前的文章都在介绍React的入门，我们从一个react项目的创建到组件的新建，再到路由的配置，最后的路由模块化。我们可以创建的都是一些简单的react页面，它的样式我们最然可以写css文件来修饰，但是工作量有点大。 接下来我们讲解react搭配使用的一套组件库——Ant Design。它类似于Bo
阅读全文
摘要：一、路由模块化 路由的模块化其实就是类似于vue中的路由模块化，我们通过定义一个数组，将路径和组件包含在里面，然后在配置路由的时候用模块化写法就可以，如下所示： 1 定义路由路径及组件包： 2 配置路由时用模块化写法： 3 在src目录下新建一个route目录，在此目录下新建一个routes组件，然
阅读全文
摘要：运用JS跳转路由实现登录功能。具体操作如下： 1 定义一个登录组件，里面包含两个输入框，一个提交按钮，三个表单控件写在一个<form>标签里，同时，我们定义form的onSubmit事件，阻止它提交页面防止页面刷新，如下： 2 我们在表单提交事件中获取输入框的值，并做判断，在此处使用了ref操作do
阅读全文
摘要：一、动态路由 我们通过配置基本路由，可以实现页面间的切换，但是如果在一个页面中有一列表标题，我们点击各个标题，就能进入到此标题所表示的内容页面中，这该如何实现呢，下面就要用到我们的动态路由了，实际效果如下图所示： 首先，我们已经在App根组件中已经配置了主页、新闻、产品三个组件的路由，如下： 接下来
阅读全文
摘要：生命周期函数其实是控制组件各个阶段所触发的事件，以下是常见的几种生命周期函数： 组件生命周期函数执行流程大致可以这样区分： 一般来说，componentDidMount方法里面放置dom操作和请求数据的代码。
阅读全文
摘要：非约束性组件： <input type="text" defaultValue="a" /> 这里面的defaultvalue其实就是原生DOM中的value属性，这样写出来的组件，其value值就是用户输入的内容，react完全不管理输入过程。 约束性组件： <input value={this.
阅读全文
摘要：1 事件对象 react中点击一个按钮，然后调用一个方法，在这个方法定义时如果定义一个参数event，此时的这个event就是事件对象，我们可以通过在控制台输出它来查看，如图： 此对象有一个target属性，我们可以获取它来获取到此时点击的这个dom节点，如图： 进而，可以通过getAttribut
阅读全文
摘要：一、定义&执行方法、获取this.state中的数据 在react中定义方法的时候，可以在consructor()和render()平级定义方法，它们之间不能用逗号进行分割，如下所示： 上述定义的就是一个hello方法，向页面输出一段字母。 如果我们定义一个方法去获取this.state中的msg的
阅读全文
摘要：在react中我们可以实现数据的绑定。可以绑定组件的属性数据、样式数据等，通过绑定后它们的显示效果和之前直接写在代码中相比并无差异，只是实现了代码和数据的分离，如下图： 下面来看一下具体的实现方式。 一、绑定数据 1 绑定数据 绑定的数据我们一般要放在构造函数中，如下： 通过this.state定义
阅读全文
摘要：创建好一个react应用程序后，我们就需要创建组件并且使用组件，其实react开发本身就是创建组件、使用组件的过程。下面来看一下示例： 上图中的html页面上总共有三个组件：根组件、Home组件和列表组件，下面就具体聊聊该怎么创建这些组件以及如何使用它们。 创建组件： 1 我们修改一下默认创建的re
阅读全文
摘要：路由配置流程： 具体操作流程 1 打开计算机命令行工具，输入命令“npm install react-router --save-dev”安装路由包，如果出现下图所示信息，则说明安装失败： 解决方法： 出现此问题的原因主要是我没有定位到项目文件夹导致。通过定位到项目文件夹安装路由模块可解决上述问题。
阅读全文
摘要：通过对React.js一周左右的学习后，就想着自己写一个主页，在这一周的学习中虽然对react组件化开发的思想有了较深的理解，但自己还是很迫切的希望能动手结合Ant Design写出来一个主页。因为当初学react的目的就是为了学习怎样使用Ant Design，也不知道出于这样的目的去学习react
阅读全文
摘要：在react中组件使用样式主要有两种方式：内联式和外联式。下面分别介绍两种方式： 一、内联式 使用内联样式，和html中差不多，不多在此处需要注意的是，通过style属性不能直接用双引号就定义样式，而要用对象的方式来定义样式，如图： 二、外联式 外联样式表主要是通过类名来实现，将样式定义代码放在一个
阅读全文
摘要：在之前的文章中，react代码的书写有很多冗余，所以接下来对代码进行一下优化。 首先优化的是关于this指向这一块的代码，我们不必在每次的绑定后面加bind(this)语句，只需在构造函数里做处理就可以，如图： 其次就是在渲染的时候，代码量有点大，我们可以定一个函数来实现，如图： 最后是关于定义组件
阅读全文
摘要：问题描述： 在目前存在的实例中，代码结构如下图所示： 在index.js中引入了TodoList.js中定义的组件来实现页面上的一个简单布局，一个输入框和一个按钮，通过点击按钮来依次将输入框中的内容显示在页面上，并且也实现了删除功能，点击某一列，此列将会被删除，如图： 因为此时的页面是一整个的Tod
阅读全文
摘要：功能描述： 我们在一个输入框输入内容，然后点击添加按钮，此输入框的内容就会添加到页面上，但是此输入框中还存在上次输入的内容，我们想在每次输入添加完成之后，此输入框中的内容就会清除，如图： 实现思路： 我们可以先在输入框上定义一个onChange事件，此事件通过一个e参数来获取到输入框中的内容，将它保
阅读全文
摘要：问题描述： 在react学习中，通过定义一个按钮，然后为此按钮绑定一个事件，此事件主要的功能就是用户点击按钮，就会在相应的页面增加一个item选项。在代码层面来说，在代码里的state下的list会增加一个数据，如下所示： 初始化函数中定义了一个state变量，此变量下有一个空的list数组，来存放
阅读全文
浙公网安备 33010602011771号