react学习笔记

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从零基础入门到实战，完成企业级项目简书网站开发

终于追完整部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

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

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

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

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

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

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

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

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学习笔记——4. 虚拟dom中处理动态数据

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

react学习笔记——3. jsx语法规则

jsx是什么？jsx全称：javaScriptXML是react定义的一种类似于XML的js扩展语法，是js+xml。xml早期用于存储和传输数据，是标签加数据的形式。只不过后来慢慢的变成了json其本质就是React.createElement(标签,属性,内容)方法的语法糖其作用是为了简化虚拟domjsx语法规则定义虚拟dom时，不写引号。虚拟dom标签中混入js表达式时，需要使用大括号。这里
玄昌盛不会编程·2023-12-23 05:58

react学习笔记——2. 虚拟dom

为什么使用jsx虚拟dom的创建方式有两种，这里新加一个需求，要求虚拟dom包含id属性。通过jsx，也就是之前的方式，只不过初始化虚拟dom的时候需要加一个id属性。通过js，这种方式不需要babel，初始化时的代码如下，使用React的createElement方法2_使用js创建虚拟dom/***步骤：*1、创建虚拟dom*2、渲染虚拟dom到页面*///1、创建虚拟dom，使用React的
玄昌盛不会编程·2023-12-23 05:57

09.React学习笔记.生命周期函数

一.React组件分类##定义方式：函数组件(function)，类组件(class)。是否需要维护状态：无状态/有状态组件。职责：展示型/容器型(逻辑结构)组件。这些概念重叠很多，最主要是关注数据逻辑和UI展示的分离：函数，无状态，展示型组件主要关注UI的展示。类，有状态，容器型组件主要关注数据逻辑。其他还有异步，高阶组件等。二.类组件##组件名称必须大写字符开头（类&函数），JSX中将大写解析
_生生不息_·2023-12-20 10:12

55.React学习笔记.hook 原理浅析

在讲hook原理之前，我们需要先简单了解一下Fiber。一.FiberReact16推出的，用于提高当前浏览器显示界面性能的东西，减少卡顿等待。我们电脑屏幕都有一个刷新率（Hz），电脑屏幕上的东西，CPU提供数据，GPU将其绘制出来；电脑屏幕按固定的频率，从缓存中取出（帧）并显示；缓存防止屏幕出现撕裂；浏览器刷新频率一般与电脑一致，浏览器根据电脑传来的vsync（同步信号）来刷新。GUI渲染和JS
_生生不息_·2023-12-20 08:11

14.React学习笔记.setState异步/同步分析

一.为什么使用setState##直接更改this.state.counter不会引起界面刷新，这是因为React不知道state发生了改变。React必须通过setState告诉React数据发生了改变。App继承了Component中的setState方法。回溯源码Component类中，原型上设置了setState方法。二.setState异步更新##changeText(){//2.set
_生生不息_·2023-12-18 11:40

react 学习笔记 李立超老师 | (学习中~)

文章目录react学习笔记01入门概述React基础案例HelloWorld三个API介绍JSXJSX解构数组创建react项目(手动)创建React项目(自动)|create-react-app事件处理
nuise_·2023-12-07 00:03

react学习笔记（一）- 安装及初始化

react安装首先，react可以直接使用cnd方式引入，也可以基于webpack或browserify的方式使用，以下示例为webpack下载node、npm这个就不多讲了，百度安装node全局安装react如果之前安装过则跳过，如果安装时间距离现在较长，建议卸载create-react-app之后重新安装,否则可能出现生成的文件夹内只有node_modules文件夹和package.json文
池塘里快乐的小跳蛙·2023-12-05 17:43

54.React学习笔记.自定义hook练习-localStorage存储

需求：希望在组件中对一个变量name操作，一旦给name设置一个新的值，就把name存储到localStorage(不同于sessionStorage)中；如果下次再打开网页，重新加载的时候，希望可以从localStorage中把name的值加载进去。也就是对name的所有操作，都通过localStorage做一个存储。importReact,{useState,useEffect}from're
_生生不息_·2023-12-04 10:21

【超全】React学习笔记 下：路由与Redux状态管理

React学习笔记React系列笔记学习上篇笔记地址：【超全】React学习笔记上：基础使用与脚手架中篇笔记地址：【超全】React学习笔记中：进阶语法与原理机制React路由概念与理解使用1.引入React
Xy丶Promise·2023-12-03 09:44

【超全】React学习笔记 上：基础使用与脚手架

React学习笔记React系列笔记学习中篇笔记地址：【超全】React学习笔记中：进阶语法与原理机制下篇笔记地址：【超全】React学习笔记下：路由与Redux状态管理React简介React是一个由
Xy丶Promise·2023-12-03 09:14

【超全】React学习笔记 中：进阶语法与原理机制

React学习笔记React系列笔记学习上篇笔记地址：【超全】React学习笔记上：基础使用与脚手架下篇笔记地址：【超全】React学习笔记下：路由与Redux状态管理React进阶组件概念与使用1.React
Xy丶Promise·2023-12-03 09:07

React学习笔记

一、几个概念库和框架库（library）：小而巧，可以很方便的从一个库切换到另一个库，但是代码几乎不会改变。框架（framework）：大而全，框架提供了一整套完整的解决方案，在项目中间想要切换框架是困难的模块化和组件化模块化：是从代码的角度进行分析，把可复用的代码抽离为单个模块，便于项目的维护和开发组件化：从UI界面的角度进行分析，把可复用的UI元素，抽离为单独的组件二、React的基础概念1、
骆骆呀·2023-11-30 04:06

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

Babel转化可以从babel官网中react转码器来查看jsx代码对应转换为的React.createElement(,,)的相应内容。image.pngimage.png可以直观看出，转换后的内容实际上是React.createElement(,,)方法间的不断嵌套（针对子元素）。/#PURE#/代表其为纯函数
_生生不息_·2023-11-29 00:31

React学习笔记——路由的基本使用

路由理解当使用hash或history的方式去改变网址路径(path)时，并不会刷新网页或发出请求通过监听hash或history的变化来动态的切换组件的显示据此，可以维护path(路径)跟component(组件)的一对一的路由而管理这些route(路由)的就是router(路由器)路由步骤路由的实现，是基于BOM的history，从而实现网页不刷新，局部更新页面。点击导航链接，引起路径变化路径
Kevin11Yao·2023-11-28 11:26

React学习笔记05_路由

第5章：React路由5.1.相关理解5.1.1.SPA的理解单页Web应用（singlepagewebapplication，SPA）。整个应用只有一个完整的页面。点击页面中的链接不会刷新页面，只会做页面的局部更新。数据都需要通过ajax请求获取,并在前端异步展现。5.1.2.路由的理解什么是路由?一个路由就是一个映射关系(key:value)key为路径,value可能是function或co
淮里没有猫·2023-11-28 11:21

46.React学习笔记.hooks useReducer - useState替代方案

useReducer是useState的一种替代方案：某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分；或者，这次修改的state需要依赖之前的state时，也可以使用；一.useReducer的使用image.png参数一reducer纯函数参数二initializerArg初始化值：对基本类型可以直接写；若是对象类型，先解构。importReact,
_生生不息_·2023-11-27 07:57

47.React学习笔记.hooks useCallback

userCallback实际目的是为了进行性能的优化。如何进行性能优化?useCallback会返回一个函数的memoized（记忆的，拼写无误）值；在依赖不变的情况下，多次定义的时候，返回的值是相同的。参数回调函数；依赖项：无依赖时，执行原来的函数；依赖项改变时，函数进行一个更新。返回值返回一个函数的memoized值。一.什么情况不能进行性能优化？每次渲染时，我们组件中的局部变量都要重新定义一
_生生不息_·2023-11-26 10:28

React 学习笔记 - create-react-app踩坑 & eslint

React学习笔记-create-react-app踩坑&eslint问题解决方案eslintrc配置文件解析parserOptions解析器配置env代码运行环境extendsrulespluginsParser
绿胡子大叔·2023-11-24 09:10

50.React学习笔记.hooks useImperativeHandle

useImperativeHandle不容易理解，笔者循序渐进讲一讲自己的理解。回顾一下ref和forwardRef结合使用：通过forwardRef可以将ref转发到子组件；子组件拿到父组件中创建的ref，绑定到自己的某一个元素中。importReact,{useRef,forwardRef}from'react'constHYInput=forwardRef((props,ref)=>{ret
_生生不息_·2023-11-21 06:22

React学习笔记---入门篇

React学习笔记（一）一、介绍1、React是什么？
丑小鸭变黑天鹅·2023-11-14 12:48

React 学习笔记 - 利用高阶组件和React Hooks实现权限拦截

React学习笔记-利用高阶组件和ReactHooks实现权限拦截思路实现注入权限列表抽离Context向页面注入权限列表的HOC向根组件注入权限含有权限拦截功能的HOC无权限时显示的组件权限拦截HOC
绿胡子大叔·2023-11-11 08:52

React学习笔记——lazyLoad

当未使用懒加载时，页面一打开，就将所有的路由组件给加载到页面了如果路由组件很多，且用户不会真正访问到那么多的路由组件，那么就相当于加载了不需要的多余组件因此，可以使用路由懒加载，当用户真正需要访问的时候再去请求如下import{lazy,Suspense}from'react'import{Route}from'react-router-dom'constHome=lazy(()=>import(
Kevin11Yao·2023-11-10 12:57

react学习笔记-06 -- Redux & react-redux & redux-thunk

ReduxRedux中文文档安装npminstall--saveredux原理图storestore(仓库)存放整个应用的state。createStore创建仓库import{createStore}from'redux';importreducerfrom'./store/reducer';letstore=createStore(reducer)//createStore还有第二个参数，表示
weixin_47360323·2023-11-10 11:03

React学习笔记——react-redux的使用

前言react-redux不同于redux，前者的诞生是由于react出品方认为使用rudux的react使用者太多了，进而Facebook公司自己出了react-redux来更好的优化react的使用。使用react-redux安装react-reduxyarnaddreact-redux在react-redux中，将组件分为两类：UI组件、容器组件1.UI组件1)只负责UI的呈现，不带有任何业
Kevin11Yao·2023-11-10 11:02

React学习笔记之redux与react-redux

React学习笔记之redux与react-redux前言安装redux使用原理定义静态变量constant.js实现ActionCreators(count_action.js)实现Store(store.js
小白wwj·2023-11-10 11:01

【React】React学习笔记4（Redux、React-Redux）

React学习笔记4（Redux、React-Redux）零l说明一lRedux基础（一）Redux工作流程（二）Redux核心API1、store对象2、createStore(reducer)3、applyMiddleware
Artlex·2023-11-10 11:30

react学习笔记---redux

redux01-redux精简版---redux原理图如下：02-redux完整版03-redux异步action版04-react-redux基本使用05-react-redux的优化06-react-redux数据共享版07-react-redux开发者工具的使用08-react-redux最终版01-redux精简版—redux原理图如下：redux精简版总结（1）去除Count组件自身的状
苏米素·2023-11-10 11:59

React学习笔记---redux

redux一、redux理解1、学习文档2、redux是什么3、什么情况下需要使用redux4、redux工作流程二、redux的三个核心概念1、action2、reducer3、store三、引出Redux编程的案例1、使用纯react去编写2、精简版Redux3、完整版Redux4、异步Action版四、redux的核心API总结五、react-redux的基本使用（官方出的插件库，和Redu
丑小鸭变黑天鹅·2023-11-10 11:56

慕课网 react学习笔记-- react-redux 进行数据管理（部分）

一、首先在src下创建store文件夹二、在store下面创建index和reducer代码如下index.js如下import{createStore}from'redux'importreducerfrom'./reducer'conststore=createStore(reducer)exportdefaultstorereducer.js如下constdefaultState={focu
睿骞·2023-11-10 11:25

Web全栈架构师（二）——React学习笔记（3）

React学习笔记项目实战资源页面布局用户登录认证商品列表加购物车界面React原理React核心APIJSX自定义实现Reactkreact.jskreact-dom.jskvdom.js总结PureComponentsetStatediff
讲文明的喜羊羊拒绝pua·2023-11-10 04:54

React学习笔记

一、基础1.概念React是用于构建用户界面的JavaScript库（只关注视）2.特点声明式编程：React使创建交互式UI，当数据变动时React能高效更新并渲染合适的组件。组件化:构建管理自身状态的封装组件，然后对其组合以构成复杂的UI。高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。灵活：无论你现在使用什么技术栈，都可通过引入React来开发新功能。3.高效原因使用虚拟(
EUEY·2023-11-07 05:51

19 React学习笔记.React中的样式

组件化天下的CSS组件化开发中合适的CSS应该符合以下条件：可以编写局部css：css具备自己的局部作用域，不会随意污染其他组件内的原生；可以编写动态的css：可以获取当前组件的一些状态，根据状态的变化生成不同的css样式；支持所有的css特性：伪类，动画，媒体查询等；编写简洁方便，符合一贯的css风格；一.内联样式官方推荐的一种写法：style接受一个小驼峰命名属性的JS对象，而不是CSS字符串
_生生不息_·2023-11-06 11:14

React学习笔记

React学习笔记概述React是用于构建用户界面的JavaScript库。现在前端领域最为流行的三大框架：VueReactAngular其中，Vue和React是国内最为流行的两个框架。
zui初的梦想·2023-11-01 07:00

05-3.React学习笔记.虚拟DOM（部分）

虚拟DOM的创建过程##image.png我们通过React.createElement最终创建出来一个ReactElement对象，函数->对象。原因是React利用ReactElement对象（JS对象体现）组成了一个JS的对象树，JS的对象树就是虚拟DOM。image.png我们将babel转义过的jsx语法通过控制台输出。结果如上图。image.png直接输出jsx语法，与步骤2结果相同。
_生生不息_·2023-10-29 10:39
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他