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学习
练习
Title/*varMystyle={color:'#ddd'};ReactDOM.render(这是学习的第一个小例子{3+5},document.getElementById("example"));*//*react实例,输出js,输出样式*//*vararr=[JSX允许在模版中插入数组,所以这是数组练习]ReactDOM.render({arr},document.getElementB
GJM_大萌
·
2020-09-15 12:20
React
React学习
笔记——Router(有待完善类比学习、页面路由与服务端路由部分)
React-router基本概念import{Router,Route,Link}from'react-router'BrowserRouter:容器组件,在其内配置Route为真正的路由方面的东西;Route:它最基本的职责是在location与路由路径匹配时呈现相应的component;Link:为应用程序提供声明性的、可访问的导航。(a标签)基础组件BrowserRouterbasename
xiaozhuo_tang
·
2020-09-15 12:24
React
34.
React学习
笔记(JSX语法、组件、this.props.children、PropTypes、this.state、组件的生命周期、ajax)
一、HTML模板使用react的源码大致是这样://**Ourcodegoeshere!**上边代码有两个地方需要注意:(1)最后一个script标签的type属性为type/babel(因为react独有的JSX语法与JavaScript不兼容)(2)上边使用了三个库,一定要首先加载:react.js是react的核心库;react-dom.js提供与DOM相关的功能;Browser.js将JS
夏小拙
·
2020-09-14 03:34
React
React
react学习
笔记(三) 组件
组件将我们的页面拆分成不同的块,让我们更易于去维护这些内容React中的组件结构分类React中的组件根据结构可分为函数组件和class组件函数组件顾名思义,函数组件即为函数形式的组件,举例如下functionMyComponent(props){returnHello{props.name}}该组件名为MyComponent,通过props传入参数,使得组件可以在内部使用外部的数据,从形式上类似
前端小黑
·
2020-09-13 23:58
React
React学习
(10)—— 高阶应用:上下文(Context)
为什么80%的码农都做不了架构师?>>>Context在使用React时,很容易在自定义的React组件之间跟踪数据流。当监控一个组件时,可以监控到那些props被传递进入组件了,这非常有利于了解数据流在什么地方出现了问题。在某些情况下,开发者想要通过组件树直接传递数据,而不是在一层又一层的组件之间手工传递数据。此时,可以使用React的“context”特性接口来快速实现这个功能。尽量不要使用C
weixin_34233618
·
2020-09-13 23:55
react学习
之路(2.2)-----数据传递(props(子传父级),context)
react学习
之路,数据传递(props,context);再讲props子父级之前,先学习一下context这个非常NB的数据接收容器,如何正确的使用,接下来为大家介绍,用它之前,我们必须要知道有个叫
scottdao
·
2020-09-13 22:50
react学习
笔记(五)使用Context上下文实现组件通信
前言在React中,父子组件可以通过props通信,然有一些公共的数据(语言、主题等)需要多个组件使用,此时,可以用Context实现父组件定义值,多个子组件(孙组件)获取值的方式。请查看下面的链接https://juejin.im/post/5c26c7f7e51d4511fb7da3ca
harmsworth2016
·
2020-09-13 22:47
react
react学习
笔记
https://www.bilibili.com/video/BV1eE411W7WT?p=7一、初始react1】react原理①虚拟domreact把DOM抽象成为一个JS对象,通过这个JS对象来描述相关的页面中的真实DOM,通过这个JS对象来实时的更新真实DOM。这里的JS对象也就是虚拟DOM。②diff算法react通过Diff算法来保证当页面的DOM更新的时候,不第一时间去更新真实DOM
高桥靓仔
·
2020-09-13 13:37
笔记
react学习
记录-组件的render方法
文章目录组件的render方法只能返回一个JSX表达式插入条件返回JSX元素变量课后习题组件的render方法React.js中一切皆组件,用React.js写的其实就是React.js组件。我们在编写React.js组件的时候,一般都需要继承React.js的Component,并为这个组件子类实现一个render方法,这个render方法必须要返回一个JSX元素。只能返回一个JSX需要注意的是
秃头指非官
·
2020-09-13 12:04
React.js小书学习
react学习
笔记10:显示隐藏效果和tab切换效果
为什么80%的码农都做不了架构师?>>>1.显示隐藏效果显示隐藏就需要结合我们的react事件处理,一般的显示隐藏可以用css的display处理:importReactfrom'react';importReactDOMfrom'react-dom';import'./index.css';importregisterServiceWorkerfrom'./registerServiceWork
weixin_34001430
·
2020-09-13 09:36
react学习
之理解props.children
对于props.children,官方文档是这样解释的props.childrenisavailableoneverycomponent.Itcontainsthecontentbetweentheopeningandclosingtagsofacomponent也就是每个组件都有一个props.children属性,通过这个可以方便地拿到内部的元素,假设我们有一个Container组件,我们希望
陈逍遥
·
2020-09-13 00:07
react
React 入门实战(干货)
React入门实战(干货)更多干货React
React学习
笔记_react-redux原理分析Javascript学习笔记_异步模式Javascript学习笔记_箭头函数
React学习
笔记_Redux
React
chenshiying007
·
2020-09-12 22:41
【架构】
【更多】
React学习
笔记之十四: React hooks初探
ReactHooks本文参考主要博文:阮一峰老师的React-hooks教程HowtofetchdatawithReactHooks?useEffect完整指南React-hooks的官方文档demoReacthooks的主要功能是让函数式组件能够模拟出自身的状态state和生命钩子函数常用的ReactHooks函数包括useStateuseEffectuseContextuseReducer1.
月半叫做胖
·
2020-09-12 22:36
React学习笔记
前端学习
React
React学习
:Refs
在常规的React数据流中,props是父组件与子组件交互的唯一方式。要修改子元素,你需要用新的props去重新渲染子元素。然而,在少数情况下,你需要在常规数据流外(冲出React虚拟DOM的限制)强制修改子元素(被修改的子元素可以是React组件实例,或者是一个DOM元素),在这种情况下,React提供了Refs来解决。简单说就是:在从render方法中返回UI结构之后,你可能想冲出React虚
白小宇
·
2020-09-12 22:09
web前端
React
React学习
WebAssembly 初体验:从零开始重构计算模块
WebAssembly初体验:从零开始重构计算模块从属于笔者的Web前端入门与工程实践,更多相关资料文章参考WebAssembly学习与实践资料索引和
React学习
与实践资料索引。
weixin_34088598
·
2020-09-12 17:24
ES6深拷贝与浅拷贝
小感在前
React学习
与开发过程要经历一个相当长的准备阶段,此前看阮一峰老师的文章中,他就特别提到这一点。
weixin_33932129
·
2020-09-12 11:41
React学习
(七)-React中的事件处理
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文|川川VX-ID:suibichuanji点击下方小程序可看视频点击文末左下方阅读原文,可看更多内容(妹子搁这了,不点点看看么)前言props与state都是用于组件存储数据的一js对象,前者是对外暴露数据接口,后者是对内组件的状态,它们决定了UI界面显示形态
itclanCoder
·
2020-09-12 01:00
React学习
(五)-React中组件的数据-props
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文|川川ID:suibichuanji点击下方小程序可看视频点击文末左下方阅读原文,可看更多内容(点击小程序,可看视频)前言开发一个React应用,更多的是在编写组件,而React组件最小的单位就是React元素,编写组件的最大的好处,就是实现代码的复用将一个大
itclanCoder
·
2020-09-12 01:00
React学习
笔记
React是一个用于构建用户界面的JavaScript库,目前在前端领域应用十分广泛本系列文章参考官方文档,同时结合自己的一点心得体会,记录下自己学习React的过程老规矩,下面还是先放官方文档的链接:文档:https://react.docschina.org/docs/getting-started.html教程:https://react.docschina.org/tutorial/tut
半虹
·
2020-09-12 01:56
React
react学习
知识总结
1、React设计思想及其独特,属于革命性创新,性能出众,代码逻辑却非常简单。库(library):小而巧,库只提供了特定的api。优点是船小好调头,可以很方便的从一个库切换到另外的库,但是代码几乎不会改变。框架(Framework):大而全,框架提供了一整套的解决方案。所以,如果在项目中间,想切换到另外的框架是比较困难的。2、React与Vue的对比组件化方面什么是模块化:是从代码的角度来进行分
weixin_46448551
·
2020-09-12 01:14
React学习
--组件、props、state、生命周期
1、定义组件通过函数定义组件:js函数可以接收一个props属性,并返回一个React组件functionMsgBox(props){returnhello{props.name}}通过类继承定义组件:通过继承React.Component产生一个类组件,通过this.props访问类属性,并在render函数中返回react组件。classMsgBoxextendsReact.Component
Vic·Tory
·
2020-09-12 00:26
WEB
React学习
笔记(二):react全家桶项目实战
文章目录说明项目部分截图src目录结构运行项目中文文档说明技术栈:react+redux+react-redux+react-router-dom+redux-thunk+axiosui框架是采用蚂蚁金服的antddesign脚手架工具是:create-react-app使用的后台数据接口是cnode官方的api,大家有需要的话也可以去用当然了,大家可能觉得做这个项目用这个技术栈太复杂了,不过我主
学无止境super
·
2020-09-12 00:41
前端
React学习
之路01
React入门1.安装node.js通过npm安装react开发环境1.1:npminit(项目初始化)1.2:npminstall--savereactreact-dombabelifybabel-preset-react(项目依赖包安装)1.3:npminstall--savebabel-preset-es2015(项目依赖包安装)2.使用webpack打包,管理项目2.1:npminstal
roman.zhang
·
2020-09-12 00:43
前端
React学习
-开篇
说明:本系列所有demo代码的github地址为:https://github.com/Brucewu998/react.js-learning,笔者会不断更新这些代码,本篇代码在目录下demo-01文件夹下。介绍React官网对自己最明显的介绍是:声明式、组件化和一次学习随处编程这三个标签,官网对其的解释是:声明式:React使创建交互式UI变得轻而易举。为你应用的每一个状态设计简洁的视图,当数
Bruce_wjh
·
2020-09-12 00:33
react学习
react
react学习
React学习
【05】React 消息订阅发布机制
React消息订阅发布机制文章目录React消息订阅发布机制1.组件间通信1.1方式一:通过props传递1.2方式二:使用消息订阅(subscribe)-发布(publish)机制1.3方式三:redux2.事件监听理解2.1原生DOM事件2.2自定义事件(消息机制)3.ES6常用新语法1.组件间通信1.1方式一:通过props传递共同的数据放在父组件上,特有的数据放在自己组件内部(state)
LGX_TvT
·
2020-09-12 00:36
【30】React
React学习
:JSX
什么是JSX?(1)JSX是JavaScript的一种扩展语法。它具有JavaScript的全部能力。(2)JSX可以生成React“元素”。(3)JSX也是一个表达式。特别在编译之后,JSX表达式就变成了常规的JavaScript对象。从本质上讲,JSX只是为React.createElement(component,props,…children)函数提供的语法糖。JSX长什么样?conste
白小宇
·
2020-09-12 00:26
React
web前端
React学习
react
jsx
React学习
之路一
1.先了解react的概念、结构,然后搭建demo结合学习组件的编写,学习数据传递。2.期间需要不断了解学习ES6,包括原生js知识。3.然后学习redux在项目的使用并实际运用到demo。3月1号:出本地搭建好的demo3月8号:出做出来的新闻列表及详情页3月17号:出redux做出来的新闻列表及详情页每运行一个项目,都要npminstall得到node_modulesnpmsetregistr
韩凌疯
·
2020-09-11 23:46
React
React学习
笔记(四) 条件渲染与列表渲染
一、条件渲染1、条件渲染在React中,我们可以通过创建不同的组件封装不同的行为,然后根据应用的状态渲染对应状态下的部分内容//定义组件封装登陆行为classSignInextendsReact.Component{constructor(props){super(props)}render(){returnPleaseSignIn}}//定义组件封装注册行为classSignUpextendsR
半虹
·
2020-09-11 23:41
React
React学习
-- 事件系统
React中virtualDOM是以对象的形式存在的,所以想要在这些对象上绑定事件,就会非常简单。React基于VirtualDOM实现了一个合成事件层,我们所定义的事件处理器会接收到一个合成事件对象的实例。合成事件的绑定方式Test这种写法和原生的HTML事件监听器属性非常相似。但是,仔细观察,就会发现还是有所区别的,下面这个是原生的HTML事件绑定方式:Test区别有二:1、onClick&o
玉儿Qi
·
2020-09-11 23:19
前端开发
React学习
笔记(一):创建react项目并结合elementUI
创建过程命令行安装全局create-react-app脚手架工具npminstall-gcreate-react-app在工作目录下创建项目create-react-appmy-demo进入项目目录cdmy-demo启动项目npmstart这样,react项目就创建完成了,接下来安装elementui组件。首先是安装npmielement-react--save安装必要的主题包npminstall
濮家大少
·
2020-09-11 23:01
React
React学习
之元素渲染
说明:本系列所有demo代码的github地址为:https://github.com/Brucewu998/react.js-learning,笔者会不断更新这些代码,本篇代码在目录下demo-02文件夹下。元素渲染在React中,元素是构成React应用的最小单位,就如同一个HTML文档包含各种各样的标签一样,React中的元素描述了我们要在屏幕上构建出来的内容,官方给出的解释是React元素
Bruce_wjh
·
2020-09-11 23:28
react学习
React元素渲染
ReactDOM.render
React学习
之获取真实DOM节点
说明:本系列所有demo代码的github地址为:https://github.com/Brucewu998/react.js-learning,笔者会不断更新这些代码,本篇代码在目录下demo-04文件夹下。在React中,组件并不是真实的DOM节点,而是一种存在于内存之中的一种数据结构,叫做虚拟DOM(virtualDOM)。只有当它插入文档以后,才会变成真实的DOM。根据React的设计,所
Bruce_wjh
·
2020-09-11 23:28
react学习
React
真实DOM
React
ref
React学习
之组件与props
说明:本系列所有demo代码的github地址为:https://github.com/Brucewu998/react.js-learning,笔者会不断更新这些代码,本篇代码在目录下demo-03文件夹下。组件组件允许我们将UI拆分为独立可复用的代码片段,并对每个代码片段进行独立构思,并且React的组件接受任意的入参props,即父组件可以利用props向子组件传值,稍后会再做讲解。在Rea
Bruce_wjh
·
2020-09-11 23:28
react学习
React.js
React组件
React父组件向子组件传值
React
props
默认值
React
props定义类型
React学习
之列表运用(七)
对于列表其实也就是数组,我们可以用数组的map函数对数组集体进行公操作,如下:constnumbers=[1,2,3,4,5];constdoubled=numbers.map((number)=>number*2);console.log(doubled);会对数组中的每一个元素执行乘2操作然后保存在doubled数组中。接下我们就要介绍React数组元素或者说是列表元素的运用了1.视图多重组件
77458
·
2020-09-11 23:21
React
React学习
【
React学习
五】React 元素渲染、条件渲染
React元素渲染元素是构成React应用的最小单位,它用于描述屏幕上输出的内容。constelement=Hello,world!;与浏览器的DOM元素不同,React当中的元素事实上是普通的对象,ReactDOM可以确保浏览器DOM的数据内容与React元素保持一致。将元素渲染到DOM中首先我们在一个HTML页面中添加一个id=“example”的:在此div中的所有内容都将由ReactDOM
DAKER KING
·
2020-09-11 23:21
React
React学习
之State与生命周期基友情(四)
我先拉拉对React-DOM输出那篇文章的知识点,从那篇文章中得知,至今为止我们只会用ReactDOM.render()去更改覆盖数据来进行视图更新,然而还是在时间的控制下进行变化。现在我们要做的就是让组件自己跑起来何为state?State是一种类似于props的东西,属于组件元素的属性,但是它是私有的,并且完全被组件所控制,所以State只会存在于组件中,不是组件的话,可以走开了,并且它是可变
77458
·
2020-09-11 23:21
React
React学习
React学习
:条件渲染
React中的条件渲染就和在JavaScript中的条件语句一样。通过JavaScript条件操作符(如if)根据不同的条件来决定创建渲染不同的元素,并且让React更新匹配的UI。仔细阅读代码,你会发现这一章对你收获最大的是怎么让代码写的更简单优雅。一、怎么用看下面dome就懂了,顺便看看我们在多个页面写react与在一个页面写react的区别例:多个页面index.jsimportReactf
白小宇
·
2020-09-11 23:56
web前端
React
React学习
React学习
:事件处理
React:元素构成组件,组件又构成应用。React核心思想是组件化,其中组件通过属性(props)和状态(state)传递数据。一、React元素与DOM元素事件处理区别(1)命名:React事件使用驼峰命名,而不是全部小写(2)写法上:HTML里:ActivateLasersReact中:{alert('ss')}>其实也是函数-->ActivateLasers(3)阻止默认行为在React中
白小宇
·
2020-09-11 23:56
web前端
React
React学习
react学习
之事件绑定与条件渲染
react学习
之事件绑定与条件渲染事件绑定:对于事件绑定,其在react中的绑定方式就与js中在DOM中的绑定方式相同,但是也有区别。
care_yourself
·
2020-09-11 23:56
react
React学习
:列表(Lists) 和 键(Keys)
首先,回顾一下在JavaScript中如何转换列表。给定下面代码,我们使用map()函数使numbers数组中的元素值翻倍constnumbers=[1,2,3,4,5];constdoubled=numbers.map((number)=>number*2);console.log(doubled);输出:[2,4,6,8,10]在React中,转换数组为元素列表的方式,和上述方法基本相同。一、
白小宇
·
2020-09-11 23:56
web前端
React
React学习
列表(Lists)
react
键(Keys)
React学习
:State 和 生命周期的应用
React:元素构成组件,组件又构成应用。React核心思想是组件化,其中组件通过属性(props)和状态(state)传递数据。首先看个实例写法一:函数式组件functionClocks(props){returntimeis:{props.date.toLocaleTimeString()};}functiontrick(){letclockElement=;//clockElement必须放
白小宇
·
2020-09-11 23:55
web前端
React
React学习
React学习
:元素渲染
React:元素构成组件,组件又构成应用。一、什么是React元素?React元素就是普通的js对象(俗称:虚拟DOM)。React元素不是真实的DOM元素,所以也没办法直接调用DOM上原生的API。渲染过程:React元素描述虚拟DOM,再根据虚拟DOM渲染出真实DOM。1、虚拟DOM:就是用js对象结构模拟出html中dom结构,批量的增删改查先直接操作js对象,最后更新到真正的DOM树上。因
白小宇
·
2020-09-11 23:55
web前端
React
React学习
React学习
之state与生命周期
在
React学习
之组件与props这一节中,讲述了React相关的传值机制props,我们知道React对props由严格的保护机制,一旦给定值,在组件中是不允许改变的;在很多场合中,组件的
Bruce_wjh
·
2020-09-11 23:04
react学习
React学习
React生命周期
React状态机值更新
React状态机state
React学习
之条件渲染
说明:本系列所有demo代码的github地址为:https://github.com/Brucewu998/react.js-learning,笔者会不断更新这些代码,本篇代码在目录下demo-07文件夹下。条件渲染在React中,我们可以根据不同的需求来创建不同的组件,有时候在一些特定的场景中,我们需要呈现不同的状态,这个时候我们就可以利用条件渲染来完成这个需求。React中的条件渲染和Jav
Bruce_wjh
·
2020-09-11 23:04
react学习
React学习
React条件渲染
React阻止条件渲染
React学习
之事件处理
说明:本系列所有demo代码的github地址为:https://github.com/Brucewu998/react.js-learning,笔者会不断更新这些代码,本篇代码在目录下demo-06文件夹下。我们知道,传统HTML的DOM包含了各种各样的事件处理,例如鼠标点击事件onclick:在HTML中应用:functionhandleClick(e){console.log("Clickb
Bruce_wjh
·
2020-09-11 23:04
react学习
React学习
React事件处理
React
onClick
React学习
之列表
在本系列第二篇:
React学习
之元素渲染中,讲到了数组的渲染属于React的列表渲染;在JavaScript中,我们可以使用map()函数来遍历数组,然后得到新的列表:constnumber
Bruce_wjh
·
2020-09-11 23:04
react学习
React学习
React入门
React列表
React
key键值
React学习
总结
文章目录前言react脚手架建立工程1、安装2、创建3、初始化4、运行创建一个helloWorldDemo知识点:1.目录结构分析2.创建组件3.JSX注意事项4.绑定数据或对象事件及数据绑定Demo知识点:事件绑定:数据绑定(View->Model)数据绑定(Model->View)双向数据绑定(M->V&V->M俗称MVVM)TodoList小练习远程请求数据Demo知识点:1.跨域问题2.a
小钟233
·
2020-09-11 17:04
前端
React学习
系列一开发环境准备
环境准备:安装nodejs最好安装稳定版本网上方法很多安装cnpm(淘宝镜像)一句话npminstall-gcnpm--registry=https://registry.npm.taobao.org安装yarncnpminstall-gyarn或者npminstall-gyarn搭建环境方法方法一:1、用create-react-appnpminstall-gcreate-react-app或者
大广_08_全栈开发
·
2020-09-11 11:06
React
React学习
笔记(4)---react属性与状态
1.属性的含义和用法用this.props引用属性用法:1》.键值对式:?可以是{。。。}或字符串“”,数组{[...]},或变量{val}2》.展开对象式:varprops={one:"123",two:333}3》.调用setProps式;很少用到vari=React.render(,document.body);i.setProps({name:"123"})实例:varstyle={col
thystar
·
2020-09-11 10:12
web前端
【
React学习
一】安装React开发环境(Node.js 及cnpm)
前置Windowsnode.js一、下载node.js安装包官方下载地址:https://nodejs.org/en/download/我这里下载的是推荐使用的版本。下载好以后直接跟着步骤安装即可(安装时会自动将系统配置及NPM安装好)。安装好之后在命令行界面进行验证,看是否已经安装成功。node-vnpm-v安装相关环境npminstallexpress-gnpminstalljade-gnpm
DAKER KING
·
2020-09-11 09:02
React
上一页
5
6
7
8
9
10
11
12
下一页
按字母分类:
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
其他