随记react

React报错： Too many re-renders. React limits the number of renders to prevent an infinite loop. 重新渲染过多。React限制渲染次数，以防止出现无限循环。 解决方案：查看你最近写的代码，比如我写了一个函数组件 ......

写在前面 react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，而vue的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听， 当属性变化的时候，响应式的更新对应的虚拟dom react的思路通过js来生成html， 所以设计了jsx，还有通过js来 ......

升级： React 18 相较于之前的React 版本来说 主要有以下几个方面的升级： 1 增加了一些新的API 2 底层逻辑的优化 3 React Current Mode 并发模式的实现 4 同时需要注意的是React 18 不支持IE浏览器。 5 新增了一部分hooks以及服务端渲染的API ......

React框架的基本运行原理 React的本质是内部维护了一套虚拟DOM树，这个虚拟DOM树就是一棵js对象树，它和真实DOM树是一致的，一一对应的。 当某一个组件的state发生修改时，就会生成一个新的虚拟DOM，让它和旧的虚拟DOM通过Diff算法进行对比，生成一组差异对象。 然后变量差异对象， ......

1.使用场景 dangerouslySetInnerHTML指令能将字符串当做html解析 相当于vue中的v-html指令 一般我们用来渲染富文本返回的html文本 2.使用方法 {this.state.tolist.map((item,index)=>{ return ( <span dange ......

写一个todoList小案例来体验一下组件的状态以及状态维护的注意点 import React, { Component } from 'react' import './css/01-index.css' export default class App extends Component { s ......

初始化一个web项目 使用npm init -y 初始化一个项目 在项目目录下创建src, dist文件夹，创建webpack.config.js配置文件 然后在src文件夹下创建index.js, index.html文件 然后安装依赖包 npm i jquery -S 安装jQuery包 npm ......

1.配置Node.js 运行环境 （可以不用配置） 1> wget https://nodejs.org/dist/v12.18.1/node-v12.18.1-linux-x64.tar.gz 2> sudo tar -zxv f node-v12.18.1-linux-x64.tar.gz 3> ......

在vue中我们一般是通过v-for指令来进行循环渲染的，但react中没有封装相关指令供我们调用 在react中我们可以通过数组的map方法来进行数据的循环渲染 import React, { Component } from 'react' export default class App ext ......

状态就是组件的数据，由组件自己设置和更改，也就是说由组件自己维护，使用状态 的目的就是为了在不同的状态下使组件的显示不同(自己管理) 定义状态的方法 可以在构造函数中定义也可以直接在类中通过变量的形式来定义 /* eslint-disable eqeqeq */ import React, { Co ......

用法 1.给标签设置ref="username" 通过这个获取this.refs.username , ref可以获取到应用的真实dom 2. 给组件设置ref="username" 通过这个获取this.refs.username ,ref可以获取到组件对象 写法 import React, { ......

React采用on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写 onclick , React里的事件是驼峰 onClick ，React的事件并不是原生事件，而是合成事件。 事件回调的几种写法 1.直接在组件内定义一个非箭头函数的方法，然后在render里直接 ......

2023/2024 年 React 组件库 与 相关库 推荐 asdf ​ 展开目录 精挑细选的 React 库 , 质量非常的高. 建议每一个都点进去官网看一看. (知乎不支持表格中的超链接 , 只能用这种普通文本了) 这篇文章会一直持续更新下去.... UI 组件库 ⭐ Material-UI  ......

背景： 由于项目使用的expo-router，一开始时在退出登录是如下实现的： import { router } from "expo-router"; ... router.replace("/my/login/login"); ... 使用expo-router的router.replace方 ......

最近需求，要在b端展示上传的pdf文件。实现方式有很多，记录一下我们最常用的pdf.js //安装 "pdfjs-dist": "2.0.402" //引入 import * as pdfjs from 'pdfjs-dist' import * as pdfjsWorker from 'pdfjs ......

1.使用行内样式 想给虚拟dom添加行内样式，需要使用表达式传入样式对象的方式来实现： // 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号 <p style={{color:'red', fontSize:'14px'}}>Hello world</p> 行内样式需要 ......

Ant Design中表单验证输入框默认值initialValue不更改值会验证不通过（react） 更改前 <Form.Item label="用户标识" name="id" rules={[ { required: true, message: '用户标识不能为空！', }, ]} > <Inp ......

一个项目肯定是由多个组件构成的，组件之前必然会存在相互嵌套的关系 在react中如果想要将一个组件嵌入到另外一个组件中 只需要在父组件的render函数的返回值中放入子组件即可 请看下面代码 import React, { Component } from "react" class Navbar ......

函数式组件即在React中通过函数的方式来声明一个组件 import React from "react" function App() { return ( <div> 函数式组件 <div>hhh</div> </div> ) } /* 16.8之前 //无状态 16.8之后 react hoo ......

ES6的加入让JavaScript直接支持使用class来定义一个类，react创建组件的方式就是使用的类的继承， ES6 class 是目前官方推荐的使用方式，它使用了ES6标准语法来构建，看以下代码 import React from 'react' import ReactDOM from ' ......

现在许多东西更新了，react全家桶可能我的技术栈也要更新一下，于是查询官网，先找个方便点的直接起飞，然后看能不能冲出宇宙 首先安装一下 next去， 这个东西是个桶， npx会执行远端的命令，如果本地没有的话，它会自动搜索无端npm的包下载然后执行 npx create-next-app@late ......

package.json 中的更改： 增加： "homepage": "./", "build": { "productName": "xxxx", "appId": "com.xxx.win", "directories": { "output": "dist" }, "files": [ "di ......

这几天突然要来个react项目；听说还比较复杂；项目组内就两个人会react还在忙，整组主要是用vue；这不，这种‘狗都不干’的事，被安排到我身上了，那就学吧； 一、研究代码结构 不得不说，这目录结构搞得有点复杂，算是我接触中除了乾坤和electron之外，相当复杂的了，慢慢阅读吧； 看懂了，原来是 ......

问题背景： react native开发app，设置的app图标在安卓中会被切割，导致周围的留白被切掉，看起来很奇怪。甚至有些文字内容被切割掉，显示不全。 在不同手机上，icon可能会被切割成各种圆角，如果留白不够，内容可能会被切割。在iOS上icon也有相应的规范，比如需要1024尺寸等。 解决方 ......

1.JSX语法 JSX 将 HTML 语法直接加入到 JavaScript 代码中，再通过翻译器转换到纯 JavaScript 后由浏览器执行。 在实际开发中，JSX 在产品打包阶段都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码 更加直观并易于维护。 编译过程由Babel 的 ......

基于react18.x+vite4+arco-design自研中后台管理系统解决方案ReactAdmin。 react-vite-admin 基于vite4搭建react18.x后台管理项目。使用了react18 hooks+arco.design+zustand+bizcharts等技术实现权限管 ......

一 升级react 18 React 18 改变 所有setState 都是异步，不管是否在react的“管辖范围内”。原来在定时器，在监听函数中是同步的。 Root 书写方式 需要改变 Router 需要改变？？ 二 启用并发渲染 useDeferredValue const [text, set ......

在一个 action 被分发(dispatch) 后，useSelector() 默认对 select 函数的返回值进行引用比较 ，并且仅在返回值改变时触发重渲染。但是，不同于 connect()，useSelector()并不会阻止父组件重渲染导致的子组件重渲染的行为，即使组件的 props 没有 ......

react开发需要引入多个依赖文件:react.js,react-dom.js,分别又有开发版本和生成版本，creat-react-app里已经帮我们把这些东西都安装好了。把通过CRA创建的 工程目录下的src目录情况，然后在里面重新创建一个index.js写入以下代码。 //从react的包当中引 ......

1.全局安装create-react-app npm install -g create-reat-app 2.创建一个React项目 create-react-app myapp 注意命名规范不能大写，中文等 如果不想全局安装，可以直接使用npx npx create-react-app myap ......