React学习

React学习笔记——Hooks中useState的基础介绍和使用

在React的世界中，有容器组件和UI组件之分，在ReactHooks出现之前，UI组件我们可以使用函数，无状态组件来展示UI，而对于容器组件，函数组件就显得无能为力，我们依赖于类组件来获取数据，处理数据，并向下传递参数给UI组件进行渲染。使用ReactHooks相比于从前的类组件有以下几点好处：代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于维护和迭代，
前端老Chen先生·2021-07-14 16:04

react学习

学习react路径：https://jspang.com/posts/2019/05/04/new-react-base.html#%E7%AC%AC01%E8%8A%82%EF%BC%9Areact%E8%AF%BE%E7%A8%8B%E5%89%8D%E8%A8%80记录一下学习的内容：一、react的三大体系：1、reactJs用于web开发和组件的编写2、reactNative用于移动端的
胖婶·2021-06-26 20:00

2019-04-02/react学习笔记-1

1.受控组件vs非受控组件受控组件（表单数据由React组件处理。=>onChange的事件处理器）非受控组件(让表单数据由DOM处理时===使用ref从DOM获取表单值，为非受控组件)区别受控组件的状态由开发者维护，非受控组件的状态由组件自身维护（不受开发者控制）2.生命周期image.pngStarts=>**componentWillMount()=>render()=>componentD
阿九_beta·2021-06-26 17:19

react学习第二天笔记

箭头函数箭头函数基础知识varfn=()=>333;执行函数fn()的结果是333;varfn=(n,m)=>n+m;执行函数fn(2,3)的结果是5;varfn=(n,m)=>(n+m);执行函数fn(2,3)的结果是5；varfn=(n,m)=>{n+m};执行函数fn(2,3)的结果是undefined;因为大括号内没有设置return返回值；varfn=(n,m)=>{returnn+m}
果木山·2021-06-24 16:24

react学习资料九-reflux

RefluxReflux,flux,redux都是处理React数据层面的一个框架（插件、库），定义了action,store来传递数据的;作用都一样，唯一的不同是提供的api不同，因此会使用一个，其他都会了；项目实例React项目目录结构：css目录，是网站样式目录bootstrap.css框架index.less页面样式data目录，模拟异步请求的假数据fonts目录，里面的文件是bootst
九泰修行·2021-06-14 11:15

React学习篇-JSX（手写一个JSX的插件）

学习和阅读vue源码有段时间了，最近在尝试去学习react，由于眼前项目使用不上react，并不想一股脑的学习它的API（长时间不用还是会忘），所以此次的学习过程打算换种方式，对于react涉及到的每个点尝试逐个深入，了解其解析过程及整个框架的思路。对于每个点的学习和深入，将以文章的形式产出，主要是对于学习的内容的记录（所以看来内容有点多），方便自己以后是用时查阅和回顾。从demo开始在此之前，曾
小鱼儿_61f5·2021-06-07 18:50

react学习第四天笔记之简历项目

项目架构src文件夹：开发时的源代码assets：静态资源文件夹；fonts：引入的icon字体图标文件；css,js等静态资源文件containers:容器型组件AboutContactHomeProjectSkilllayouts:布局APP：总布局index.js:总布局文件，用于设置页面的总布局结构；index.css：用于设置自己的css样式；Menu:导航栏布局index.js:导航栏
果木山·2021-06-07 10:11

React学习笔记四

React使用JSX来替代常规的JavaScript。JSX是一个看起来很像XML的JavaScript语法扩展。我们不需要一定使用JSX，但它有以下优点：JSX执行更快，因为它在编译为JavaScript代码后进行了优化。它是类型安全的，在编译过程中就能发现错误。使用JSX编写模板更加简单快速。先看下以下代码：constelement=Hello,world!;这种看起来可能有些奇怪的标签语法既
mathfriend·2021-06-05 03:33

react学习：react-router路由

如果你都有了答案，可以忽略本文章，或去react学习地图寻找更多答案简单使用第一步：安装react-router-domyarnaddreact-router-dom第二步：从react-router-dom
大神乔伊·2021-05-28 21:13

react学习

ReactReact的特点1.采用组件化模式，声明式编码，提高开发效率及组件复用率2.在ReactNative中可以使用React语法进行移动端开发3.使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互虚拟DOM和真实DOM的差别虚拟dom：1.本质式object类型的对象（一般对象）2.虚拟dom比较‘轻’，真实dom比较‘重’，因为虚拟dom是react内部使用，无需真实do
暑假过期le·2021-05-28 20:06

react学习：HOC高阶组件

如果你都有了答案，可以忽略本文章，或去react学习地图寻找更多答案高阶组件本质：是高阶函数，接收一个组件作为参数，返回一个被强化/或具有公共逻辑的组件.作用：组件拓展与强化，公共逻辑抽离基本使用例子说明
大神乔伊·2021-05-26 09:39

react学习：Portals

如果你都有了答案，可以忽略本文章，或去react学习地图寻找更多答案react组件的渲染方式（层级）组件默认会按照既定层级嵌套渲染，父组件，子组件react的作用范围：只在html中ID为root的节点中渲染内容
大神乔伊·2021-05-26 08:15

react学习：组件复合Composition

如果你都有了答案，可以忽略本文章，或去react学习地图寻找更多答案组件复合作用：组件拓展与复用，自定义组件的外观和行为如何使用：使用组件包裹内容，传递props.children，chilren可以是任意的
大神乔伊·2021-05-26 08:23

react学习导图

前言浅蓝色的文字是超连接，点击前往相关主题学习资料官网react关键词渲染性能优化数据驱动视图基础数据传递生命周期hook原生hook自定义hook进阶更新模式性能优化Portals高级组件HOC组件复合Composition路由路由react-router-dom数据管理redux和react-reduxdvamobx框架uminext-服务端渲染SSR辅助开发mock数据其他跨域
大神乔伊·2021-05-25 21:11

React学习JSX与虚拟DOM

最近开始了React的学习之旅，感觉这些框架都是一个套路。早先有学过VUE，它就像是在写模板，大部分是HTML。而React是在写模块，大部分是写js。React中有一个神奇的技术就是JSX，VUE2.0中引入也了React的JSX技术，但是React为什么要使用JSX技术呢？我们先来看官方的观点：JSXisnotrequiredtouseReact,butitmakescodemorereada
殊一ONLY·2021-05-20 00:35

react学习

文章目录搭建react环境插件SimpleReactSnippets目录介绍组件引入1.在index.js文件引入2.编写App.js组件JSX1.语法2.引入css文件用classname3.label标签一个例子1.写一个组件Xiaojiejie.js1.在constructor里定义data2.事件绑定2.在index.js引入并且使用组件拆分传值不同组件的通信父子组件传值父组件传值给子组件
stormeye_·2021-05-19 15:37

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学习--嵌套路由与组件的3种传参方式

一.嵌套路由的使用注册子路由时要写上父路由的path值路由的匹配是按照注册路由的顺序进行的，从App.jsx开始二.向路由组件传递参数数据params参数路由链接（携带参数)注册路由（声明接收）接收参数：从this.props.match.params中获取search参数路由链接（携带参数）注册路由（无需声明，正常注册即可）接收参数注意：获取到的search是urlencode编码字符串(?id
元气满满鸭·2021-05-09 19:49

React学习--模糊/严格匹配及重定向

一.多级路径刷新页面样式丢失的问题多级路径下刷新页面样式丢失的主要原因在于：index.html文件中使用的样式文件链接为相对路径，而非绝对路径解决方法：public/index.html中，引入样式时不写./写/(常用)public/index.html中，引入样式时不写./写%PUBLIC_URL%(常用)，但只限在react中使用使用HashRouter，因为url中#号后面的hash值是不
元气满满鸭·2021-05-09 13:57

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学习—旧版Context

旧版Context一、旧版Context1、声明Context2、使用Context一、旧版Context1、声明Context上下文：Context，表示做某一些事情的环境React中的上下文特点：当某个组件创建了上下文后，上下文中的数据，会被所有后代组件共享如果某个组件依赖了上下文，会导致该组件不再纯粹（外部数据仅来源于属性props）一般情况下，用于第三方组件（通用组件）importReac
xun__xing·2021-05-06 00:40

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渲染机制之间先来说一说下面几个概念，对于新入手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学习—高阶组件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学习记录

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 JSX简介

学习目录React学习：JSX简介01了解JSX02JSX中嵌入表达式03JSX是一个表达式04JSX特定属性React学习：JSX简介01了解JSXconstelement=Hello,world!
小晗同学·2021-04-21 17:20

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学习笔记（三）-组件通信

层级.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

【React】React学习笔记2（React脚手架、组件通信与网络请求库）

React学习笔记2（React脚手架、组件通信与网络请求库）零l说明一lReact应用（基于React脚手架）（一）React脚手架create-react-app1、脚手架是什么2、create-react-app
ArtlexKylin·2021-02-15 19:16

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学习笔记（一）：组件三大核心属性、组件的生命周期

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学习-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学习笔记

这个复习笔记估计只有我自己才看得懂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学习笔记

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
上一页 4 5 6 7 8 9 10 11 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他