E-COM-NET
首页
在线工具
Layui镜像站
SUI文档
联系我们
推荐频道
Java
PHP
C++
C
C#
Python
Ruby
go语言
Scala
Servlet
Vue
MySQL
NoSQL
Redis
CSS
Oracle
SQL Server
DB2
HBase
Http
HTML5
Spring
Ajax
Jquery
JavaScript
Json
XML
NodeJs
mybatis
Hibernate
算法
设计模式
shell
数据结构
大数据
JS
消息中间件
正则表达式
Tomcat
SQL
Nginx
Shiro
Maven
Linux
React学习
【
React学习
】React路由 v6
1.React路由分类React有三种路由react-router-dom:用于浏览器的路由BrowerRouter基于浏览器的historyHashRouter基于地址部分的hash值(路由带“#”)react-router-native:用于原生app的路由react-router:原生与浏览器通用部分2.路由安装在项目终端里输入npminstallreact-router-dom可以在pac
周兴
·
2023-12-25 15:32
前端学习
#
React学习
前端
react.js
20
React学习
笔记.axios网络请求
使用axios发送网络请求一.发送网络请求方式传统的Ajax基于XMLHttpRequest(XHR)jQuery-Ajax,jQuery项目太大,个性化打包又不能享受CDN。FetchAPI基于原生XHR,是AJAX的替代方案,基于Promise设计,很好的进行了关注分离。Fetch是底层API,需要手动配置功能和实现。发送网络请求:手动配置Header的Content-Type,不会默认携带c
_生生不息_
·
2023-12-25 03:49
React学习
计划-React16--React基础(五)脚手架创建项目、todoList案例、配置代理、消息订阅与发布
一、使用脚手架create-react-app创建项目react脚手架xxx脚手架:用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置(语法检查、jsx编译、devServe…)下载好了所有相关的依赖可以直接运行一个简单的效果react提供了一个用于创建react项目的脚手架库:create-react-app项目的整体技术架构为:react+webpack+es6+eslint
化作繁星
·
2023-12-24 08:41
#
react16学习路程
react
react.js
学习
前端
React学习
计划-React16--React基础(四)生命周期和diffing算法,key的作用
1.生命周期1.声命周期的三个阶段(旧)初始化阶段:由ReactDOM.render()触发—初次渲染1.constructor()2.componentWillMount()3.render()4.componentDidMount()==>常用一般在这个钩子中做一些初始化的事情,例如:开启定时器,订阅消息,发起网络请求更新阶段:由组件内部this.setState()或父组件重新render触
化作繁星
·
2023-12-23 06:02
react
#
react16学习路程
react.js
学习
前端
react学习
笔记——4. 虚拟dom中处理动态数据
如下需求方式1:直接在ul中使用{data},是可以遍历数据的,然后如果将data改成下面形式,也是可以实现的。但是如果data是一个对象,则不能便利。constdata=[Angular,React,Vue]方式2:使用data.map处理,并返回数据,这里需要注意返回的标签中需要有key,否则会有警告,这里暂且将key设置为遍历的idx,但是其实是有问题的,以后会修改。jsx小练习//模拟数据
玄昌盛不会编程
·
2023-12-23 05:28
react
react.js
react学习
笔记——3. jsx语法规则
jsx是什么?jsx全称:javaScriptXML是react定义的一种类似于XML的js扩展语法,是js+xml。xml早期用于存储和传输数据,是标签加数据的形式。只不过后来慢慢的变成了json其本质就是React.createElement(标签,属性,内容)方法的语法糖其作用是为了简化虚拟domjsx语法规则定义虚拟dom时,不写引号。虚拟dom标签中混入js表达式时,需要使用大括号。这里
玄昌盛不会编程
·
2023-12-23 05:58
react
react.js
react学习
笔记——2. 虚拟dom
为什么使用jsx虚拟dom的创建方式有两种,这里新加一个需求,要求虚拟dom包含id属性。通过jsx,也就是之前的方式,只不过初始化虚拟dom的时候需要加一个id属性。通过js,这种方式不需要babel,初始化时的代码如下,使用React的createElement方法2_使用js创建虚拟dom/***步骤:*1、创建虚拟dom*2、渲染虚拟dom到页面*///1、创建虚拟dom,使用React的
玄昌盛不会编程
·
2023-12-23 05:57
react
react.js
React学习
计划-React16--React基础(三)收集表单数据、高阶函数柯里化、类的复习
1.收集表单数据包含表单的组件分类受控组件——页面中所有输入类的DOM,随着输入,把值存维护在状态里,需要用的时候去状态里取值(推荐,避免了过渡使用ref)非受控组件——页面中所有输入类的DOM,现用现取受控组件示例:非受控组件示例:2.高阶函数高阶函数:如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数若A函数,调用的返回值依
化作繁星
·
2023-12-22 09:56
react
#
react16学习路程
react.js
学习
前端
react学习
(笔记)
react特性声明式:jsx与html标签相似,是mvc层的v层基于组件:应用广泛:web,vr,安卓,苹果react使用两个库react:基础核心,创建元素,组件功能react-dom:提供Dom库(适用于web开发)react脚手架作用:配置环境(打包环境,编译测试等)导入一些必要的库如:react/react-dom命令:npxcreat-react-app项目名npx的好处是可以避免全局安
养羊得亿
·
2023-12-21 23:21
react.js
javascript
前端
React学习
计划-React16--React基础(一)虚拟DOM与JSX
1.初识虚拟DOM描述什么是虚拟DOM呢?本质是Object类型的对象(一般对象)我们为什么要了解虚拟DOM呢?很简单,因为React要用我们第三点会使用React分别使用js和jsx创建虚拟DOM,在此呢,我们先要了解两大js库:react.js:react的核心库react-dom.js:用于支持react操作DOM注意:加development表示开发模式的库开始进入对比分析我们先使用用js
化作繁星
·
2023-12-21 06:44
react
#
react16学习路程
react.js
学习
前端
javascript
React学习
计划-React16--React基础(二)组件与组件的3大核心属性state、props、ref和事件处理
1.组件函数式组件(适用于【简单组件】的定义)示例:执行了ReactDOM.render(,...)之后执行了什么?React解析组件标签,找到了MyComponent组件发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,随后呈现在页面中类组件(适用于【复杂组件】的定义)示例:执行了ReactDOM.render(,…)之后执行了什么?React解析组件标签,找到了MyC
化作繁星
·
2023-12-21 06:34
react
#
react16学习路程
react.js
学习
前端
javascript
09.
React学习
笔记.生命周期函数
一.React组件分类##定义方式:函数组件(function),类组件(class)。是否需要维护状态:无状态/有状态组件。职责:展示型/容器型(逻辑结构)组件。这些概念重叠很多,最主要是关注数据逻辑和UI展示的分离:函数,无状态,展示型组件主要关注UI的展示。类,有状态,容器型组件主要关注数据逻辑。其他还有异步,高阶组件等。二.类组件##组件名称必须大写字符开头(类&函数),JSX中将大写解析
_生生不息_
·
2023-12-20 10:12
55.
React学习
笔记.hook 原理浅析
在讲hook原理之前,我们需要先简单了解一下Fiber。一.FiberReact16推出的,用于提高当前浏览器显示界面性能的东西,减少卡顿等待。我们电脑屏幕都有一个刷新率(Hz),电脑屏幕上的东西,CPU提供数据,GPU将其绘制出来;电脑屏幕按固定的频率,从缓存中取出(帧)并显示;缓存防止屏幕出现撕裂;浏览器刷新频率一般与电脑一致,浏览器根据电脑传来的vsync(同步信号)来刷新。GUI渲染和JS
_生生不息_
·
2023-12-20 08:11
14.
React学习
笔记.setState异步/同步分析
一.为什么使用setState##直接更改this.state.counter不会引起界面刷新,这是因为React不知道state发生了改变。React必须通过setState告诉React数据发生了改变。App继承了Component中的setState方法。回溯源码Component类中,原型上设置了setState方法。二.setState异步更新##changeText(){//2.set
_生生不息_
·
2023-12-18 11:40
React学习
网址,扩展安装,工程化创建
React学习
网址,扩展安装,工程化创建一、
React学习
网址官网:https://react.dev/中文网:https://zh-hans.react.dev/上面个的网站只有函数组件没有类组件,有类组件的官网在下面类组件官网
梦醒了_该正视自己了
·
2023-12-14 14:02
React学习
react.js
学习
前端
前端框架
javascript
react 学习笔记 李立超老师 | (学习中~)
文章目录
react学习
笔记01入门概述React基础案例HelloWorld三个API介绍JSXJSX解构数组创建react项目(手动)创建React项目(自动)|create-react-app事件处理
nuise_
·
2023-12-07 00:03
Vue/React
react.js
学习
笔记
react学习
笔记(一)- 安装及初始化
react安装首先,react可以直接使用cnd方式引入,也可以基于webpack或browserify的方式使用,以下示例为webpack下载node、npm这个就不多讲了,百度安装node全局安装react如果之前安装过则跳过,如果安装时间距离现在较长,建议卸载create-react-app之后重新安装,否则可能出现生成的文件夹内只有node_modules文件夹和package.json文
池塘里快乐的小跳蛙
·
2023-12-05 17:43
react学习
--react-redux的使用
Redux的核心思想是通过一个单一的状态树来管理应用的状态,状态的修改通过纯函数(reducers)来进行,从而使状态变化可追踪和可预测。1、安装Redux:在项目中安装Redux库和React-Redux(用于React绑定的库)。npminstallreduxreact-redux2、创建Reduxstore:在应用的入口文件中创建Reduxstore。这个store将包含整个应用的状态。//
努力学习的廖同学
·
2023-12-05 17:17
react.js
学习
javascript
54.
React学习
笔记.自定义hook练习-localStorage存储
需求:希望在组件中对一个变量name操作,一旦给name设置一个新的值,就把name存储到localStorage(不同于sessionStorage)中;如果下次再打开网页,重新加载的时候,希望可以从localStorage中把name的值加载进去。也就是对name的所有操作,都通过localStorage做一个存储。importReact,{useState,useEffect}from're
_生生不息_
·
2023-12-04 10:21
【超全】
React学习
笔记 下:路由与Redux状态管理
React学习
笔记React系列笔记学习上篇笔记地址:【超全】
React学习
笔记上:基础使用与脚手架中篇笔记地址:【超全】
React学习
笔记中:进阶语法与原理机制React路由概念与理解使用1.引入React
Xy丶Promise
·
2023-12-03 09:44
react.js
学习
javascript
前端
前端框架
web3
web
【超全】
React学习
笔记 上:基础使用与脚手架
React学习
笔记React系列笔记学习中篇笔记地址:【超全】
React学习
笔记中:进阶语法与原理机制下篇笔记地址:【超全】
React学习
笔记下:路由与Redux状态管理React简介React是一个由
Xy丶Promise
·
2023-12-03 09:14
react.js
学习
web3
javascript
web
前端
前端框架
【超全】
React学习
笔记 中:进阶语法与原理机制
React学习
笔记React系列笔记学习上篇笔记地址:【超全】
React学习
笔记上:基础使用与脚手架下篇笔记地址:【超全】
React学习
笔记下:路由与Redux状态管理React进阶组件概念与使用1.React
Xy丶Promise
·
2023-12-03 09:07
react.js
学习
web3
web
javascript
前端
前端框架
React学习
笔记
一、几个概念库和框架库(library):小而巧,可以很方便的从一个库切换到另一个库,但是代码几乎不会改变。框架(framework):大而全,框架提供了一整套完整的解决方案,在项目中间想要切换框架是困难的模块化和组件化模块化:是从代码的角度进行分析,把可复用的代码抽离为单个模块,便于项目的维护和开发组件化:从UI界面的角度进行分析,把可复用的UI元素,抽离为单独的组件二、React的基础概念1、
骆骆呀
·
2023-11-30 04:06
05-2.
React学习
笔记.JSX本质
Babel转化可以从babel官网中react转码器来查看jsx代码对应转换为的React.createElement(,,)的相应内容。image.pngimage.png可以直观看出,转换后的内容实际上是React.createElement(,,)方法间的不断嵌套(针对子元素)。/#PURE#/代表其为纯函数
_生生不息_
·
2023-11-29 00:31
React学习
笔记——路由的基本使用
路由理解当使用hash或history的方式去改变网址路径(path)时,并不会刷新网页或发出请求通过监听hash或history的变化来动态的切换组件的显示据此,可以维护path(路径)跟component(组件)的一对一的路由而管理这些route(路由)的就是router(路由器)路由步骤路由的实现,是基于BOM的history,从而实现网页不刷新,局部更新页面。点击导航链接,引起路径变化路径
Kevin11Yao
·
2023-11-28 11:26
React
路由器
react
html
web
React学习
笔记05_路由
第5章:React路由5.1.相关理解5.1.1.SPA的理解单页Web应用(singlepagewebapplication,SPA)。整个应用只有一个完整的页面。点击页面中的链接不会刷新页面,只会做页面的局部更新。数据都需要通过ajax请求获取,并在前端异步展现。5.1.2.路由的理解什么是路由?一个路由就是一个映射关系(key:value)key为路径,value可能是function或co
淮里没有猫
·
2023-11-28 11:21
前端
React
react.js
javascript
前端
React学习
之围棋记谱本制作(四)前端开发初步完成
今天初始完成了页面端的开发工作。把遇到的问题说一说。(1)开始时,对javascript的对象或数组拷贝、赋值理解不是很透,折磨了我好长时间。理解了对象或数组的赋值,实际上相当于C语言中的指针地址赋值,就知道了保存每一步的棋盘状态,要把对象拷贝一个副本,避免后继的变化,影响保存的状态。(2)JQuery提供了对象拷贝的方法,extend。这个方法有深拷贝、浅拷贝之分,如果浅拷贝,不复制对象中的对象
wallimn
·
2023-11-28 03:16
JAVA
WEB开发
node.js
react
javascript
围棋
ViewUI
46.
React学习
笔记.hooks useReducer - useState替代方案
useReducer是useState的一种替代方案:某些场景下,如果state的处理逻辑比较复杂,我们可以通过useReducer来对其进行拆分;或者,这次修改的state需要依赖之前的state时,也可以使用;一.useReducer的使用image.png参数一reducer纯函数参数二initializerArg初始化值:对基本类型可以直接写;若是对象类型,先解构。importReact,
_生生不息_
·
2023-11-27 07:57
47.
React学习
笔记.hooks useCallback
userCallback实际目的是为了进行性能的优化。如何进行性能优化?useCallback会返回一个函数的memoized(记忆的,拼写无误)值;在依赖不变的情况下,多次定义的时候,返回的值是相同的。参数回调函数;依赖项:无依赖时,执行原来的函数;依赖项改变时,函数进行一个更新。返回值返回一个函数的memoized值。一.什么情况不能进行性能优化?每次渲染时,我们组件中的局部变量都要重新定义一
_生生不息_
·
2023-11-26 10:28
React 学习笔记 - create-react-app踩坑 & eslint
React学习
笔记-create-react-app踩坑&eslint问题解决方案eslintrc配置文件解析parserOptions解析器配置env代码运行环境extendsrulespluginsParser
绿胡子大叔
·
2023-11-24 09:10
React
学习笔记
react.js
javascript
前端
初级前端-
react学习
(1)
day01-day02一、yarn的使用:1.安装yarn注意:为了省事,不要用npmiyarn-g,去安装yarn,而是去下载压缩包,保证注册表和环境变量的硬写入,后期通过yarn安装全局包时方便2.初始化一个新项目yarninit3.添加依赖包``yarnadd[package]``yarnadd[package]@[version]``yarnadd[package]@[tag]4.将依赖项
小耳朵xxl
·
2023-11-22 21:02
react
前端
react.js
学习
React知识点汇总
本文章用于记录
React学习
过程中遇到的知识点React17生命周期来源于官网:生命周期初始化挂载阶段-由ReactDome.render()触发constructor()staticgetDerivedStateFromProps
情系半生e
·
2023-11-21 08:49
React
reactjs
javascript
50.
React学习
笔记.hooks useImperativeHandle
useImperativeHandle不容易理解,笔者循序渐进讲一讲自己的理解。回顾一下ref和forwardRef结合使用:通过forwardRef可以将ref转发到子组件;子组件拿到父组件中创建的ref,绑定到自己的某一个元素中。importReact,{useRef,forwardRef}from'react'constHYInput=forwardRef((props,ref)=>{ret
_生生不息_
·
2023-11-21 06:22
React学习
antd2升级到antd5; Class 中使用 React Hooks,并且能够互相传值
antdmobile2升级到antdmobile5官网上有两种升级方法,使用antd-mobile-v2安装和通过别名安装v5。第一种方法要把项目中所有对antd-mobile的引入都替换为antd-mobile-v2,成本比较大,而且也没有足够时间去测试替换后的项目。因此这里采用第二种安装方式,别名安装。antd官网的升级指南一.antd2升级到antd5$npminstall--saveant
略略略_略
·
2023-11-20 06:10
react.js
javascript
前端
React学习
资料整理
1.react的简单使用React的简单使用//创建组件classPersonextendsReact.Component{render(){return(Hello{this.props.name})}}//渲染组件ReactDOM.render(,document.getElmentById('root'))2.创建虚拟DOM的到页面的两种方式方式1(推荐)//JSX的语法格式//1.创建虚拟
一只小泰迪
·
2023-11-19 16:27
react
react.js
javascript
node.js
React学习
总结
文章目录前言--->
React学习
总结一、JSX二、react状态1.类组件中状态使用2.事件绑定改变this的指向3.状态在函数组件中的使用三、react类组件声明周期(钩子函数)生命周期函数很多,需要掌握
努力学习的有方
·
2023-11-19 16:54
react.js
学习
javascript
React学习
(React高级)
学习目标:提示:这里可以添加学习目标例如:一周掌握Java入门知识学习内容:提示:React实战二、React高级入门1、脚手架(1)什么是脚手架脚手架本质上就是一个工具插件,可以通过执行指定命令的形式完成项目文件的远程同步!备注:为什么要使用脚手架手工构建项目的方式效率太低,通过脚手架将项目按照固定的格式进行快速构建,提高开发效率!(2)React脚手架React提供了create-react-
城南的夏
·
2023-11-19 09:45
React专栏
react.js
学习
javascript
React + hooks + Ts 实现将后端响应的文件流(如Pdf)输出到浏览器下载
React篇一些关于
react学习
与总结这篇是记录开发中关于实现将后端响应的文件流(如Pdf)输出到浏览器下载,基于React+Hooks+Ts。
画月的亮
·
2023-11-16 21:17
React
前端
react.js
pdf
前端
React学习
(五)— Hooks
目录一、前言二、ReactHooks2.1useState2.2useEffect2.2.1组合componentDidMountcomponentDidUpdate2.2.2componentDidMount2.2.3组合componentDidMountcomponentWillUnmount2.3useMemo2.4useCallback2.5useContext2.6useRef三、总结一
小绵杨Yancy
·
2023-11-15 13:43
React
react.js
学习
javascript
hooks
React学习
笔记---入门篇
React学习
笔记(一)一、介绍1、React是什么?
丑小鸭变黑天鹅
·
2023-11-14 12:48
React专栏
react.js
javascript
前端
React学习
——封装组件
前端实习经验分享一:从学习React技术开始(以官方文档为基础,跟随师父了解公司项目业务逻辑),为公司封装组件进一步了解React最大特点——模块化。也感受到封装组件的重要性。下面我会通过一个案例总结封装组件的场景、过程、技巧。封装组件(一)优点使结构清晰;组件复用;拓展组件;(二)场景当多个复杂组件具有层层嵌套关联时,为了增加代码可视性考虑封装组件。比如:这样一个经典的列表页,由查询表单Form
七月的冰红茶
·
2023-11-12 12:39
typescript
react
前端
React学习
:05 React组件之间如何传递数据
React组件之间如何传递数据使用react组件的时候我们经常会把一些常用的组件组合到一起,定义成一个新的组件,一般前端页面会有一个父组件,这个组件中定义了当前页面中所需的变量,如何把这些变量传递给子组件呢?react的设计哲学表明:React中的数据流是单向的,并顺着组件层级从上往下传递。也就是说当你设计好页面的功能和组件的布局是,就要考虑好state应该安放在哪里,一般这个state都会放到顶
这里不提提纳里
·
2023-11-12 07:30
react.js
学习
javascript
React 学习笔记 - 利用高阶组件和React Hooks实现权限拦截
React学习
笔记-利用高阶组件和ReactHooks实现权限拦截思路实现注入权限列表抽离Context向页面注入权限列表的HOC向根组件注入权限含有权限拦截功能的HOC无权限时显示的组件权限拦截HOC
绿胡子大叔
·
2023-11-11 08:52
React
学习笔记
react.js
学习
javascript
React学习
笔记——lazyLoad
当未使用懒加载时,页面一打开,就将所有的路由组件给加载到页面了如果路由组件很多,且用户不会真正访问到那么多的路由组件,那么就相当于加载了不需要的多余组件因此,可以使用路由懒加载,当用户真正需要访问的时候再去请求如下import{lazy,Suspense}from'react'import{Route}from'react-router-dom'constHome=lazy(()=>import(
Kevin11Yao
·
2023-11-10 12:57
React
react
react学习
笔记-06 -- Redux & react-redux & redux-thunk
ReduxRedux中文文档安装npminstall--saveredux原理图storestore(仓库)存放整个应用的state。createStore创建仓库import{createStore}from'redux';importreducerfrom'./store/reducer';letstore=createStore(reducer)//createStore还有第二个参数,表示
weixin_47360323
·
2023-11-10 11:03
前端
react
react.js
学习
javascript
React学习
笔记——react-redux的使用
前言react-redux不同于redux,前者的诞生是由于react出品方认为使用rudux的react使用者太多了,进而Facebook公司自己出了react-redux来更好的优化react的使用。使用react-redux安装react-reduxyarnaddreact-redux在react-redux中,将组件分为两类:UI组件、容器组件1.UI组件1)只负责UI的呈现,不带有任何业
Kevin11Yao
·
2023-11-10 11:02
React
react
react-redux
React学习
笔记之redux与react-redux
React学习
笔记之redux与react-redux前言安装redux使用原理定义静态变量constant.js实现ActionCreators(count_action.js)实现Store(store.js
小白wwj
·
2023-11-10 11:01
react
redux
react
redux
react-redux
【React】
React学习
笔记4(Redux、React-Redux)
React学习
笔记4(Redux、React-Redux)零l说明一lRedux基础(一)Redux工作流程(二)Redux核心API1、store对象2、createStore(reducer)3、applyMiddleware
Artlex
·
2023-11-10 11:30
前端
react
redux
react-redux
react学习
笔记---redux
redux01-redux精简版---redux原理图如下:02-redux完整版03-redux异步action版04-react-redux基本使用05-react-redux的优化06-react-redux数据共享版07-react-redux开发者工具的使用08-react-redux最终版01-redux精简版—redux原理图如下:redux精简版总结(1)去除Count组件自身的状
苏米素
·
2023-11-10 11:59
前端学习笔记
React学习
笔记---redux
redux一、redux理解1、学习文档2、redux是什么3、什么情况下需要使用redux4、redux工作流程二、redux的三个核心概念1、action2、reducer3、store三、引出Redux编程的案例1、使用纯react去编写2、精简版Redux3、完整版Redux4、异步Action版四、redux的核心API总结五、react-redux的基本使用(官方出的插件库,和Redu
丑小鸭变黑天鹅
·
2023-11-10 11:56
React专栏
react.js
javascript
前端
上一页
1
2
3
4
5
6
7
8
下一页
按字母分类:
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
其他