react学习

React学习笔记

1、React初步认识React构建Web和原生交互界面的库，相较于其它前端框架的优势，具有丰富的生态跨平台支持。1.1、React的开发依赖开发React必须依赖三个库：react：包含react所必须的核心代码；react-dom：react渲染在不同平台所需要的核心代码；babel：将jsx转换成React代码的工具；1.2、VSCode代码片段我们在前面练习React的过程中，有些代码片段
26:28·2025-02-06 04:47

React学习(十)-React中编写样式CSS(styled-components)

虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文|川川VX-ID:suibichuanji点击文末左下方阅读原文,可看更多内容前言React是一个构建用户界面的js库,从UI=render()这个等式中就很好的映射了这一点,UI的显示取决于等式右边的render函数的返回值.而编写React应用,就是在编写
itclanCoder·2025-02-03 17:20

React学习之相关代码库（三十六）

本章将讲述React代码库的组织，约定，和它的实现方式。如果你想更加关注React，或者说作为开发贡献者，对React进行一些修改，这篇博客或许可以帮到你。当然，我们没必要去过度的关注React应用的约定，因为其中有很多是历史遗留问题，后续版本可能会被pass掉。1.自定义模板系统在Facebook，他们内部人员使用了一个叫做Haste的自定义模板系统，这个系统非常类似CommonJS规范，也使用
77458·2025-02-02 05:42

react学习

react框架的选择低代码、BI前瞻性bs架构，网页客户端去使用react就是用来代替DOM的，dom操作，构建前端界面的react-native直接开发ios，安卓，原生应用虚拟dom，操作react，影响dom，中间人现在的dom和当前的dom做比较看哪个发生了变化，做最小的修改1、虚拟dom2、兼容性3、性能好，避免做一些多余的操作声明式编程：结果为导向命令式编程：过程为导向基于组件开发，组
guhy fighting·2025-01-30 13:00

React 入门第九天：与后端API的集成与数据管理

在React学习的第九天，我集中学习了如何与后端API进行集成。这一步是将静态的React应用转变为动态、可交互的关键。通过与后端通信，我们可以从服务器获取数据、发送用户输入以及处理复杂的业务逻辑。
Caleb-niu·2024-09-08 06:45

React学习12----请求接口数据

react获取服务器APi接口的数据：react中没有提供专门的请求数据的模块。但是我们可以使用任何第三方请求数据模块实现请求数据我们使用axios插件，来请求接口数据使用如下：查看文档：axioshttps://www.npmjs.com/package/axios1、安装axios模块npminstallaxios--save/npminstallaxios--save2、在哪里使用就在哪里引
zhaihaohao1·2024-09-03 03:47

React 入门第六天：理解组件生命周期与效果

在React学习的第六天，我深入探讨了组件的生命周期以及如何使用React的生命周期方法和副作用处理功能。
Caleb-niu·2024-09-01 03:53

React学习day18

Provider批量传递store对象,求和案例react-redux优化容器组件和UI组件整合一个文件。无需自己给容器组件传递store，给包裹一个即可。使用react-redux后也不用自己再检测redux中状态的改变，容器组件可以自动完成这个工作。.mapDispatchToProps也可以简单的写一个对象一个组件要和redux“打交道”要经过几步(1)定义好UI组件—不暴露(2)引入con
我在东软打代码·2024-09-01 03:53

React学习打卡Day05

1.属性props使用let{‘属性名’}=this.props接收属性可接收多个2.属性验证Navbar.protoTypes={验证代码}可以写在对象内部，需要加static关键字importReact,{PureComponent}from'react'importproptypesfrom'prop-types'exportdefaultclassNavbarextendsPureComp
信徒不伤·2024-09-01 02:20

React 入门第七天：探索状态管理与Context API

在React学习的第七天，我深入了解了React的状态管理机制，特别是如何通过ContextAPI来实现跨组件的状态共享。
Caleb-niu·2024-08-28 20:07

03.React学习日记.JSX绑定事件-传递参数

1.原生js事件获取image.png2.组件中方法事件获取发生该事件后，React内部回调函数，会自动传入一个event对象。注意：这两者不是同一种类型的对象，前者为js原生事件对象，后者为React内部合成的事件对象，功能属性基本一样。推荐：箭头函数是最方便的方法：image.pngiage.png注意：事件发生时，React内部调用函数，执行函数onClick.call(undefined,
_生生不息_·2024-08-28 08:57

17.React学习笔记.受控非受控组件

一.refs的使用##React开发模式中，通常情况不需要，也不建议直接操作DOM元素，但是某些特殊的情况，确实需要获取到DOM进行某些操作。管理焦点，文本选择/媒体播放；触发强制动画；集成第三方DOM库。如何创建refs来获取对应的DOM？三种方式。1.1创建方式importReact,{PureComponent,createRef}from'react'exportdefaultclassA
_生生不息_·2024-02-13 16:40

53.React学习笔记.自定义hook练习-scroll

如果我们想在多个组件中获取当前滚轮的位置，并对其进行操作，这时候就需要将逻辑给抽离出来。importReactfrom'react'importuseScrollPositionfrom'../hooks/scroll-position-hook';exportdefaultfunctionCustomScrollPositionHook(){constposition=useScrollPosi
_生生不息_·2024-02-13 12:33

React学习笔记

文章目录1.react脚手架初始化项目2.HooksuseStateuseEffectuseContextuseReduceruseMemouseCallbackuseRef3.APIforwardRef1.react脚手架初始化项目npxcreate-react-appmy-app2.Hooks以use开头的函数，只能在组件或自定义Hook的最顶层调用，不能在条件语句、循环语句或其他嵌套函数内调
张豆豆94·2024-02-12 23:24

19 React学习笔记.AntDesign

AntDesign组件库一.原生React添加className方法{/*原生React中添加class方法*/}我是标题1我是标题2我是标题2)二.第三方库classnames原生React太繁琐，借助第三方库classnames。写法类似Vue中添加类名。{/*classnames库添加class*/}我是标题4我是标题5我是标题6我是标题7我是标题8我是标题9我是标题9三.AntDesign
_生生不息_·2024-02-09 19:41

React前端框架学习 基础知识@stage3---week5--day2

ReactReact学习版本：16.xReact老版本项目：15.xreact官网说17.x会使用的一些技术React应用级脚手架CRAdvaumicreate-react-app【CRA】React官网提供的脚手架脚手架
英俊潇洒美少年·2024-02-06 13:24

React详解（基础知识）——react学习part01

React详解（基础知识）——react学习part01react简介1.官网2.介绍描述3.React的特点4.React高效的原因React的使用1.基本使用1.1创建虚拟DOM的两种方式1.2渲染虚拟
哈喽……·2024-02-03 20:58

React学习记录

大概一年半之前用过React，后来因为工作的原因再也没有接触到React。前端日新月异，室友（也是同行）的提醒，让我有了更强的危机感，模块化开发已是前端基本技能。抛弃各种框架本身的运用来说，更为重要的是它们提供的编程思维。提高自己专业水平，迫在眉睫。我想在上记录自己的一些学习笔记，自己实在太菜。今天在React中看到一个demo。有一段代码如下：constnewItem={text:this.st
一抹春绿误行程·2024-02-03 02:32

React从零基础入门到实战，完成企业级项目简书网站开发

终于追完整部React剧~全部代码可见GitLab项目地址：https://gitee.com/xxxxxl17/jian-shu-react学习笔记：React从零基础入门到实战，完成企业级项目简书网站开发
Xxxxxl17·2024-02-03 01:09

react学习笔记3

一、key与diffing算法react中的key:可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识便于react区分。一个元素的key最好是这个元素在列表中拥有的一个独一无二的字符串。通常，我们使用来自数据的id作为元素的key，当元素没有确定的id时，你可以使用他的序列号索引index作为key。虚拟DOM中key
此间诗意杀人地·2024-01-31 15:34

React 基础学习01

以下是React学习基础，面试中也是常问的点击我获取更多资源1.React类组件中的setState是异步还是同步？
小江的博客·2024-01-30 12:04

22.React学习笔记.JavaScript纯函数

纯函数：函数式编程中的一个概念。wiki定义：符合以下条件：输入相同，输出相同；输出和输入值以外的信息&状态无关，也和由I/O设备产生的外部输出无关。该函数不能有语义上可观察的函数副作用：确定的输入，一定有确定的输出；函数执行过程中，不能产生副作用。重要性：放心编写，放心使用。-所有React组件必须像纯函数一样保护它们的props不被更改。-redux中，reducer也必须是纯函数。
_生生不息_·2024-01-29 03:47

React(3): React 实现卖座App

简介之前在学习React的时候，在bilibili看到React学习视频，于是马上着手React版本的卖座App开发技术栈//前端ReactTypeScriptAntd-MobileDayjs3D-selectiontailwindcss
一个抱抱一首歌·2024-01-26 09:00

15.React学习笔记.setState内容补充

setState数据的合并setState改变state中的部分属性，并不会覆盖原有的属性，回溯源码ReactUpdateQueue中的processUpdateQueue，getStateFromUpdate方法中。调用的实际是如下方法：Object.assign({},this.state,{message:"你好啊,wec"})image.png实际上内部将更改过的属性和原属性做了个合并+拷
_生生不息_·2024-01-25 01:33

vue 和 react语法对比异同点

vue和react学习异同点本文不做两个框架比较，只对比了两个框架的语法对比，不代表任何观点，盗版必究，本人唯一qq：421217189欢迎大家一起来学习探讨，壮我大前端（本文markdown直接生成，
weixin_30896763·2024-01-22 16:55

react学习之---jsx转成虚拟dom的过程

jsx----经过Bebal编译返回可供React.createElement()可调用的对象—React.createElement调用后生成虚拟dom—diff算法—生成新的真实dom经过babel编译：import{greet}from‘./utils’;constApp={greet(‘scott’)};ReactDOM.render(App,document.getElementById
小白分享·2024-01-22 14:48

React学习笔记(一）

知识点及简介知识点知识点简介ReactJS:使用React的语法来编写一些网页的交互效果ReactNative:使用React的语法来编写原生APPReactVRReact.js-version16.3.2版本ReactFiberReact.js相比Vue.js灵活性更大，对于处理非常复杂业务时，技术方案选择性会更多；Vue.js则提供了更丰富的API，实现功能更简单，但由于API多，因此灵活性就
滨滨_57b5·2024-01-20 04:17

React高阶组件--render props、高阶组件(React学习笔记_06)

React-renderprops和高阶组件1，renderprops模式使用步骤1，创建一个组件，在组件中提供复用的状态逻辑代码2，将要复用的状态作为props.render(state)方法的参数，暴露到组件外部3，使用props.render()的返回值作为要渲染的内容class组件名extendsReact.Component{state={}render(){returnthis.pro
小王子__·2024-01-19 17:58

react学习之路二：路由守卫-判断登录状态

以下内容全部是vue转react学习过程中的笔记，难免有错误，仅供参考一、vue的路由守卫vue-router提供了内置的APIrouter.beforeEach()在这个方法里面，我们可以判断登录状态来拦截路由的跳转二
qinleo007·2024-01-19 04:49

react学习-生命周期函数

在开始react之前首先要了解的就是关于react执行的过程，那么，就让我们来了解了解react相关的生命周期函数。在这，将react的生命周期分为三个部分。1.组件初始化1.1getDefaultProps()设置默认的props值，getDefaultProps()方法被调用一次并缓存1.2getInitialState()可直接在constructor中定义this.state，只调用一次，
HeyYoo_·2024-01-18 04:37

【React源码 - Diff算法】

介绍在React学习中，Diff算法(协调算法)，想必我们并不陌生，简单来说就是一个对比新老节点寻找差异，然后找出最小的一个变化集，最后对这个最小变化集进行最小的DOM操作，本文将从源码来分析在React
weixin_44273311·2024-01-16 14:58

由Vue转React的自学文档

react学习文档由vue3转学react，之前从未接触过react，自学了一遍感觉还好，容易上手。期间的一些笔记，后续有更深的见解持续更新。
雨燕容若·2024-01-12 12:33

16.React学习笔记.React更新机制

一.发生更新的时机以及顺序##image.pngprops/state改变render函数重新执行产生新的VDOM树新旧DOM树进行diff计算出差异进行更新更新到真实的DOM二.React更新流程##React将最好的O(n^3)的tree比较算法优化为O(n)。同层节点之间相互比较，不跨节点。不同类型的节点，产生不同的树结构：如果该节点不同，会将旧tree中该节点的子树全部删掉。直接生成新的子
_生生不息_·2024-01-09 19:31

React学习三 —— react组件的三大属性（state、props、refs）

组件三大核心属性React组件有很多属性，在其中有三个属性最为核心和重要：statepropsrefsstate让你可以通过数据驱动视图，让视图自动根据数据的改变而改变。props可以提高组件的灵活性，通过外界传值让组件根据用户特性而呈现不同的视图。refs能够减少用户对DOM的直接操作，而可以通过获取代理节点而提高开发效率和页面性能。一、State如果需要在组件中维护一些数据，那么可以使用sta
沧州刺史·2024-01-05 20:00

React学习：状态(State) 和 属性(Props)

props是组件对外的接口，state是组件对内的接口。组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件的props属性进行传递，因此props是组件对外的接口。组件除了使用上层组件传递的数据外，自身也可能需要维护管理数据，这就是组件对内的接口state。根据对外接口props和对内接口state，组件计算出对
秋の本名·2024-01-05 20:25

React学习笔记

React学习笔记，从类组件到函数式组件Hooks，再到Router6，零基础全套笔记01-React入门02-React组件与模块03-React事件处理&生命周期&Diffing算法04-React
风吟Pro·2024-01-05 18:09

react学习摘要

虚拟dom在react中，render执行的结果并不是真正的DOM节点，结果仅仅是轻量级的JavaScript对象，我们称之为virtualDOM。虚拟DOM具有batching(批处理)和高效的Diff算法。由虚拟DOM来确保只对界面上真正的部分进行实际的DOM操作。比较innerHTML和VirtualDOM的重绘过程如下：innerHTML:renderhtmlstring+重新创建所有DO
mah93·2024-01-03 08:27

React学习day1

React介绍React由Meta公司开发，是一个用于构建Web和原生交互界面的库JSX基础JS表达式在JSX中可以通过大括号语法{}识别JavaScript中的表达式，比如常见的变量、函数调用、方法调用等等使用引号传递字符串使用JavaScript变量函数调用和方法调用使用JavaScript对象代码示例constcount=100functiongetName(){return'ysk'}fu
~努力努力再努力k·2024-01-01 19:45

React学习计划-React16--React基础（八）react-redux使用与优化，纯函数介绍

笔记gitee地址学习了redux,为什么还要讲react-redux呢？redux不是专门为react所创建的,只不过在某一刻，react和redux看对眼了，所以俩人走到了一起，所以为了更好的支持redux,react官方出了react-redux来更好的支持redux1.react-redux工作流程2.案例1.求和案例react_redux基本使用明确两个概念：UI组件：不能使用任何red
化作繁星·2024-01-01 02:55

React学习计划-React16--React基础（七）redux使用与介绍

笔记gitee地址一、redux是什么redux是一个专门用于做状态管理的js库（不是react插件库）它可以用在react、angular、vue的项目中，但基本与react配合使用作用：集中式管理react应用中多个组件共享的状态二、什么情况下需要使用redux某个组件的状态，需要让其他组件可以随时拿到（共享）一个组件需要改变另一个组件的状态（通信）总体原则：能不用就不用，如果不用比较吃力才考
化作繁星·2024-01-01 02:24

React学习计划-React16--React基础（九）react新知识 hooks,路由懒加载，Fragment，Context，组件优化，render props，错误边界

1.setState更新状态的2种写法对象式的setState:setState(setChange,[callback])setChange为状态改变对象（该对象可以体现出状态的更改）callback是可选的回调函数，它的状态更新完毕，界面也更新后（render调用后才被调用）函数式的setState:setState(updater,[callback])updater为返回setChange
化作繁星·2024-01-01 01:53

React学习计划-React16--React基础（六）路由

路由一、版本5路由1.react-router-dom2.路由的使用1.基础使用安装：yarnaddreact-router-dom@5明确好界面中的导航区、展示区导航区Link标签包裹Home展示区写在Route标签进行匹配最外侧包裹一个或者2.路由组件和一般组件写法不同：一般组件：路由组件：存放位置不同：一般组件写在components文件夹路由组件一般写在pages文件夹中,接收到的prop
化作繁星·2023-12-27 17:41

React学习笔记（二）

组件的数据挂载方式属性(props)props是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的props属性是描述性质、特点的，组件自己不能随意更改。之前的组件代码里面有props的简单使用，总的来说，在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件props对象的键值。通过箭头函数创建
千锋HTML5学院·2023-12-27 12:10

41.React学习笔记.react-router-config路由统一管理

使用react-router-config库来进行路由配置。//App.js下替换那些Route{renderRoutes(routes)}//src/router/index.jsimportHomefrom"../pages/home"importAboutfrom"../pages/about"importProfilefrom"../pages/about"importUserfrom".
_生生不息_·2023-12-26 18:41

React学习记录

一、简介1、React是什么？一个将数据渲染为HTML视图的开源JavaScript库，操作DOM呈现页面。2、特点采用组件化模式，声明式编码，提高开发效率及组件复用率在reactnative中可使用react语法进行移动端开发使用虚拟DOM+优秀的diffing算法，减少与真实DOM的交互二、案例体验旧版本：16.x，新版本：18.x依赖包认识：babel.min.js：将ES6转成ES5，将J
Kw_Chng·2023-12-26 03:56

【React学习】React路由 v6

1.React路由分类React有三种路由react-router-dom：用于浏览器的路由BrowerRouter基于浏览器的historyHashRouter基于地址部分的hash值（路由带“#”）react-router-native：用于原生app的路由react-router：原生与浏览器通用部分2.路由安装在项目终端里输入npminstallreact-router-dom可以在pac
周兴·2023-12-25 15:32

20 React学习笔记.axios网络请求

使用axios发送网络请求一.发送网络请求方式传统的Ajax基于XMLHttpRequest（XHR）jQuery-Ajax，jQuery项目太大，个性化打包又不能享受CDN。FetchAPI基于原生XHR，是AJAX的替代方案，基于Promise设计，很好的进行了关注分离。Fetch是底层API，需要手动配置功能和实现。发送网络请求：手动配置Header的Content-Type，不会默认携带c
_生生不息_·2023-12-25 03:49

React学习计划-React16--React基础（五）脚手架创建项目、todoList案例、配置代理、消息订阅与发布

一、使用脚手架create-react-app创建项目react脚手架xxx脚手架：用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置（语法检查、jsx编译、devServe…）下载好了所有相关的依赖可以直接运行一个简单的效果react提供了一个用于创建react项目的脚手架库：create-react-app项目的整体技术架构为：react+webpack+es6+eslint
化作繁星·2023-12-24 08:41

React学习计划-React16--React基础（四）生命周期和diffing算法,key的作用

1.生命周期1.声命周期的三个阶段（旧）初始化阶段：由ReactDOM.render()触发—初次渲染1.constructor()2.componentWillMount()3.render()4.componentDidMount()==>常用一般在这个钩子中做一些初始化的事情，例如：开启定时器，订阅消息，发起网络请求更新阶段：由组件内部this.setState()或父组件重新render触
化作繁星·2023-12-23 06:02

react学习笔记——4. 虚拟dom中处理动态数据

如下需求方式1：直接在ul中使用{data}，是可以遍历数据的，然后如果将data改成下面形式，也是可以实现的。但是如果data是一个对象，则不能便利。constdata=[Angular,React,Vue]方式2：使用data.map处理，并返回数据，这里需要注意返回的标签中需要有key，否则会有警告，这里暂且将key设置为遍历的idx，但是其实是有问题的，以后会修改。jsx小练习//模拟数据
玄昌盛不会编程·2023-12-23 05:28
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他