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学习
知识点收集
箭头函数写法总结没有参数//es5functionsum(){return1+2;}//箭头函数letsum=()=>1+2;有一个参数//es5functionsum(a){returna;}//箭头函数letsum=a=>a;有多个参数//es5functionsum(a,b){returna+b;}//箭头函数letsum=(a,b)=>a+b;//或者letsum=(a,b)=>{retu
还是踢球吧777
·
2021-05-19 07:08
React学习
笔记1---react简介
react简介介绍描述用于动态构建用户界面的javascript库(只关注视图)由facebook开源React特点声明式编码组件化编码ReactNative编写原生应用高效(优秀的Diffing算法)高效的原因使用虚拟DOM,不总是直接操作页面真实DOM优秀的Diffing算法(最小化页面重绘)
permit110
·
2021-05-12 09:35
react学习
笔记(三)
代码分割:大多数React应用都会使用Webpack或Browserify这类的构建工具来打包文件。打包是一个将文件引入并合并到一个单独文件的过程,最终形成一个“bundle”。接着在页面上引入该bundle,整个应用即可一次性加载。Webpack官网(https://webpack.docschina.org/guides/installation/)React.lazy函数能让你像渲染常规组件
刘赛_c5a1
·
2021-05-11 12:41
React学习
--BrowserRouter与HashRouter的区别,withRouter用法
一.编程式路由导航借助this.props.history对象上的API操作路由跳转、前进、后退this.props.history.push()this.props.history.replace()this.props.history.goBack()this.props.history.goForward()this.props.history.go()二.withRouter的使用impo
元气满满鸭
·
2021-05-09 20:22
前端
react
React学习
--嵌套路由与组件的3种传参方式
一.嵌套路由的使用注册子路由时要写上父路由的path值路由的匹配是按照注册路由的顺序进行的,从App.jsx开始二.向路由组件传递参数数据params参数路由链接(携带参数)注册路由(声明接收)接收参数:从this.props.match.params中获取search参数路由链接(携带参数)注册路由(无需声明,正常注册即可)接收参数注意:获取到的search是urlencode编码字符串(?id
元气满满鸭
·
2021-05-09 19:49
前端
react
React学习
--模糊/严格匹配及重定向
一.多级路径刷新页面样式丢失的问题多级路径下刷新页面样式丢失的主要原因在于:index.html文件中使用的样式文件链接为相对路径,而非绝对路径解决方法:public/index.html中,引入样式时不写./写/(常用)public/index.html中,引入样式时不写./写%PUBLIC_URL%(常用),但只限在react中使用使用HashRouter,因为url中#号后面的hash值是不
元气满满鸭
·
2021-05-09 13:57
前端
react
React学习
--react路由基础及使用
一.React路由的理解什么是路由?a.一个路由就是一个映射关系(key:value)b.key为路径,value可能是function或component当点击路由元素时,不是页面发生了变化,而是路径path变化,例如:不是127.1.1.550/home.html而是127.1.1.550/home路由会监听path的变化,找到对应的路由组件,呈现到页面上路由分类a.后端路由:1)理解:val
元气满满鸭
·
2021-05-08 14:45
前端
react
react学习
—旧版Context
旧版Context一、旧版Context1、声明Context2、使用Context一、旧版Context1、声明Context上下文:Context,表示做某一些事情的环境React中的上下文特点:当某个组件创建了上下文后,上下文中的数据,会被所有后代组件共享如果某个组件依赖了上下文,会导致该组件不再纯粹(外部数据仅来源于属性props)一般情况下,用于第三方组件(通用组件)importReac
xun__xing
·
2021-05-06 00:40
react学习
react
react学习
—ref转发
ref转发一、ref转发1、函数组件转发2、类组件转发3、实例一、ref转发前面我们将ref时提到了,ref并不能作用于函数组件,因为react觉得函数组件只返回一个dom并没有多大意义。那么如果我们一定要对函数组件使用ref怎么办呢?1、函数组件转发importReact,{Component}from'react'functionA(props){return({props.words})}e
xun__xing
·
2021-05-05 11:05
react学习
react
ref
React学习
---渲染机制
在介绍React渲染机制之间先来说一说下面几个概念,对于新入手React的学员来说,经常会被搞蒙圈。React与ReactDOM区别在v0.14前,ReactDOM是React的函数,之所以在v0.14之后分成两个包是package是因为Aswelookatpackageslikereact-native,react-art,react-canvas,andreact-three,ithasbec
殊一ONLY
·
2021-05-03 23:46
React学习
笔记-
react学习
计划(一)
2016年12月13日对于react未知的情况下,预想的一个开发和学习计划。1.开发工具:webstorm下载和注册码【开发工具常用快捷键】注册码网址:http://idea.lanyus.com/2.开发步骤:使用webstorm进行NodeJs+webpack项目的开发2.1使用技巧2.2开发步骤2.3开发框架的集成(reactJs,less等)2.4运行调试技巧(错误的处理)2.5编译,测试
liyang_hawk
·
2021-05-03 02:32
React学习
笔记(二)
React:引领未来的用户界面开发框架,翻阅书籍之后,适合初学者学习,做出学习计划和学习笔记。时间1.mixin的应用(es6后不推荐使用,建议使用高阶组件)2.性能优化(shouldComponentUpdate【会影响state里面的值的更新,影响恶劣,不建议使用!!!】,不可变性辅助插件,键key)3.服务端渲染(React.renderToString,React.renderToStat
liyang_hawk
·
2021-05-02 19:56
React学习
笔记2
1.render函数对于props和state必须是纯函数render函数不能改变props和state的属性,如果在render中调用setState则会陷入死循环问题容易出现在事件绑定中onClick={this.handleClick(event)},这个函数就会直接执行,可能会修改state或props,此时应该使用箭头函数onClick={()=>this.handleClick(eve
星月西
·
2021-05-01 11:36
2018-09-18
react学习
(二):props & state
在搭建后的react环境下进入src/index.js文件中写业务:1.引入react&react-dom两个包image.png通过console.log我们发现reactdome自带了一个renderAPI,我们可以通过该api来传递并渲染:语法:ReactDom.render(jsx元素,注入点,回调)eg:image.png效果如下:image.png添加多个元素语法(一定要有根元素包裹,
1994陈
·
2021-04-30 12:43
react学习
—ref
ref一、ref1、ref基础2、ref标记一个组件3、ref使用对象4、ref使用函数1.行间函数2.声明调用一、ref1、ref基础如果我们需要通过一些操作获取某些dom元素怎么办呢?如点击按钮使得输入框对焦,用js的document当然可以,但是react中提供了更好地方法ref。importReact,{Component}from'react'exportdefaultclassComp
xun__xing
·
2021-04-29 00:25
react学习
react
react学习
—高阶组件HOC
高阶组件HOC一、高阶组件HOC1.高阶组件2、属性传递3、使用属性传递4、注意一、高阶组件HOCHOF:Higher-OrderFunction,高阶函数,以函数作为参数,并返回一个函数,例如(compose、bind)HOC:Higher-OrderComponent,高阶组件,以组件作为参数,并返回一个组件。如下例代码B,返回一个新的组件,所以B就是一个高阶组件。importReactfro
xun__xing
·
2021-04-26 16:06
react学习
react
HOC
React学习
记录
Vue||React·React的思路是HTMLinJavaScript也可以说是AllinJavaScript,通过JavaScript来生成HTML,所以设计了JSX语法,还有通过JS来操作CSS,社区的styled-component、JSS等。·Vue是把HTML,CSS,JavaScript组合到一起,用各自的处理方式,Vue有单文件组件,可以把HTML、CSS、JS写到一个文件中,HT
Null丶sleep
·
2021-04-25 11:11
React 组件&Props
学习目录
React学习
:组件&Props01函数组件02class组件03渲染组件04Props的只读性
React学习
:组件&Props组件从概念上类似于JavaScript函数。
小晗同学
·
2021-04-22 12:59
React
react
props
组件
React JSX简介
学习目录
React学习
:JSX简介01了解JSX02JSX中嵌入表达式03JSX是一个表达式04JSX特定属性
React学习
:JSX简介01了解JSXconstelement=Hello,world!
小晗同学
·
2021-04-21 17:20
React
javascript
reactjs
jsx
React学习
笔记——扩展内容
文章目录1.setState1.对象式2.函数式2.路由组件的lazyLoad3.Hooks1.StateHook2.EffectHook3.RefHook4.Fragment5.Context6.组件优化7.renderprops1.childrenprops2.renderprops8.错误边界9.组件间通信方式总结1.setState使用setState更新状态有2种写法。对象式是函数式的简
火星飞鸟
·
2021-04-21 13:11
前端整理
React
React
JavaScript
前端
React学习
笔记(三)-组件通信
层级.png父子组件的通信1.父=>子父组件向子组件的通信是通过props。较为简单,代码如下classChild_1extendsReact.Component{constructor(...arg){super(...arg)}render(){return{this.props.data}}}classParentextendsReact.Component{constructor(...a
许小花花
·
2021-04-19 20:02
react学习
笔记(三)
十.表单10.1受控组件我们可以将表单写为受控组件:classNameFormextendsReact.Component{constructor(props){super(props)this.state={value:''}this.handleChange=this.handleChange.bind(this)this.handleSubmit=this.handleSubmit.bind
无聊写写
·
2021-04-14 23:26
react学习
笔记(react基础+react全家桶+ant-ui知识)知识点边学边更新
title:react第一次实战项目知识点记录基础知识点项目地址:https://github.com/yangxinjian/reactPractice.git完整项目地址(主要是这个)https://github.com/yangxinjian/reactAntBike.git环境配置安装node.js(官网下载即可)node-v(查看是否安装node完成)安装yarn新一代的包管理工具fac
送你一堆小心心
·
2021-04-14 21:47
React学习
笔记(下)
内容概要:HigherordercomponentRefcontextAPIHttp/Ajax/axiosRedux1.Higher-ordercomponentAhigher-ordercomponentisafunctionthattakesacomponentandreturnsanewcomponent.Example1://InsidethewithClassimportReactfro
Skyler_5433
·
2021-03-31 08:44
react学习
笔记 —— dva
什么是dva?dva首先是一个基于redux和redux-saga的数据流方案,然后为了简化开发体验,dva还额外内置了react-router和fetch,所以也可以理解为一个轻量级的应用框架。dva应用的最简结构(带model)//创建应用constapp=dva();//注册Modelapp.model({namespace:'count',state:0,reducers:{add(sta
咸鱼的自我修养
·
2021-03-11 03:47
React学习
笔记
React三大体系1.React.js用于web开发和组件的编写2.ReactNative用于移动端开发3.ReactVR用于虚拟现实技术的开发React脚手架安装npminstall-gcreate-react-app创建React项目D://进入D盘mkdirReactDemo//创建ReactDemo文件夹cdReactDemo//进入ReactDemo文件夹create-react-app
老贾_ddc1
·
2021-03-10 13:57
2021
react学习
资料
一、create-react-app全局安装create-react-app$npminstall-gcreate-react-app创建一个项目$create-react-appyour-app注意命名方式CreatinganewReactappin/dir/your-app.Installingpackages.Thismighttakeacoupleofminutes.安装过程较慢,Inst
震撼着
·
2021-03-04 12:06
reactjs
前端
hooks
【React】
React学习
笔记2(React脚手架、组件通信与网络请求库)
React学习
笔记2(React脚手架、组件通信与网络请求库)零l说明一lReact应用(基于React脚手架)(一)React脚手架create-react-app1、脚手架是什么2、create-react-app
ArtlexKylin
·
2021-02-15 19:16
前端
reactjs
axios
fetch
PubSubJS
React学习
笔记(二):React脚手架、React路由
3、React应用(基于React脚手架)1)、使用create-react-app创建react应用1)react脚手架react提供了一个用于创建react项目的脚手架库:create-react-app项目的整体技术架构为:react+webpack+es6+eslint2)创建项目并启动第一步,全局安装:npmi-gcreate-react-app第二步,切换到想创项目的目录,使用命令:c
邋遢的流浪剑客
·
2021-02-15 09:41
后端的前端笔记
React脚手架
React路由
React学习
笔记(一):组件三大核心属性、组件的生命周期
1、React入门1)、helloreacthello_react/*此处一定要写babel*///1.创建虚拟DOMconstVDOM=Hello,React/*此处一定不要写引号,因为不是字符串*///2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))2)、创建虚拟DOM的两种方式1)使用jsx创建虚拟DOM1_使
邋遢的流浪剑客
·
2021-02-13 09:33
后端的前端笔记
React
React组件三大核心属性
React组件的生命周期
React学习
-does not exist on type ‘Readonly<{}> & Readonly<{ children?: ReactNode; }>
正经学徒,佛系记录,不搞事情终于是开始React的学习了,以前一直在用Vue,也是很一个很棒的框架,但是工作所迫,貌似外企喜欢用React,国人喜欢用Vue,反正都学一下也不亏。学习第一步,官网纸尿布初次使用出错按官网例子步骤搞一发没想到就来了个神奇的错误:doesnotexistontype'Readonly&Readonly错误原因因为使用了typescript代替了传统的js导致提示了校验错
My name is Red ^^
·
2021-02-08 11:04
React
reactjs
我的
react学习
笔记
这个复习笔记估计只有我自己才看得懂DocumentReactDOM.render(React.createElement('h1',{className:'red',name:'jack'},"HelloWorld"),document.querySelector('#app'));ReactDOM.render(hello{1+1},document.querySelector('#app'))
Z-Juln
·
2021-01-30 15:38
react
react
React学习
笔记
jsx语法遇到{}就把里面的代码当js解析遇到,document.getElementById('root'));connect这是一个高阶函数:就是一个函数的返回值是另一个函数mapStateToProps:使用时创建mapStateProps方法传入参数store用来获取store中的值mapDispatchToProps:使用时创建mapDispatchToProps方法传入参数dispat
zyghhhh
·
2021-01-29 17:00
class react 获取_
React学习
笔记
一、React初探es6写法codeimportReactfrom'react';importReactDOMfrom'react-dom';importPropTypesfrom'prop-types';classAppextendsReact.Component{state={title:'环球大前端'}render(){const{title}=this.state;const{name}=
Jiangxh1992
·
2020-12-30 21:47
class
react
获取
React学习
之路之创建项目
React开发环境准备IDE工具visualstudiocode开发环境开发环境需要安装nodejs和npm,nodejs工具包含了npm。nodejs下载官网:https://nodejs.org/zh-cn/down...。测试开发环境是否准备完成:使用管理用身份打开命令行窗口,输入:node-v和npm-v。安装create-react-app生成器在命令行窗口输入:npminstall-g
小子pk了
·
2020-12-09 03:48
react.js
React学习
-父子组建传递参数
React编程实战-父子组件传值本文章知识点均来自jspang.com本节介绍React父子组件如何传值。returnservice,deleteService在XiaojiejieItem.js中直接通过this.props.service拿到对应的值。其中函数有必要说一下。方法是使用箭头函数的形式定义的,其实它帮助我们简化了一个步骤deleteService=index=>{letnewSer
知识的搬运工plus
·
2020-11-18 22:13
React学习
教程-搭建和初级界面展示(第一次使用markdown)
知识点来源b站技术胖他的个人网站jspang.comVue对比React当团队人不多,开发效率快情况Vue比较适合项目大,人多,需要复用得代码多得时候,React比较适合第一节React得搭建和初级界面展示通过使用脚手架得形式npminstall--gcreate-react-app生成简单项目命令,然后再新建一个文件夹,相当与你的workplace:“my-app”通过create-react-
知识的搬运工plus
·
2020-11-18 22:30
学习笔记-
react学习
笔记
react构建用户界面的javaScript库,主要用于构建UI界面,Instagram,2013年开源。特点:1.声明式的设计2.高效、采用虚拟DOM来实现DOM的渲染,最大限度的减少DOM的操作。3.灵活,跟其他库灵活搭配使用。4.JSX,俗称js里面写HTMl,javascript语法的扩展。5.组件化,模块化,代码容易复用发,2016年之前大型项目非常喜欢。6.单向数据流,没有实现数据的双
资深柠檬精
·
2020-11-12 10:36
react
reactjs
react学习
手册
0.warning不要修改props不要直接修改this.state(而是应该使用setState())state的更新是异步的,所以state的状态更新时不要同时相互依赖,但是可以通过传入函数延迟更新,这样就解决了同时也可以将后续操作变成回调函数放在第二个参数上保证执行顺序this.setState((state,props)=>({counter:state.counter+props.inc
radation
·
2020-11-04 18:15
React学习
笔记
1.配置Yarn1.1yarn的安装和报错解决a.安装npminstall-gyarnb.cmd中不是内部命令的解决此电脑–>高级系统设置–>环境变量–>用户变量–>找到yarn文件所在目录,不是bin目录c.yarn在powershell中运行失败的解决方法1、到C:\Windows\System32\WindowsPowerShell\v1.0目录下,右键选择以管理员身份运行powershel
NingbYarn
·
2020-10-23 10:10
react
reactjs
大前端
javascript
html
邂逅react(三)
react学习
之路...分享两个经典小案例一、循环展示数组列表1.我们可以直接for循环然后展示classListextendsReact.Component{constructor(){super()
大白白
·
2020-10-11 16:54
javascript
前端
react.js
react学习
-8.获取真实DOM节点
React中的DOM也是虚拟DOM(virtualDOM),只有当它插入文档以后,才会变成真实的DOM。React也是在虚拟DOM发生变化时,进行比对后,只渲染变化的部分,它是React极高性能的主要原因之一。但是有时候我们需要从组件中获取真实的DOM节点,React为我们提供了ref属性。下面我们通过一个demo了解Ref的用法。image这个案例很简单,就是有一个文本框,当你点击按钮时,光标定
YINdevelop
·
2020-10-09 16:57
react学习
笔记
1.资源文件位置图片一般放在src/assets目录下2.如何引入文件路径1.可以使用create-react-app提供的yarnruneject将所有内建的配置暴露出来,然后配置2.CreateReactApp3可以使用绝对路径,参考官网或者网上一些文章,例如https://medium.com/@ktruong008/absolute-imports-with-create-react-ap
风间澈618
·
2020-09-23 14:19
React学习
笔记2-Function Component
FunctionComponent学无止境。——荀子接着学习一下React的functioncomponent。之前React主要通过class的方式来构建UI组件,但是可能在很多项目中存在一些弊端。Facebook设计了ReactHook的方式,可以不通过class的方式来完成同样的功能。也就是只需要通过functioncomponent即可,这样带来的好处是代码更简单,bug更少。简单的Com
W1nt3rs
·
2020-09-17 01:26
React
react学习
--起步
react基础学习helloworld引入库创建react容器开始写reactJS的扩展语法,需要使用babel进行转义。脚手架开发环境搭建VSCode配置VSCode插件安装Chrome插件安装helloworld引入库创建react容器开始写react//ReactDOM.render('显示的内容','容器')ReactDOM.render('你好,我是杨小柳',document.getEl
星星上的程序媛
·
2020-09-16 15:31
react
笔记
reactjs
react学习
前准备二: 移动App开发环境搭建
环境变量的使用作用:将需要全局使用的工具或者应用程序,配置到Path环境变量中,可以很方便的通过命令行的形式,在任何想要运行这些应用程序的地方,运行它们安装最新版本的javajdk安装jdk包修改环境变量,新增`JAVA_HOME`的系统环境变量,值为`C:\ProgramFiles\Java\jdk1.8.0_74`,也就是安装JDK的根目录修改系统环境变量`Path`,在`Path`之后新增`
zerobaek
·
2020-09-16 06:26
react
React学习
08----demo练习2
React学习
08----demo练习2继续完成todolist的功能http://www.todolist.cn效果:项目结构:源码:TodoList.jsimportReactfrom'react'
zhaihaohao1
·
2020-09-15 16:40
React
React学习
(一)——初步了解,完成ToDoList功能demo
React学习
笔记(一)自用文章目录
React学习
笔记(一)1.React简介2.前端三大主流框架ReactvsVueReact的优势3.React基础知识JSX语法为什么使用JSX?
ggsddu!
·
2020-09-15 15:30
前端
react
react学习
-todolist-demo
最终效果如下:代码结构如下入口文件index.html如下ReactAppYouneedtoenableJavaScripttorunthisapp.index.js如下importReactfrom"react";importReactDOMfrom"react-dom";importTodoListfrom"./TodoList";ReactDOM.render(,document.getEl
菜鸟小佳
·
2020-09-15 15:05
react学习
笔记(二)之编写 TodoList 功能
页面布局,因为只返回一个组块,必须包一个div。在btn上绑定一个click事件,不是原生事件,一次onClick大写点击的时候想执行一个函数,那这个函数怎么写:在jsx里面,想写一个函数必须要用花括号{this.handleClick}this指向这个组件,因此组件里要有这个方法ES6语法constructor定义数据即可,数据变了页面自然也变了按钮点击新增add报错原因:btn点击的时候thi
雨下听风声
·
2020-09-15 14:13
react
前端
react
上一页
4
5
6
7
8
9
10
11
下一页
按字母分类:
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
其他