React学习第2页

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

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

React学习计划-React16--React基础（三）收集表单数据、高阶函数柯里化、类的复习

1.收集表单数据包含表单的组件分类受控组件——页面中所有输入类的DOM,随着输入，把值存维护在状态里，需要用的时候去状态里取值（推荐，避免了过渡使用ref）非受控组件——页面中所有输入类的DOM，现用现取受控组件示例：非受控组件示例：2.高阶函数高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数若A函数，调用的返回值依

化作繁星·2023-12-22 09:56

react学习（笔记）

react特性声明式：jsx与html标签相似，是mvc层的v层基于组件：应用广泛：web,vr,安卓，苹果react使用两个库react：基础核心，创建元素，组件功能react-dom：提供Dom库（适用于web开发）react脚手架作用：配置环境（打包环境，编译测试等）导入一些必要的库如：react/react-dom命令：npxcreat-react-app项目名npx的好处是可以避免全局安

养羊得亿·2023-12-21 23:21

React学习计划-React16--React基础（一）虚拟DOM与JSX

1.初识虚拟DOM描述什么是虚拟DOM呢？本质是Object类型的对象（一般对象）我们为什么要了解虚拟DOM呢?很简单，因为React要用我们第三点会使用React分别使用js和jsx创建虚拟DOM，在此呢，我们先要了解两大js库：react.js：react的核心库react-dom.js：用于支持react操作DOM注意：加development表示开发模式的库开始进入对比分析我们先使用用js

化作繁星·2023-12-21 06:44

React学习计划-React16--React基础（二）组件与组件的3大核心属性state、props、ref和事件处理

1.组件函数式组件（适用于【简单组件】的定义）示例：执行了ReactDOM.render(,...)之后执行了什么？React解析组件标签，找到了MyComponent组件发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中类组件（适用于【复杂组件】的定义）示例：执行了ReactDOM.render(,…)之后执行了什么？React解析组件标签，找到了MyC

化作繁星·2023-12-21 06:34

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学习网址，扩展安装，工程化创建一、React学习网址官网：https://react.dev/中文网：https://zh-hans.react.dev/上面个的网站只有函数组件没有类组件，有类组件的官网在下面类组件官网

梦醒了_该正视自己了·2023-12-14 14:02

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

react学习--react-redux的使用

Redux的核心思想是通过一个单一的状态树来管理应用的状态，状态的修改通过纯函数（reducers）来进行，从而使状态变化可追踪和可预测。1、安装Redux：在项目中安装Redux库和React-Redux（用于React绑定的库）。npminstallreduxreact-redux2、创建Reduxstore：在应用的入口文件中创建Reduxstore。这个store将包含整个应用的状态。//

努力学习的廖同学·2023-12-05 17:17

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_路由

淮里没有猫·2023-11-28 11:21

React学习之围棋记谱本制作（四）前端开发初步完成

今天初始完成了页面端的开发工作。把遇到的问题说一说。（1）开始时，对javascript的对象或数组拷贝、赋值理解不是很透，折磨了我好长时间。理解了对象或数组的赋值，实际上相当于C语言中的指针地址赋值，就知道了保存每一步的棋盘状态，要把对象拷贝一个副本，避免后继的变化，影响保存的状态。（2）JQuery提供了对象拷贝的方法，extend。这个方法有深拷贝、浅拷贝之分，如果浅拷贝，不复制对象中的对象

wallimn·2023-11-28 03:16

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

初级前端-react学习（1）

day01-day02一、yarn的使用：1.安装yarn注意：为了省事，不要用npmiyarn-g，去安装yarn，而是去下载压缩包，保证注册表和环境变量的硬写入，后期通过yarn安装全局包时方便2.初始化一个新项目yarninit3.添加依赖包``yarnadd[package]``yarnadd[package]@[version]``yarnadd[package]@[tag]4.将依赖项

小耳朵xxl·2023-11-22 21:02

React知识点汇总

本文章用于记录React学习过程中遇到的知识点React17生命周期来源于官网:生命周期初始化挂载阶段-由ReactDome.render()触发constructor()staticgetDerivedStateFromProps

情系半生e·2023-11-21 08:49

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学习 antd2升级到antd5； Class 中使用 React Hooks，并且能够互相传值

antdmobile2升级到antdmobile5官网上有两种升级方法，使用antd-mobile-v2安装和通过别名安装v5。第一种方法要把项目中所有对antd-mobile的引入都替换为antd-mobile-v2，成本比较大，而且也没有足够时间去测试替换后的项目。因此这里采用第二种安装方式，别名安装。antd官网的升级指南一.antd2升级到antd5$npminstall--saveant

略略略_略·2023-11-20 06:10

React学习资料整理

1.react的简单使用React的简单使用//创建组件classPersonextendsReact.Component{render(){return(Hello{this.props.name})}}//渲染组件ReactDOM.render(,document.getElmentById('root'))2.创建虚拟DOM的到页面的两种方式方式1（推荐）//JSX的语法格式//1.创建虚拟

一只小泰迪·2023-11-19 16:27

React学习总结

文章目录前言--->React学习总结一、JSX二、react状态1.类组件中状态使用2.事件绑定改变this的指向3.状态在函数组件中的使用三、react类组件声明周期（钩子函数）生命周期函数很多，需要掌握

努力学习的有方·2023-11-19 16:54

React学习（React高级）

学习目标：提示：这里可以添加学习目标例如：一周掌握Java入门知识学习内容：提示：React实战二、React高级入门1、脚手架（1）什么是脚手架脚手架本质上就是一个工具插件，可以通过执行指定命令的形式完成项目文件的远程同步！备注：为什么要使用脚手架手工构建项目的方式效率太低，通过脚手架将项目按照固定的格式进行快速构建，提高开发效率！（2）React脚手架React提供了create-react-

城南的夏·2023-11-19 09:45

React + hooks + Ts 实现将后端响应的文件流（如Pdf）输出到浏览器下载

React篇一些关于react学习与总结这篇是记录开发中关于实现将后端响应的文件流（如Pdf）输出到浏览器下载，基于React+Hooks+Ts。

画月的亮·2023-11-16 21:17

React学习（五）— Hooks

目录一、前言二、ReactHooks2.1useState2.2useEffect2.2.1组合componentDidMountcomponentDidUpdate2.2.2componentDidMount2.2.3组合componentDidMountcomponentWillUnmount2.3useMemo2.4useCallback2.5useContext2.6useRef三、总结一

小绵杨Yancy·2023-11-15 13:43

React学习笔记---入门篇

React学习笔记（一）一、介绍1、React是什么？

丑小鸭变黑天鹅·2023-11-14 12:48

React学习——封装组件

前端实习经验分享一：从学习React技术开始（以官方文档为基础，跟随师父了解公司项目业务逻辑），为公司封装组件进一步了解React最大特点——模块化。也感受到封装组件的重要性。下面我会通过一个案例总结封装组件的场景、过程、技巧。封装组件（一）优点使结构清晰；组件复用；拓展组件；（二）场景当多个复杂组件具有层层嵌套关联时，为了增加代码可视性考虑封装组件。比如：这样一个经典的列表页，由查询表单Form

七月的冰红茶·2023-11-12 12:39

React学习:05 React组件之间如何传递数据

React组件之间如何传递数据使用react组件的时候我们经常会把一些常用的组件组合到一起,定义成一个新的组件,一般前端页面会有一个父组件,这个组件中定义了当前页面中所需的变量,如何把这些变量传递给子组件呢?react的设计哲学表明:React中的数据流是单向的，并顺着组件层级从上往下传递。也就是说当你设计好页面的功能和组件的布局是,就要考虑好state应该安放在哪里,一般这个state都会放到顶

这里不提提纳里·2023-11-12 07:30

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