React
文章平均质量分 72
由浅入深学习React
Beiyux
路漫漫其修远兮,一起加油呀
展开
-
react项目使用EventBus实现登录拦截
EventBus是一个事件发布/订阅模式的实现,它允许不同的组件或模块之间进行通信,而不需要直接引用对方。这种模式特别适用于那些需要跨组件传递信息,但又不想引入复杂依赖关系的场景。原创 2024-07-16 17:15:28 · 364 阅读 · 0 评论 -
在原react项目中集成使用Redux(使用步骤总结)
文章目录前言安装Redux新建使用Redux的相关文件全局使用Redux在导航页面进行使用,完成功能最后前言之前写的一个react项目,需要在里面使用Redux,记录一下实现的步骤安装Redux要在项目中使用,所以先来安装一下redux 和 react-reduxcnpm i -D redux react-r这里是使用redux完成这个项目中菜单的一些功能,下面列举的新建文件相关的功能在之前文章有说明,这里就不叙述了新建使用Redux的相关文件在 src 目录下新建 store 文件夹用作原创 2022-04-08 07:30:00 · 1582 阅读 · 0 评论 -
在react项目实战中使用Redux(案例讲解)
前言上篇文章讲解了redux的基本使用方法,这篇文章通过小案例教大家如何在实际的react的项目中实现redux,加深对redux的理解和掌握,基础内容不清楚的可以看看上篇文章——》 Redux的基础用法详解(纯函数的概念)项目中使用Redux这里就新建项目然后使用redux完成一个小案例首先新建项目然后删除掉冗余代码,之后在src文件夹下新建一个pages文件夹,在文件夹下新建一个alipay.js和wxpay.js,然后我们来实现一个这样的需求:比如我们的微信和支付宝都绑定了同一张银行卡,当我原创 2022-04-05 18:43:36 · 2406 阅读 · 0 评论 -
Redux的基础用法详解(纯函数的概念)
前言和vue中的vuex一样,react也有进行状态管理的工具,最近自己在学习这一块的内容所以在此记录一下什么是ReduxRedux是JS的状态容器,提供了可预测的状态管理。JavsScript的状态容器就是装状态的容器,React中,状态就是state。因此我们所谓的JS的状态容器就是去存储状态state的容器。通常在大型项目中使用Redux进行状态管理为什么需要ReduxReact管理不断变化的state是非常困难的,需要通过constructor去定义state,要通过this.setSt原创 2022-04-04 08:00:00 · 1415 阅读 · 0 评论 -
react-antd中表格的使用(数据的请求,带删除功能的表格)
最近在学习react-antd框架,表格这一块在项目中的使用频率很高,最近在学习这一块的内容,所以记录一下原创 2022-04-03 07:30:00 · 5600 阅读 · 0 评论 -
react-antd中使用Upload实现图片裁剪-上传-预览的功能
前言使用react中antd实现图片的上传裁剪和预览,记录一下实现过程,希望能对大家有帮助实现我们这里用到的是antd框架,实现图片上传的功能我们需要安装一个插件antd-img-cropyarn add antd-img-crop然后就可以进行使用:import React, { memo, useState } from 'react'import { Upload } from 'antd'import ImgCrop from ' 'export default memo(原创 2022-04-01 07:30:00 · 2938 阅读 · 1 评论 -
react-Ant Design框架中基础对话框和信息确认框的使用
前言在项目中,对话框和确认框是使用频率很高的组件,这里记录一下react-Ant Design框架中它们的基础用法基础对话框首先要按需引入我们需要使用到的组件:import {Card, Button, Modal} from 'antd'定义两个按钮,控制基础对话框的弹出:<Card title="基础对话框"> <Button type="primary" onClick={() => this.handleOpen('showModal')}>Open&原创 2022-03-31 08:30:00 · 3308 阅读 · 1 评论 -
creat-react-app项目修改webpack的配置项,通过配置自动实现antd的按需加载
craco对于creat-react-app创建的项目,我们想要修改其webpack的配置就需要用到craco,这里先进行安装:npm install @craco/craco --save目前建议6.2.0版本,我使用的是6.2.0比较文定,没有出啥问题配置文件安装好craco之后,我们需要设置配置文件来修改webpack这里我写一个例子:项目中全局加载antd的css,通过修改webpack能让它自动读取,而不需要手动进行引入新建craco.config.js文件首先在项目根目录创建c原创 2022-03-30 22:59:33 · 1008 阅读 · 0 评论 -
react-Ant Design框架项目中文字轮播与图片轮播的实现
前言在react-Ant Design框架项目中实现文字轮播和图片轮播,在这里记录一下,实现过程有一点小坑需要注意文字轮播图实现在Ant Design里面使用轮播图就需要使用Carousel组件首先要把用到的组件进行按需引入import {Card, Carousel} from 'antd'然后写内容:使用Carousel标签包裹轮播的内容,标签上autoplay作用是设置自动播放export class Index extends Component { render() {原创 2022-03-30 22:37:14 · 2450 阅读 · 0 评论 -
关于react-Ant Design框架Button按钮的基础用法
前言最近在学习react-Ant Design框架,把button组件一些用法记录一下引入框架 使用组件首先我们得引用Ant Design和里面的button,才能进行使用原创 2022-03-28 22:36:02 · 3722 阅读 · 1 评论 -
react项目中使用react-router-dom实现路由集中管理和跳转
前言在react后台管理系统中使用router相关插件完成路由的集中管理和跳转,在这里记录一下实现过程下载react-router-domcnpm i -D react-router-dom在nav组件中去写功能代码// nav的index.js中import { Link } from 'react-router-dom'<Link to={item.key}>{item.title}</Link>此时会报错,需要在最外层加Route// 在项目入口的in原创 2022-03-27 07:30:00 · 2401 阅读 · 0 评论 -
react中router路由传参和路由的集中管理
文章目录前言路由传参1.使用:id进行传参:2.路由拼接参数传参3.对象形式传参路由集中管理路由集中管理之子路由前言这篇文章来记录一下 在react路由中如何进行路由传参,还有如何进行路由的集中管理路由传参1.使用:id进行传参:<BrowserRouter> <ul> <li><Link to='/user/:id'>用户中心</Link></li> <li><Lin原创 2022-03-26 07:30:00 · 1770 阅读 · 0 评论 -
react中router路由重定向与高阶组件的手动跳转
文章目录前言路由重定向手动跳转高阶组件的手动跳转前言上篇文章给大家介绍了react项目中路由的基础用法,今天给大家介绍关于router在实战项目中更多的知识路由重定向看下面的案例:1.使用Redirect重定向首先要进行导入2.可以看到这里我们点击登录会跳转到login页面,但是我们在里面添加Redirect标签,给to后面添加路径,也就是重定向到该路径。所以我们点击登录只会跳转/userimport React, { Component } from 'react'import { Bro原创 2022-03-25 07:30:00 · 1338 阅读 · 0 评论 -
react中router路由的基础用法详解(实战小案例讲解)
路由的安装首先我们需要安装routernpm,cnpm之类的安装都行,我这里使用yarnyarn add -D react-router-dom新建页面这里我新建几个页面待会方便演示路由跳转,页面里面就是基础的内容引入路由在app.js中进行引入刚刚安装的router相关工具和上面写的页面:import React, { Component } from 'react'import { BrowserRouter as Router, NavLink, Link, Route } fr原创 2022-03-24 07:30:00 · 982 阅读 · 0 评论 -
react项目中使用axios进行api网络请求的封装
前言最近写react项目使用到axios进行请求封装,在这里记录一下,希望可以帮助到初学的小伙伴准备工作进行请求需要使用axios,所以要先确定你已经安装完成了axios,查看package.json文件如果没有,请先安装axiosnpm install axios开始封装axios首先在src目录下新建axios文件夹,这里我们新建两个文件,分别是config.js和request.jsconfig.js这个文件我们用来进行基础配置,区分开发环境:定义devBaseUrl开发环原创 2022-03-23 19:11:59 · 1391 阅读 · 0 评论 -
从零开始使用react+Ant Design撸一个后台管理系统(一)
文章目录前言1.先来搭个架子—创建项目2.准备工作—装些工具路由和axiosCSS预处理器SCSS安装Ant Design3.开始写项目定义项目文件结构app.js进行布局nav侧边导航前言从本篇开始,教大家从零开始使用react+Ant Design做一个后台管理系统,系列文章持续更新,完成之后会把代码发给大家学习参考,话不多说,直接开冲如果react基础不太好的同学,可以看一下我的react专栏文章回顾一下基础知识:从零入门react系列1.先来搭个架子—创建项目这里使用react脚手架搭建项原创 2022-03-21 11:30:00 · 4267 阅读 · 3 评论 -
react—Hook中useReducer详解(举个例子 )
文章目录useReducer实现累加器useReducer的使用场景useReducer在hooks中,可以为函数式组件提供类似Redux的功能,类似于vuex都是提供状态管理的。官方提供的两种state管理:useState,useReducer。下面我们一起来看看useReducer的用法实现累加器举个简单例子来了解它的使用方法,点击按钮实现累加:1.首选前面要引入useReducer,后面要使用它2.定义[state, dispatch]来接收我们后面的useReducer,因为useRe原创 2022-03-20 21:43:37 · 1894 阅读 · 2 评论 -
react中createRef和useRef的区别
createRef每次重新渲染的时候都会创建一个新的ref对象。useRef第一次渲染创建一个对象之后,再重新渲染的时候,如果发现这个对象已经创建过就不会再创建第二次,性能会好一些。尽量在class组件中使用createRef,在hooks中使用useRef原创 2022-03-19 22:39:40 · 1937 阅读 · 0 评论 -
react-Hook中useEffect详解(使用useEffect清除定时器)
文章目录useEffectuseEffect清除定时器最后useEffect之前我们学习了class组件的声明周期,那么我们想在函数式组件中做一些声明周期有关操作能否实现呢?函数式组件中是没有生命周期的,所以就可以使用useEffect来替代。我们可以把useEffect看作组件加载、组件更新、组件卸载的三个生命周期方法的组合。下面我们一起来通过案例学习useEffect的使用:1.这里需求是写一个点击事件让state累加,并且吧state展示在title上2.首先要导入React, { use原创 2022-03-20 06:45:00 · 7135 阅读 · 1 评论 -
搞懂react中Hooks 状态的用法(案例讲解)
文章目录前言Hook简介为什么会出现Hook什么是HookHook的使用场景Hook的使用原则Hook实现累加器多个状态(案例)复杂状态(案例)使用之前状态值最后前言本篇文章带大家学习react中hooks的用法,自己也是在学习过程中进行记录,如果有总结不恰当的地方欢迎大家指出来,一起交流~Hook简介为什么会出现Hook1.在我们之前对react的学习中我们知道,class组件可以定义自己的state,用来保存组件自己内部的状态,function组件是没有状态的,因为函数式组件的变量他是局部的,原创 2022-03-19 07:30:00 · 1329 阅读 · 0 评论 -
react中高阶函数与高阶组件的运用—(下)(案例详解登录鉴权与增强props)
高阶组件就是一个函数,这个函数接收一个组件作为参数,并返回一个新的组件。高阶组件(HOC)是React中用于复用组件逻辑的一种高级技巧。HOC自身不是React API的一部分,它是一种基于React的组合特性而形成的设计模式。高阶组件例子说明这里我们还是写一个例子,写成组件的形式来说明,一共有登录,登出,注册三个:登原创 2022-03-18 13:25:09 · 1384 阅读 · 0 评论 -
react中高阶函数与高阶组件的运用—(上)(案例详细解释高阶函数)
学习react的同学多多少少对高阶组件有所耳闻,想要学好高阶组件就必须先学好高阶函数的运行,本篇文章就先从高阶函数着手,带大家学习高阶函数和高阶组件的运用高阶函数(HOC)高阶函数(High Order Component)JS函数其实都是指向某个变量,既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以去接收另外一个函数作为参数,这种函数就称之为高阶函数。// 一个最简单的高阶函数function add(x, y, f) { return f(x) + f(y)}原创 2022-03-18 07:15:00 · 1088 阅读 · 0 评论 -
react中ref使用方法解析
组件不是真实的DOM节点,在react开发中,官方也不建议直接去操作原生的DOM。组件的DOM节点是存在于内存中的一种数据结构,叫做虚拟DOM。如果需要从组件中获取真实的DOM节点,那就需要官方提供ref的属性。React提供了ref用于访问在render方法中创建的DOM元素或者是React的组件实例。ref分为三种,我们这里先学两种。string类型看下面的小例子:点击按钮能够把输入框的值赋值给下面的p标签原创 2022-03-17 15:54:49 · 1938 阅读 · 0 评论 -
你真的了解react中的setState吗?(setState现象及原理全方位解析)
文章目录前言为什么要使用setState?setState是'异步'的吗例一:生命周期函数中使用例二:在合成事件中使用例三:在setTimeout中使用例四:在原生事件中使用总结:前言在刚开始学习react的时候,我们会经常使用到setState改变状态,既然用的多,那么就应该思考:为什么要使用setState? setState是’异步’的吗? 本篇文章就围绕着这两个问题展开为什么要使用setState?先来看一个简单的setState例子:这是一个比较基础的例子,点击按钮改变state中m原创 2022-03-17 00:13:46 · 1155 阅读 · 2 评论 -
react组件优化,如何避免没有必要的render导致性能浪费
前言在开发过程中,肯定会出现层层嵌套的关系组件,当我们使用Component时,父组件中的state或者props发生更新时,无论子组件中的state和props是否更新,都会触发子组件的更新,会导致很多没有必要的render,浪费很多性能。今天这这篇文章就教大家如何来解决这个问题问题重现先来看如下代码案例:应该比较好理解,页面中引入了三个组件,然后点击按钮会触发state的改变import React, { Component } from 'react'export class Root原创 2022-03-16 19:54:56 · 1876 阅读 · 0 评论 -
react中组件通信之evenbus使用详解(兄弟组件传值案例)
文章目录前言兄弟组件传值evenbus用法总结前言今天给大家介绍react中的另一种传值方式——使用evenbus进行传值,还是一样的以小案例来讲解它的具体用法兄弟组件传值兄弟组件中,使用eventbus事件总线进行通信,采用发布-订阅event bus进行。使用evenbus我们先要下载它下载events:yarn add -D events然后新建一个event.js文件,如下:import { EventEmitter } from "events"// 导入事件总线,利用这个对原创 2022-03-15 19:39:28 · 2636 阅读 · 0 评论 -
react使用Context方法实现组件通信(案例说明嵌套传值+详细用法总结)
文章目录前言Context祖孙传值嵌套传值==Context使用步骤总结==前言之前的文章我们介绍了在react中使用props实现组件通信,比如父子,祖孙通信,但是使用props一层层传递的时候还是很麻烦的,那么今天这篇文章就来介绍新的用法——使用Context实现组建通信Context在react官方文档中是这样解释的:Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。此处附上传送门Context-reactContext 设计目的是为了共享那些对原创 2022-03-14 22:20:05 · 1831 阅读 · 0 评论 -
带你摸透react的生命周期(react生命周期详解,从创建到销毁的全过程)
文章目录前言react生命周期的四个阶段案例说明总结初始化更新销毁前言生命周期其实就是从创建到销毁的整个过程,我们发现很多框架都涉及到生命周期,为什么这些框架需要设计生命周期呢,是因为我们需要了解我们代码的执行过程。以及它们的执行顺序是怎样的,同时在不同的生命周期阶段会暴露不同的构造函数,而在不同的构造函数中我们可以做很多不同的功能。在React中一个由extends Component创建的类组件才会拥有生命周期react生命周期的四个阶段组件初始化阶段:getInitialState:初始化原创 2022-03-14 17:35:00 · 3344 阅读 · 0 评论 -
React中祖孙组件嵌套传值(案例分析说明)
前言上篇推文讲了react中父子组件的传值方法,今天来讲讲祖孙组件如何进行传值操作,下面写个小案例来讲解中间的过程祖孙组件传值我们写一个最外层组件传值给孙组件的案例最外层组件最外层组件(祖组件)index.js:1.在state中定义一个list数组,我们这里要做一个下拉框需要数据2.在render中对state进行解构,先利用list.map循环出Parent父组件,并给父组件绑定key,value和color3.再写一个select下拉框,需求是可以通过外层组件下拉框的选值改变孙组件的值原创 2022-03-13 23:44:34 · 2046 阅读 · 0 评论 -
react中父子组件传值详解,如何进行传值校验(父传子,子组件改变父组件的值)
文章目录父子组件的传值父子组件重名问题解决子组件改变父组件的值传值校验父子组件的传值在react中,父传子可以使用props的方法,子传父使用props的回调函数父组件:在父组件中定义state,将这个state对象传给子组件,所以可以直接在son组件上写{…this.state}import React, { Component } from 'react'import Son from './son'export class Parent extends Component {原创 2022-03-12 23:16:56 · 2275 阅读 · 0 评论 -
使用react脚手架快速搭建项目以及项目文件的介绍(目录文件的功能及作用)
前言本篇文章教大家使用脚手架搭建react的项目,对于新建的react项目,项目目录里的文件都是干什么的,有什么作用呢?下面一起来看看~react脚手架使用yarn在本地安装create-react-app:npm i -g yarn #全局安装yarnyarn -v #查看yarn版本号如何使用npx在本地安装相关包yarn init -y #初始化项目yarn add -D create-react-app #使用本地安装npx create-react-app --vers原创 2022-03-12 13:25:43 · 2042 阅读 · 1 评论 -
react入门—实现复杂表单方法的封装以及表单验证功能的实现(表单验证方法的封装优化)
文章目录前言复杂表单页面的实现表单验证方法前言在前端开发中,表单验证是很常见的功能,这边文章就来讲一下react入门实现复杂表单的功能,以及表单验证功能的实现复杂表单页面的实现实现一个表单页面,包含输入框,单选框和下拉框,点击提交能够拿取输入的数据1.首先定义我们的非受限组件Hello,并在state中定义我们需要用到的变量:class Hello extends React.Component { state = { name: '',原创 2022-03-11 21:26:25 · 1462 阅读 · 0 评论 -
React入门第四弹——数据绑定及表单处理
文章目录前言表单元素受限组件和不受限组件常用表单数据绑定注册功能实现前言上篇文章讲了react中有状态组件以及事件处理,今天给大家上个小项目——表单提交,里面会涉及到很多新的知识点,下面我们一起来学习~表单元素像<input>、<textarea>、<option>这样的表单元素不同于其他元素,因为他们可以通过用户交互发生变化。这些元素提供的界面使响应用户交互的表单数据处理更加容易。交互属性,用户对以下元素做出交互时通过onChange回调函数来监听组件变化。原创 2022-03-09 22:59:50 · 974 阅读 · 0 评论 -
React入门第三弹——有状态组件以及事件处理的相关(案例说明,一看就会)
文章目录前言组件的分类无状态组件和有状态组件的使用规则无状态组件和有状态组件传值的取用有状态组件有状态组件props传值有状态组件state事件处理事件处理函数的相关语法事件处理函数中的this事件处理&条件处理受限组件最后前言上篇文章主要讲了JSX语法入门和无状态组件的传值,内容还是比较简单的,今天给大家带来React入门第三弹——有状态组件和事件处理。组件的分类在React中,组件分为函数组件和class组件,也就是无状态组件和有状态组件。函数式组件(无状态组件)直接定义函数的形式原创 2022-03-08 23:35:11 · 296 阅读 · 0 评论 -
React入门第二弹(Vue重度爱好者勿入ψ(*`ー´)ψ)——JSX语法入门和无状态组件的传值
前言上篇给大家简单介绍了React,本篇文章开始就带大家由浅入深学习React,开始体验React与众不同的语法。如果之前学习过Vue的同学,建议暂时忘掉Vue语法,不然对于Vue重度爱好者来说,写React真的会很不习惯,难以理解它的语法操作,不过熟悉之后,你也会发现React的魅力React初体验先在页面引入react相关的库<!-- react底层核心库 --><script src="https://unpkg.com/react@17/umd/react.devel原创 2022-03-03 23:17:15 · 509 阅读 · 0 评论 -
React入门第一弹——为什么国内大厂更钟爱react框架?
为何国内大厂更多使用React?React是Facebook用来创建用户界面的JS库,在2013年开源的。React不是一个MVC框架,而是一个用于构建组件化UI的库,是一个前端界面开发工具,所以很多人认为React是MVC中的V(视图)。React的存在能够很好的解决"构建随着时间数据不断变化的大规模应用程序",React能够引导我们重新思考如何构建应用程序。React的核心就是封装可复用性高的组件,各个组件维护自己的状态和UI,当状态变更,自动重新渲染整个组件。前端原创 2022-03-02 22:30:58 · 1051 阅读 · 0 评论