react学习

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自定义组件）

一、React自定义组件1.1，函数式声明组件顾名思义，就是将一个函数作为一个组件（函数名第一个字母大写是组件，小写是函数）/***1.声明一个简单的函数式组件*/functionMyComponent(){return(我是函数式声明的组件我没有this,因为默认开启了严格模式)}/***2.调用组件*/ReactDOM.render(,document.getElementById('test
天体1997·2023-07-30 05:38

尚硅谷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学习day13--antd组件：Grid栅格

Grid栅格https://ant.design/components/grid-cn/布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：1）通过row在水平方向建立一组column（简写col）。2）你的内容应当放置于col内，并且，只有col可以作为row的直接元素。3）栅格系统中的列是指1到2
我在东软打代码·2023-07-28 03:57

【React学习】JSX相关知识

1.JSX是什么？在React框架中，JSX（JavaScriptXML）文件是一种特殊的文件类型，它结合了JavaScript和XML（类似HTML）的语法，用于定义React组件的结构和内容。JSX允许在JavaScript代码中编写类似HTML的标记，使得构建用户界面更加直观和易于理解。importReactfrom'react';classMyComponentextendsReact.C
周兴·2023-07-28 02:16

【React学习】受控组件

1.受控组件的概念在React框架中，受控组件是一种使用组件的内部状态（state）来管理其值的组件。组件的状态受到React组件生命周期方法和事件处理函数的控制。通过受控组件，父组件可以完全控制子组件的数据流。2.受控组件的特点状态控制：受控组件将其值存储在组件的状态中，通过this.state调用。这意味着组件的值，取决于其状态的当前值。当状态发生变化时，组件会重新渲染，并反映最新的状态值。受
周兴·2023-07-28 02:45

【React学习】React中ref的用法

ref可以让react方便快捷地拿到DOM元素，ref的用法主要有两种。用法1：回调形式的ref在ref中传入一个回调函数，回调函数的默认参数就是元素对象，给组件加一个属性用来存储元素对象。classWelcomeextendsReact.Component{get=()=>{console.log(this.c.innerHTML)}render(){return(this.c=a}>hello
周兴·2023-07-28 02:15

【React学习】React中如何发送请求？

1.axios安装在React中，我们选择axios发送请求。axios的安装，在项目终端里输入：npminstallaxios在package.json文件中查看是否安装成功2.使用axios请求高德地图天气查询数据创建Weather.jsx组件importReact,{Component}from'react'importaxiosfrom"axios"exportdefaultclassHe
周兴·2023-07-28 02:15

【React学习】React父子组件通讯

1.父到子传值在React框架中，父组件可以通过props将数据传递给子组件。子组件通过读取props来访问父组件传递过来的数据。当父组件的props发生变化时，React会自动重新渲染子组件以确保子组件中使用的数据保持同步。父组件importReact,{Component}from'react';importChildComponentfrom'./ChildComponent';classP
周兴·2023-07-28 01:06

React入门学习笔记1

在本笔记中，我将进行一步步的React学习，包
STATICHIT静砸·2023-07-28 00:31

react学习18-React 使用setState()更新类组件的state

setState分析修改数据是异步的//setState更新数据是异步的this.setState({num:this.state.num+1},()=>{//该函数如果触发，那么就说明状态已经修改完成console.log(this.state.num)})不要频繁调用setState//多次频繁调用setState，内部会进行合并，只更新最后一次//不要频繁调用setState方法this.s
木蓝茶陌*_*·2023-07-27 08:18

react学习16-React路由react-router动态路由和编程式导航

React-router动态路由路由的路径可以进行模糊匹配路由映射的path可以是模糊匹配classDynamicRouterextendsReact.Component{render(){return(动态路由{/*配置路由的链接*/}张三李四图书一图书二{/*路由组件的显示位置*/})}}functionUserInfo(props){letuserId=props.match.params.
木蓝茶陌*_*·2023-07-27 08:17

react学习17-React高阶组件

高阶组件高阶组件HOC（hightorderedcomponent）withRouter就是高阶组件高阶组件的本质其实就是一个函数，该函数参数接收一个组件，返回值依然是一个组件，返回的组件一般会比参数组件多一些props属性组件代码复用的一种方式（高阶组件可以向别的组件中注入通用的props属性）//实现一个高阶组件//参数表示输入的组件functionwithRouter(InputCompon
木蓝茶陌*_*·2023-07-27 08:17

react学习4-脚手架create-react-app的基本使用

脚手架create-react-app的基本使用使用脚手架create-react-app可以快速生成一个项目，并且提供友好的开发调试环境。脚手架用法一：安装脚手架包create-react-app(全局安装)npminstallcreate-react-app-g使用命令创建项目--use-npm的作用是使用npm管理依赖包默认情况，如果本地安装了yarn，那么会默认采用yarn进行依赖包管理如
木蓝茶陌*_*·2023-07-27 08:47

react学习6-React 组件接收数据props和类组件状态state

组件接收数据props必须继承React.Component才可以成为一个类组件render方法的作用：产生组件的模板，属于react的核心api，名称固定必须通过this.props获取父组件传递数据，是只读的，不可以修改。classNihaoextendsReact.Component{render(){console.log(this.props)letuname=this.props.un
木蓝茶陌*_*·2023-07-27 08:47

react学习10-React 表单受控和非受控组件的基本使用

React表单受控和非受控组件的基本使用在React里，HTML表单元素的工作方式和其他的DOM元素有些不同，这是因为表单元素通常会保持一些内部的state。受控组件渲染表单的React组件还控制着用户输入过程中表单发生的操作。被React以这种方式控制取值的表单输入元素就叫做“受控组件”。对于受控组件来说，输入的值始终由React的state驱动。不同的表单项数据处理（受控组件）：input、s
木蓝茶陌*_*·2023-07-27 08:47

react学习13-React 组件化—children(插槽)详解

children(插槽)children的作用类似于Vue中插槽的概念。children属性名固定，它是React的核心API。classTestextendsReact.Component{render(){return(测试Children:{this.props.children})}}classChildrenTestextendsReact.Component{render(){retu
木蓝茶陌*_*·2023-07-27 08:47

react学习3-JSX条件渲染和列表渲染

JSX条件渲染js形式条件渲染functionshowForm(flag){//根据参数flag的状态显示不同内容if(flag){//显示登陆框return登陆框}else{//显示注册框return注册框}}元素变量functionshowForm(flag){//根据参数flag的状态显示不同内容letform=null;if(flag){form=登陆}else{form=注册}retur
木蓝茶陌*_*·2023-07-27 08:16

react学习【入门】

react学习步骤1、安装依赖包学习yarnaddreact@17react-dom@172、引入react/umd下的对应开发包react.development.js和react-dom.development.js
原谅我很悲·2023-07-24 19:30

React学习笔记

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

React(从0到1，小白入门到熟悉)

1.1初识React学习React之前你要掌握的JavaScript基础知识判断this的指向class类ES6语法规范npm包管理器原型、原型链数组常用方法模块化1.1.1官网(1
允谦呀·2023-07-21 04:34

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学习之旅

作为目前较为火爆的前端开发语言，React吸引了大多数前端开发者的目光。技术日新月异，需要我们保持技术敏感性，在一个个小Flag中不断突破自己，让自己每天都能进步1%。下面，收集整理了丰富多彩的学习资料，供大家选择。在雕琢自己技术的路上，你不是独行者，希望每个人都有收获，都能成长...文档资料准备1、ES入门（http://es6.ruanyifeng.com/）React1、React入门教程（
YBFQ_WH·2023-07-15 02:54

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学习(一) JSX及元素渲染

JSX全称为JavaScriptXML，字面意思就是在JS中写XML（HTML）格式的代码原理是利用了babel将JSX编译为使用react.createElement()，react本身也是使用这个方法插入节点，但其代码结构非常繁琐，不够直观优雅。使用JSX可以像写html一样写结构，结构直观也提高开发效率。ShoppingListInstagramWhatsApp使用（1）使用JSX创建rea
一羊啦啦·2023-07-14 00:45

【React学习】React更新渲染原理

当我们调用setState之后发生了什么？react经历了怎样的过程将新的state渲染到页面上？一次react更新，核心就是对虚拟dom进行diff，找出最少的需要变化的dom节点，然后对其进行相应的dom操作，用户即可在页面上看到更新。但react作为广泛使用的框架，需要考虑更多的因素，考虑多个更新的优先级，考虑主线程占用时长，考虑diff算法复杂度，考虑性能。。等等，本文就来探讨一下reac
前端开发小司机·2023-07-14 00:44

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学习[二]

React学习[二]React组件介绍组件的创建方式使用函数创建组件使用类创建组件抽离为单独JS文件事件对象事件绑定事件对象有状态组件和无状态组件state的基本使用setState()修改状态事件绑定
致力于前端学习的小李同学·2023-06-20 16:51

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 思维导图笔记》

react在react学习中，需要安装两个包[email protected]@16.1.1react这个包是专门用来创建react组件、组件生命周期等等react-dom里面主要封装了和DOM
yk-ddm·2023-06-17 21:43

Web前端-React学习

React基础React概述React是一个用于构建用户界面的JavaScript库。用户界面：HTML页面（前端）React主要用来写HTML页面，或构建Web应用如果从MVC的角度来看，React仅仅是视图层（V）,也就是只负责视图的渲染，而并非提供了完整的M和C的功能。React有如下几个特点：声明式：你只需要描述UI（HTML）看起来是什么样，就跟写HTML一样，React只负责渲染UI，
GY-93·2023-06-15 23:05

React学习[一]

React学习[一]React概述React特点声明式基于组件学习一次，随处可用React基本使用React使用方法说明React脚手架意义脚手架初始化项目npx命令介绍在脚手架中使用reactJSXJSX
七更醉·2023-06-15 22:59

React学习踩坑

问题：JSX元素“h1”没有相应的结束标记解放方案：该问题与VisualStudio代码的语言模式有关。要解决此问题，请将语言模式从“JavaScript”更改为“JavaScripReact”或仅更改为“react”（两个作品中的任何一个）。您可以在VSC底部工具栏更改语言模式。点击它，搜索并选择JavaScriptReact。
七更醉·2023-06-15 22:59

react学习

简介起源于Facebook与传统mvc的关系：轻量级的视图层库，将视图抽象成组件特点声明式设计高效通过虚拟dom，减少真实dom交互灵活适配已知的库或框架jsxjs语法扩展组件代码可复用单向响应数据流减少重复代码，比传统绑定简单虚拟dom真实dom操作消耗性能，react把真实dom转化为js对象树（就是个对象）ps：真实的dom属性太多了，而且频繁的操作视图重绘回流，而且进行了diff算法之后，
六经注我·2023-06-15 17:40

React学习之setState的实现机制

在react中，通过管理状态来实现对组件的管理，通过this.state()来访问state，通过this.setState方法来更新state，当this.setState方法被调用时，react会重新调用render来重新渲染UI。一、setState的全部实现过程：1、enqueueSetState将state放入队列中，并调用enqueueUpdate处理要更新的Component2、如果
青艹止·2023-06-12 14:17

后端开发浅学react

博客笔记来自于学习柴柴老师在b站分享的react学习视频，仅供学习参考，学习视频是来自于b站的：柴柴_前端教书匠，视频链接：React入门到实战(2022全网最新）_哔哩哔哩_bilibili和react
未来很长，别只看眼前·2023-06-11 00:18

React学习之路-准备工作

一、3WReact是什么？React起源于Facebook的内部项目，因为该公司对市场上所有JavaScriptMVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。为什么要学React？Vue、React、Angular是目前最主流的三大前端框架，React便是其中的佼佼者。在很多的企业招聘信息中，你都会看到React
AnyaPapa·2023-06-11 00:42

React学习之路-目录结构

目录结构node_modules—存放项目依赖包public—存放网站的静态资源文件favicon.icon—网站偏爱图标index.html—主页面（重要）logo192.png—logo图logo512—logo图manifest.json—应用加壳的配置文件robots.txt—爬虫协议文件src—存放源代码，基于ES6规则的React代码App.css—App组件的样式App.js—App
AnyaPapa·2023-06-11 00:10

【前端学习】React学习资料

React是一种开源的JavaScript库，用于构建用户界面。它由Facebook开发并维护，已经成为了当今最流行的前端库之一。与其他框架不同，React主要专注于视图层（View），旨在通过声明式、组件化的方式来构建复杂的UI界面。React的核心思想是将应用程序的UI分解成小且独立的组件，这些组件可以相互嵌套和复用。每个组件都有自己的状态和属性，当这些状态或属性发生变化时，组件会自动重新渲染
后端研发Marion·2023-06-09 12:16

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 学习》

目录React学习基础知识ReactReact对象ReactDOM对象JSXReact学习个人博客地址：基础知识VS-Code开发工具基本使用//常用快捷键!---使用英文状态下的“!”
yk-ddm·2023-06-07 12:07

react学习

reactJSX在JSX语法中，你可以在大括号内放置任何有效的JavaScript表达式。例如，2+2，user.firstName或formatName(user)都是有效的JavaScript表达式。为了便于阅读，我们会将JSX拆分为多行，建议将内容包裹在括号中你可以在if语句和for循环的代码块中使用JSX，将JSX赋值给变量，把JSX当作参数传入，以及从函数中返回JSX你可以通过使用引号，
kiterumer·2023-06-07 00:04
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他