react学习笔记

React学习笔记（三）

脚手架开发npxcreate-react-app{app-name}cd{app-name}->npmrunstart正确使用setState不要直接修改State，而是使用setState修改；Props和State的更新可能是异步的，不要依赖他们的值来更新下一个状态。//Wrongthis.setState({counter:this.state.counter+this.props.incr
老夫当年也是神一般的少年·2023-10-28 13:41

React学习笔记——向路由组件传递params参数的3种方式

路由组件的属性params参数特点：路径中会暴露信息值，且需要声明接收路由链接(携带参数)：//直接传属性详情//在该组件内部访问对象并传参详情注册路由(声明接收)：接收参数方式：const{name,age}=this.props.match.paramssearch参数特点：需要querystring库的支持，进行数据处理，在路径中需要添加传入的参数数据，标志为“?”路由链接(携带参数)：详情
Kevin11Yao·2023-10-23 16:49

react学习笔记-3：项目路径配置

配置路径别名vite默认不支持相对路径，只识别绝对路径，所以需要配置路径别名，方便库和文件引用在vite.config.ts中添加配置tips：默认识别不到path库，需要安装声明：npmi-D@types/node引入path库，添加默认路径配置import{defineConfig}from'vite'importreactfrom'@vitejs/plugin-react'importpat
snipercai·2023-10-17 06:12

React学习笔记02_面向组件编程

第2章：React面向组件编程2.1.基本理解和使用2.1.1.使用React开发者工具调试2.1.2.效果函数式组件：2.1.3.注意组件名必须首字母大写虚拟DOM元素只能有一个根元素虚拟DOM元素必须有结束标签functionDemo(){return自定义组件}constVDOM=({myData})ReactDOM.render(VDOM,document.getElementById('
淮里没有猫·2023-10-16 01:39

【React】React学习笔记3（React路由、Ant Design）

React学习笔记3（React路由、AntDesign）零l说明一lReact路由基础（一）【了解】一些概念1、SPA（SinglePagewebApplication单页Web应用）2、路由3、路由组件与一般组件
Artlex·2023-10-11 05:46

Ant Design of React 创建项目及运行环境

AntDesignofReact学习笔记（1）创建项目及运行环境本文使用create-react-app创建一个TypeScript项目，并引入antd。
键指江湖·2023-10-09 16:05

Ant Design of React组件引用及路由跳转

AntDesignofReact学习笔记（2）AntDesignofReact组件引用及路由跳转，接着笔记(1)继续这里我们主要3点：1.使用Ant的组件；2，如何引用页面组件；3，路由导航跳转这是我的目录结构公共组件目录定义了公共组件
键指江湖·2023-10-09 16:31

React学习笔记十-生命周期（旧）

此文章是本人在学习React的时候，写下的学习笔记，在此纪录和分享。此为第十篇，主要介绍React非常重要的组件的生命周期(旧)。要学习react新的生命周期，那必须先学习旧的生命周期。目录1.引出生命周期概念1.1案例1.1.1案例卸载功能与ReactDOM.unmountComponentAtNode1.1.2案例透明的渐变功能与componentDidMount(){}1.1.3案例透明的渐
啊啊啊啊啊威·2023-10-03 05:51

React学习笔记---面向组件编程

React学习笔记---面向组件编程一、基本理解和使用1、函数式组件2、类式组件二、组件实例的三大核心属性1、state1）、理解state2）、用一个例子去看一下react组件中怎么用state3）、
丑小鸭变黑天鹅·2023-10-02 13:26

【React】React学习笔记1（React概念）

React学习笔记1（React概念）零lReact简介一lReact第一步（一）依赖包（二）写一个HelloReact（三）虚拟DOM是什么（四）JSX语法规则（JavaScriptXML）（五）如何在
Artlex·2023-10-02 13:26

React 学习笔记（一）

React学习笔记（一）学习资源：张天禹老师（尚硅谷React教程）前置基础this指向问题ES6语法知识（class类）npm包管理器原型与原型链数组常用方法模块化1.1React历史用于构建用户界面的开源
智秀的绯闻男友·2023-10-02 13:55

React学习笔记【3】(react组件实例三大属性 state props ref)

学习地址：https://www.bilibili.com/video/BV1wy4y1D7JT官方文档：英文：https://react.dev/中文：https://react.docschina.org/组件实例三大属性之一：state理解：state是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）。组件被称为‘状态机’，通过更新组件的state来更新对应的页面显示（
⁡⁡小黑·2023-09-28 03:40

44.React学习笔记.hooks useEffect

一.认识EffectHook在Hook中，如何对应生命周期呢？：EffectHook起到了类似class中生命周期的功能。类似于网络请求，手动更新DOM，一些事件监听，都是React更新DOM的一些副作用（SideEffect）；对应于完成这些功能的Hook被称为EffectHook；importReact,{PureComponent}from'react'exportdefaultclassC
_生生不息_·2023-09-26 16:51

React学习笔记——Class组件内this的指向undefined及解决办法

一、React当中Class组件内的this指向所有在类中定义的方法都默认开启局部严格模式，所以在Class组件当中所以指向window对象的this都指向undefined所有内联的的事件处理处理函数当中的this都指向undefinedclassToggleextendsReact.Component{constructor(props){super(props);this.state={is
Bqiuer·2023-09-26 05:15

React学习笔记（一）React与Vue比较、初识JSX

文章目录React与Vue比较JSX相关为什么要使用JSXJSX语法规则：一定要注意区分：【js语句（代码）】与【js表达式】事件处理React与Vue比较React相对于Vue灵活性和协作要更好，适合大型团队开发，Vue插件和框架都非常丰富，实现起来更快速易用。React和Vue都使用虚拟DOM、组件等，React使用JSX，不如Vue代码好理解。虚拟DOM，简单来说就是根据数据动态生成实体DO
前端大婶儿·2023-09-23 23:59

react学习笔记（二）

JSX特定属性以通过使用引号，来将属性值指定为字符串字面量：constelement=;也可以使用大括号，来在属性值中插入一个JavaScript表达式：constelement=;警告：因为JSX语法上更接近JavaScript而不是HTML，所以ReactDOM使用camelCase（小驼峰命名）来定义属性的名称，而不使用HTML属性名称的命名约定。例如，JSX里的class变成了classN
刘赛_c5a1·2023-09-23 13:56

尚硅谷React学习笔记

本文档为视频学习笔记、需结合哔哩哔哩尚硅谷react教程视频阅读使用react简介react是干什么的react是用于构建界面的js库——只关注视图以往展示信息的步骤发送请求获取数据处理数据操作dom进行渲染react只关注第三步。前两部还需要之前的知识去做，react只帮忙操作dom。——react是一个将数据渲染为html视图开源js库react的好处原生js的痛点原生js操作domfan所、
一个厨子的全栈之路·2023-09-17 00:54

React学习笔记（二）

条件渲染if、&&、||、三元表达式列表&Keys循环列表时需要给每一项加上独一无二的key;提取出一个ListItem组件，你应该把key保存在数组中的这个元素上，而不是放在ListItem组件中的元素上;元素的key在他的兄弟元素之间应该唯一;jsx的{}表达式中不能出现var,const,let等这种关键字。组件API设置状态：setState参数格式setState(objectnextS
老夫当年也是神一般的少年·2023-09-16 21:08

React学习笔记-day01

React概述react介绍用于构建用户界面的javascript库，https://reactjs.org/（英文）https://react.docschina.org/（中文）React是一个用于构建用户界面（UI，简单理解为：HTML页面）的JavaScript库如果从mvc的角度来看，React仅仅是视图层（V）的解决方案。也就是只负责视图的渲染，并非提供了完整了M和C的功能react/
Rango06·2023-09-12 11:57

react学习笔记系列（二）(包含redux模式)

react学习笔记系列（二）(包含redux模式)文章目录react学习笔记系列（二）(包含redux模式)tips什么是受控组件？什么是挂载？
LynnWonderLu·2023-09-12 11:26

react学习笔记系列（四）（react-redux）

redux模式的原理此处不再赘述，以下主要参考了Redux详解，以及阮一峰老师的博客，其他内容可以参考我的前一篇博客：react学习笔记系列（二）redux是什么？
LynnWonderLu·2023-09-12 11:26

react18 函数组件 学习笔记

react学习笔记react安装渲染DOM使用Portal(可以将组件渲染到页面指定位置)使用方法CSS_Modal(外部样式表)使用方式Fragment(根元素)使用方式context(全局共享数据方式
Scar_goSky·2023-09-12 11:24

react学习笔记（完整版 7万字超详细）

1.React基础1-1.react-调试插件安装浏览器右上角…===>更多工具===>扩展程序==>开启开发者模式==>将调试插件包拖拽进来即可1-2.react基本使用React需要引入两个包ReactReactDOM需要创建一个根节点【舞台】，进行渲染Document//创建一个根节点，建立react与dom元素的联系//create创建//root根//createRoot:创建根节点【搭
你眼里有一条星河照耀着我·2023-09-10 12:46

React学习笔记---React脚手架

React脚手架一、使用create-react-app创建react应用1、react脚手架2、创建项目并启动3、react脚手架项目结构4、功能界面的组件化编码流程（通用）5、用脚手架写一个简单示例二、组件的组合使用（综合实例）一、使用create-react-app创建react应用1、react脚手架xxx脚手架:用来帮助程序员快速创建一个基于xxx库的模板项目1）.包含了所有需要的配置（
丑小鸭变黑天鹅·2023-09-10 12:16

React学习笔记-Day03

目录一、使用create-react-app创建react应用react脚手架创建项目并启动react脚手架项目结构功能界面的组件化编码流程（通用）关于编写React项目时的知识点(可参考todos案例)一、使用create-react-app创建react应用react脚手架xxx脚手架:用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置（语法检查、jsx编译、devServe
BlackStar-Coder·2023-09-10 12:45

React学习笔记-Day05

目录一、React路由1.SPA的理解2.路由的理解3.react-router-dom的理解二、路由的基本使用三、路由组件与一般组件NavLink与封装NavLinkSwitch的使用(包裹多个Route实现{path:component}的单一匹配)解决多级路径刷新页面样式丢失的问题路由的严格匹配与模糊匹配Redirect的使用嵌套路由向路由组件传递参数编程式路由导航withRouter的使用
BlackStar-Coder·2023-09-10 12:45

React学习笔记

React学习笔记一、react的基本使用1、在使用react时，用到react，react-dom，babel库，这里需要引入安装hello-react//这里的type要声明为"text/babel
Zhu Xiaopi·2023-09-09 12:41

React学习笔记——Hooks中useRef的基础介绍和使用，useRef和createRef的区别

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

React学习笔记汇总_part1

React学习笔记汇总React18视频教程（讲师：李立超）学习笔记1.变量的声明2.解构赋值3.展开4.箭头函数的语法5.箭头函数的特点7.类8.类的this9.类的继承10.静态属性和方法11.数组方法补充
冰之杍·2023-08-14 10:26

react学习笔记——复习模块

前言：最近开始学习react，之前学习vue没有把笔记整理的特别好，非常后悔，感觉学了等于没学，这次要好好整理啊！本次学习参考教程为B站，张天禹老师的react全家桶。文章目录类的基本知识创建一个类类的构造方法和一般方法类的继承总结原生事件绑定类中方法的this指向类中的属性展开运算符对象相关知识类的基本知识创建一个类定义一个Person类，然后实例化一个这个类的对象p1，并对这个对象进行输出后，
玄昌盛不会编程·2023-08-01 15:06

react学习笔记——1. hello react

包含的包一共有4个，分别的作用如下：babel.min.js：可以进行ES6到ES5的语法转换；可以用于import；可以用于将jsx转换为js。注意，在开发的时候，这个转换（jsx转换js）不在线上使用，因为转换需要时间，页面可能会出现白屏。react.development.js：react的核心代码库，引入以后，全局多了一个React对象react-dom.development.js：re
玄昌盛不会编程·2023-08-01 15:35

05-1.React学习笔记.JSX本质

使用jsx时，需要在script中注明babel类型。因为JSX仅仅是React.createElement(component,props,...children)函数的语法糖。所有jsx最终都会被转换成React.createElement的函数调用。若直接使用React.creatElement()则不需要babel转码。//jsx->babel->React.creatElement()c
_生生不息_·2023-07-31 20:45

尚硅谷React学习笔记（上）

目录一、React入门1.1、React简介为什么要学？React的特点1.2、React的基本使用HelloReact案例创建虚拟DOM的两种方式虚拟DOM与真实DOM1.3、ReactJSX语法规则JSX小练习1.4、模块与组件化的理解模块组件模块化组件化二、React面向组件编程2.1、基本理解和使用使用React开发者工具调试（chrome浏览器）2.2、函数式组件2.3、类式组件2.4、
装不满的克莱因瓶·2023-07-29 02:50

React学习笔记

一.JSX的优点1.书写简单以html的方式书写代码2.直接在jsx标签上注册事件3.可以使用大括号语法4.JSX防止注入攻击XSS二.调用setState发生一些什么(异步)在代码调用setState之后，React会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程。经过调和过程React会构建新的React元素树然后会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化的
糖醋鱼_·2023-07-21 05:31

React 学习笔记 - 使用React Hooks进行简单的表单封装

React学习笔记-使用ReactHooks进行简单的表单封装前言示例组件使用Form组件FormItem组件Input组件前言学完@我不是外星人的React进阶实践指南，了解了props的基本使用、隐式注入
绿胡子大叔·2023-07-19 20:32

react学习笔记

1.安装官方脚手架工具（默认你已经安装node和npm）npmi-gcreate-react-app​​​​​​​2.终端窗口运行create-react-appmydemo(mydemo为自定义项目名)3.等待完成后进入刚刚创建的项目目录运行npmstart4.浏览器打开启动地址5.查看项目基础结构6.一般实际项目的结构图这里借鉴网上大佬的一个项目架构设计，个人觉得比较合适目录简介：assets
Destiny辰·2023-07-19 07:18

react学习笔记——0.引言

本次学习React全家桶包含一下几部分：React基础React-Router：进行路由的库PubSub：消息管理的库Redux：集中式状态管理的库Ant-Design：UI组件库React是什么？用于构建用户界面的js库React是一个将数据渲染位HTML视图的开源JavaScript库React是由FaceBook开发的，并于2013年5月进行了开源原生JS存在的问题：原生的js需要频繁的操作
玄昌盛不会编程·2023-07-18 01:21

react学习笔记（一）

中文官网：https://react.docschina.org/。脚手架创建应用：npxcreate-react-appmy-appcdmy-appnpmstart。快速开始：Next.js：一个流行的、轻量级的框架，用于配合React打造静态化和服务端渲染应用。它包括开箱即用的样式和路由方案，并且假定你使用Node.js作为服务器环境。Gatsby：用React创建静态网站的最佳方式。它让你能
刘赛_c5a1·2023-07-17 21:10

56.React学习笔记.SSR渲染

为什么需要SSR?SSR:Serversiderendering服务端渲染,指的是页面在服务器端已经生成了完成的html页面结构,不需要浏览器解析.单页面富应用,index.html,刚开始基本没东西.首屏加载速度慢,刚开始的时候是空白的,index.html下载之后(前端渲染的时候是浏览器来进行的,可以交给服务端node操作):需要先请求并执行js文件发送ajax获取数据并生成html结构渲染(
_生生不息_·2023-07-17 14:15

React学习笔记（三）Hook使用

一、简介：Hook是React16.8的新增特性。它可以让你在不编写class的情况下使用state以及其他的React特性。ReactHook使得函数组件的功能得到了极大的增强二、Hook代替class的好处：以下是使用ReactHook和类组件同时实现计数器功能的示例：1.使用class:importReact,{Component}from'react';classCounterextend
缘来如此09·2023-07-14 10:05

react学习笔记之三--State

State概述state可以理解成vue中的data，没学过vue也不要紧，就相当于设置一个页面的全局变量，设置的同时也要设置setter，这样就能实现更新state并重新渲染组件，定义的规则如下：const[index,setIndex]=useState(0);这里的index是变量名，setIndex是inedx的set函数，用来进行赋值（只能用这个函数进行赋值，不能使用=来赋值。），最后的
ArmadaDK·2023-06-22 00:33

React学习笔记（一）DOM、元素

一、一个最简单的react页面：ReactDOM.render(Hello,world!,document.getElementById('root'));它将在页面上展示一个“Hello,world!”的标题。react简单的一个Hello,world看着貌似很复杂，后面将会逐步二、何为DOM元素?首先上段helloworld中用到了一个ReactDOM，那么react中dom是什么意思呢？在网
缘来如此09·2023-06-19 07:25

React学习笔记（二）组件详解（上）

一、组件的概念：当你开始学习React的时候，你会了解到React组件是React应用程序的基本构建块。组件是一个隔离的、可重复使用的代码块，由HTML元素、其他组件或自定义的UI元素组成，组件也就是react的核心思想，如何封装和抽象组件至关重要二、组件的分类：1.函数组件是以函数的形式定义的组件，没有状态或生命周期方法。例如：functionMyComponent(props){returnH
缘来如此09·2023-06-19 07:20

React学习笔记（上）

1、React简介1.1react是什么？React用于构建用户界面的JS库。是一个将数据渲染为HTML视图的开源JS库。React应用程序是由组件组成的。一个组件是UI（用户界面）的一部分，它拥有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面。1.2为什么学？1.原生JS操作DOM繁琐，效率低2.使用JS直接操作DOM,浏览器会进行大量的重绘重排3.原生JS没有组件化编码方案，代码复
山雀~·2023-06-09 05:36

React学习笔记九-高阶函数与函数柯里化

此文章是本人在学习React的时候，写下的学习笔记，在此纪录和分享。此为第九篇，主要介绍高阶函数与函数柯里化。高阶函数，和函数的柯里化，是学习react的拓展，方便以后优化代码，更好的学习react。目录高阶函数案例高阶函数定义函数的柯里化函数柯里化的定义柯里化小案例不用柯里化的写法高阶函数案例先把上一笔记里面的案例，拿出来：这个案例就是，两个输入框分别是用户名和密码，输入用户名和密码，点击登录按
啊啊啊啊啊威·2023-06-07 15:08

React学习笔记2-初识React

这篇七个点：1环境搭建，2JSX，3组件，4数据流，5生命周期，6React与DOM，7实例1环境搭建1.1引用ReactCDNTitleReactDOM.render(bolala,document.getElementById('example'))1.2利用create-react-app脚手架npminstall-gcnpm--registry=https://registry.npm.t
波拉拉·2023-04-21 06:42

react学习笔记

使用create-react-app脚手架搭建项目npxcreate-react-appmy-appcdmy-appnpmstartJSX语法中，如果我们要使用自己创建的组件组件名必须以大写字母开头如App组件的render元素必须写在一个div标签内部有时会影响布局效果。自定义组件可通过引入Fragment占位符替换最外层div标签则组件最外层不会有任何标签包裹。响应式设计思想和事件绑定JSX语
职场丧尸·2023-04-13 11:11

react学习笔记

react学习index.jsimportReactfrom'react';importReactDOMfrom'react-dom';importAppfrom'./App';ReactDOM.render(,document.getElementById('root'));ReactDOM的render函数可以把App组件挂载到id为root的节点下。注意一定要引入react包,是一个jsx语
三天两觉_·2023-04-11 11:27

React学习笔记（三）

组件的生命周期React中组件也有生命周期，也就是说也有很多钩子函数供我们使用,组件的生命周期，我们会分为四个阶段，初始化、运行中、销毁、错误处理(16.3之后)初始化在组件初始化阶段会执行constructorstaticgetDerivedStateFromProps()componentWillMount()/UNSAFE_componentWillMount()render()compon
千锋HTML5学院·2023-04-08 15:33

React学习笔记——使用redux调试工具

安装chrome浏览器插件下载工具依赖包npminstall--save-devredux-devtools-extension注：在Chrome中下载了扩展程序后，必须要安装工具依赖后才能生效
小姚同学要继续加油呀·2023-04-05 06:44
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他