![](https://i-blog.csdnimg.cn/direct/cc0cebdcc9a44a7eaef219cb7619303e.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
react开发
文章平均质量分 93
带你深入了解React框架,保姆级学习
亦世凡华、
个人:csdn内容合伙人、阿里云专家博主、51CTO博主;目标:深耕技术,追求代码之美,享受编程人生;当下:珍惜时间,奋发学习;未来:渴望成为一名真正的全栈大佬,并为此一直努力,矢志不渝!
展开
-
React--》掌握styled-components重塑React样式管理
想象一下,如果你的React组件不仅能自描述其逻辑,还能直接声明自己的样式,这种“所见即所得”的编程体验是不是让人心动不已?styled-components正是这样一把钥匙,它彻底颠覆了我们对React样式管理的传统认知,让样式与组件的结合变得如此自然与和谐。原创 2024-08-04 22:01:55 · 1250 阅读 · 7 评论 -
React--》打造可通用的数据可视化Echarts组件
在本篇文章中,波追将探讨如何利用 React 框架和 Echarts 库来打造通用的数据可视化组件,无论是展示复杂的数据趋势,还是创建交互式的图表,React 和 Echarts 的结合将为您的应用带来无限的可能性。原创 2024-07-25 18:06:29 · 410 阅读 · 1 评论 -
Dhtmlx Gantt教程:创建交互式甘特图的完整指南
主要是用来创建和管理甘特图的工具库,甘特图是一种项目管理图表,通过条形图展示任务的开始时间、持续时间和完成进度,同时显示任务之间的依赖关系。Dhtmlx Gantt提供了丰富的功能和可定制选项,开发者可以轻松构建出功能强大、直观清晰的甘特图,用于项目计划和进度管理,从而使得用户可以灵活地配置和显示项目的时间轴、任务列表、资源分配情况等信息。原创 2024-07-25 14:22:44 · 2263 阅读 · 10 评论 -
探索 Framer Motion 高级动画技巧:提升前端设计水平
在现代的网页和应用设计中,动画不仅仅是视觉的点缀,更是用户体验的重要组成部分。它能够使界面更具吸引力,提升交互的流畅性,甚至在不经意间传达品牌的个性和态度。然而,要创造出令人惊叹的动效并不容易——直到有了 Framer Motion。本文将带你深入探索 Framer Motion 的奥秘,掌握其核心概念和实用技巧,助你在界面设计的旅程中走得更远。原创 2024-07-22 11:49:42 · 953 阅读 · 7 评论 -
React--》学习Lodash:让你的JS代码更加优雅和易于阅读
此时隔壁正在项目实战,为了不打断他的文章连续性,我们把lodash的讲解文章搬到react专栏来进行学习,当然是否用框架或用什么框架都不会影响我们学习的恒心!————原创 2023-06-18 21:51:17 · 1491 阅读 · 24 评论 -
React--》一些不常见的hook函数讲解
useLayoutEffect的方法签名和useEffect一样,功能也类似,不同的是其执行时机比useEffect要早,其会在DOM改变后调用,useLayoutEffect使用场景不多,在实际开发中在其要修改元素样式且使用useEffect会出现闪烁现象时可以使用该钩子函数进行替换,当然这种情况在react18版本之前的差异性比较明显,而到了react18之后两者的差异几乎是没有了,这里简单提及一下。1)钩子函数只能在react组件和自定义钩子中使用。,现在开始着重讲解这个钩子函数的使用。原创 2023-04-29 20:11:29 · 967 阅读 · 17 评论 -
React--》Redux Toolkit的使用讲解
RTK不仅帮助我们解决了state问题,同时它还为我们提供了RTK Query用来帮助我们处理数据加载问题,RTK Query是一个强大的数据获取和缓存工具,在它的帮助下,Web应用中的加载变得十分简单,它使我们不再需要自己编写虎丘数据和缓存数据的逻辑。这些问题RTKQ都可以帮助我们处理,首先可以直接通过RTKQ向服务器发送请求加载数据,并且RTKQ会自动对数据进行缓存,避免重复发送不必要的请求,其次RTKQ在发送请求时会根据请求不同的状态返回不同的值,我们可以通过这些值来监视请求发送的过程并随时中止。原创 2023-04-29 10:40:38 · 2321 阅读 · 18 评论 -
React--》React组件变化每次都会导致重新渲染,如何解决?
可以看到初次渲染时,所有的组件都会被执行一次, 当点击按钮时,父组件传递给子组件A的props值发生变化导致A组件又被重新渲染一次,接下来仅仅是父组件发生变化,当父组件的值为4的时候会再次导致子组件A的props值发生变化导致子组件A再次被重新渲染,因为孙组件B没有被传入props,导致其只有在初次渲染的时候被被渲染,后面即使父组件发生变化,其也不会重新渲染,具体的过程如上图所示。React.memo()是一个高阶组件,它接收另一个组件作为参数,并且会返回一个包装过的新组件,包装过的新组件就会。原创 2023-04-20 14:47:09 · 6203 阅读 · 25 评论 -
React--》useReducer的讲解与使用
官方文通过将reducer函数抽离出来去管理状态的变化,根据传入action的不同返回新的状态,我们在点击按钮时会调用dispatch函数,并传入一个包含type属性的对象即action,这个对象表示将要进行的状态更新操作。为了解决复杂state带来的不便,React为我们提供了一个新的使用state方式,当你的state过于复杂时,你就可以使用对state整合的工具 “Reducer” ,:用于计算初始状态的值,即为state的初始值,作用和useState()中的值是一样的,它可以是任何类型的值。原创 2023-04-19 18:37:56 · 1562 阅读 · 23 评论 -
React--》从零开始搭建一个文章后台管理系统
本项目讲解的是一个简单的文章后台管理系统,系统的功能很简单,看完本篇文章你将了解学习到的知识有很多,而且博主也将源码开源出来,希望可以帮助大家。原创 2023-03-27 02:09:22 · 5353 阅读 · 30 评论 -
React--》状态管理工具—Mobx的讲解与使用
Mobx是一个可以和React良好配合的集中状态管理工具,mobx和react的关系相当于vuex和vue之间的关系,同类工具还有:redux、dva、recoil。原创 2023-03-22 20:12:07 · 3913 阅读 · 29 评论 -
React--》如何在函数式组件中操作状态和方法?
Hooks是React16.8.0版本增加的新特性语法,可让我们在函数式组件中使用state以及其他React特性,在路由的v6版本中也明确告诉我们必须使用函数式组件,官方不断推荐函数式语法,可见未来的React趋势就是函数式组件写法。setXxx(value => newvalue):参数为函数,接收原本的状态值,返回新的状态值,内部用其覆盖原来的状态值。setXxx(newvalue):参数为非函数值,直接指定新的状态值,内部用其覆盖原来的状态值。(2). React中的。原创 2023-02-01 14:59:25 · 1127 阅读 · 21 评论 -
React--》ReactRouter6相关路由的使用讲解
拥抱变化~,一起学习React Router6中路由的变化吧。原创 2023-01-31 23:37:53 · 1474 阅读 · 15 评论 -
React--》redux的传统写法与新技术redux toolkit的相柔并济——万言总结文章,你能学会多少。
redux是一个专门用于做状态管理的JS库(不是react插件库)。它可以用在react、angular、vue等项目中,但基本与react配合使用。其作用是:集中式管理react应用中多个组件共享的状态。原创 2023-01-30 19:48:36 · 465 阅读 · 25 评论 -
React--》UI组件库ant-design的介绍与使用
Ant Design是阿里蚂蚁金服团队基于React开发的ui组件,主要用于中后台系统的使用。官方网址。以下可以看到antd的特性与介绍,可以看出antd的生态已经很完善了,可以说大部分的公司的项目都能找到使用antd的影子。在 5.0 版本的 Ant Design 中,提供了一套全新的定制主题方案。不同于 4.x 版本的 less 和 CSS 变量,有了 CSS-in-JS 的加持后,动态主题的能力也得到了加强。原创 2023-01-26 20:57:34 · 2865 阅读 · 16 评论 -
React--》ReactRouter5相关路由的使用讲解
现代的前端应用大多都是SPA(单页应用程序),也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器的压力更小,所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能,前端路由应运而生。原创 2023-01-25 19:34:00 · 983 阅读 · 11 评论 -
React--》React组件的复用以及高阶组件的使用讲解
并不是该模式叫render props就必须使用名为render的prop,实际上可以使用任意名称的prop,把prop是一个函数并且告诉组件要渲染什么内容的技术叫做:render props模式。,就是复用的高级组件逻辑代码的组件名称是相同的,因为默认情况下React使用组件名称作为displayName。,在这个类组件中提供复用的状态逻辑代码,通过prop将复用的状态传递给被包装组件WrappedComponent。,接收要包装的组件,返回增强后的组件。调用该高阶组件,传入要增强的组件,通过。原创 2023-01-24 13:30:13 · 507 阅读 · 10 评论 -
React--》在React中发送Ajax请求
React,并,前端应用需要通过ajax请求与后台进行交互(json数据)。react应用中需要集成第三方ajax库(或自己封装)。常用的Ajax请求库,且建议使用的是axios:其封装了XMLHttpRequest对象的ajax,其具有promise风格,可以用在浏览器端和node服务器端。原创 2023-01-23 22:21:50 · 831 阅读 · 12 评论 -
React--》虚拟DOM与Diff算法
React更新视图的思想是只要state变化就重新渲染视图,而组件只有一个DOM元素需要更新时,也得把整个组件内容重新渲染到页面上吗?我们的理想状态是,只更新变化的地方,而React能做到部分更新吗?答案是可以的,需要。虚拟DOM:本质上就是一个JS对象,用来描述你希望在屏幕上看到的内容(UI,即HTML结构)原创 2023-01-20 15:07:19 · 275 阅读 · 17 评论 -
React--》React组件间数据的通信与共享
是独立且封闭的单元,默认情况下,只能使用组件自己的数据。在组件化过程中,我们将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能。为了实现这些功能,就需要打破组件的独立封闭性,让其与外界沟通。: 对于组件来说,props是外来的,无法保证组件使用者传入什么格式的数据,如果传入的数据格式不对,可能会导致组件内部报错。Context提供了两个组件:Provider组件(用来提供数据),Consumer组件(用来消费数据)。利用回调函数,父组件提供回调,子组件调用,将要传递的数据作为回调函数的参数。原创 2023-01-19 20:41:45 · 2081 阅读 · 8 评论 -
React--》React组件的生命周期钩子函数—应知应会
组件的生命周期:组件从被创建到挂载到页面运行,再到组件不用时的卸载过程。其意义在于有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误的原因等。生命周期的每个阶段总是伴随着一些方法的调用,这些方法就是生命周期的钩子函数,其作用是为开发人员在不同阶段操作组件提供了时机。注意:只有类组件才有生命周期。React的生命周期分为如下三个阶段,我们要清楚的了解到每个阶段的执行时机,每个阶段钩子函数的执行顺序,以及每个阶段钩子函数的作用。React v16 开始,对生命周期函数做了一些更改,且分为两个版本:v1原创 2023-01-18 00:13:28 · 755 阅读 · 17 评论 -
React--》如何在React中创建TypeScript项目并使用?
我们之前在不使用TS时,会使用prop-types库,为React组件提供类型检查,而在使用TS后,其提供的组件类型校验代替了PropTypes,所以说不管是React还是Vue,只要是支持TS的库,都提供了很多类型来满足该库对类型的需求。原创 2023-01-16 15:31:20 · 2028 阅读 · 18 评论 -
React--》超详细教程——React脚手架的搭建与使用
React脚手架是开发现代Web应用的必备,其充分利用Webpack、Babel、ESlint等工具辅助项目的开发,当然这些工具也无需手动配置即可使用,脚手架的意义更多的是关注的是业务而不是工具的配置;项目的整体技术架构为:react + webpack + es6 + eslint。使用脚手架开发项目的特点:模块化、组件化、工程化。原创 2023-01-15 21:32:02 · 13509 阅读 · 13 评论 -
React--》React组件的三大核心属性
state是组件对象最重要的属性,值是对象(可以包含多个 key-value的组合);2)组件自定义的方法中this为undefined,强制绑定this可以通过函数对象的bind()或箭头函数。构造器是否接受props,是否传递给super,取决于:是否希望在构造器中通过this访问props。每个组件对象都会有 props 属性,组件标签的所有属性都保存在 props 中。拿到当前ref所在的节点,react帮助我们调用函数然后传进来,之后挂载到实例自身上。组件内的标签可以定义ref属性来标识自己。原创 2023-01-15 15:30:09 · 783 阅读 · 13 评论 -
React--》初识React框架及其基本使用
撰写本文时,React的版本已经达到18.2,这里提一下,因为React的版本在17更新到18时,有很多的语法在React18中都弃用了,但是有很多老项目还是使用React17的版本,所以我们还是需要学会一下React17的语法。如果从 MVC的角度来看,React仅仅是视图层(V),也就是只负责视图的渲染,而并非提供了完整的M和C的功能。:向外提供特定功能的js程序,一般就是一个js文件,随着业务逻辑增加,代码越来越多且复杂,使用模块能复用js,简化js的编写,提高js运行效率。原创 2023-01-14 15:29:55 · 959 阅读 · 14 评论 -
React技术栈 --》组件生命周期和Vue拓展 ## Day6
带入深入了解React框架,保姆级学习。原创 2022-06-27 13:11:31 · 783 阅读 · 48 评论 -
React技术栈 --》文件模块化和按钮绑定事件 ## Day5
带你深入了解React框架,保姆级学习。原创 2022-06-24 18:06:51 · 631 阅读 · 25 评论 -
React技术栈 --》组件对比和评论列表案例 ## Day4
深入了解React框架,保姆级学习。原创 2022-06-22 14:25:20 · 701 阅读 · 32 评论 -
React技术栈 --》 JSX语法书写JS和React创建组件 ## Day3
带你深入了解React框架搭建,保姆级学习。原创 2022-06-19 20:54:49 · 1135 阅读 · 39 评论 -
React技术栈 --》plugin与JSX语法使用 ## Day2
带你深入了解React框架搭建,保姆级学习。原创 2022-06-17 13:41:25 · 1107 阅读 · 50 评论 -
React技术栈 --》搭建与实操 ## Day1
带你深入了解React框架搭建,保姆级学习。原创 2022-06-11 02:31:12 · 874 阅读 · 18 评论