react

React学习笔记18-非受控组件

1.非受控组件的定义 非受控组件即状态不是完全由React的state来控制的组件 React要编写一个非受控组件,可以 使用 ref 来从 DOM 节点中获取表单数据,就是非受控组件。 import React, { Component } from 'react' export default ......
组件 笔记 React 18

React学习笔记16-属性props

1.属性的定义 props 是正常是外部传入的,组件内部也可以通过一些方式来初始化的设置,属性不能被组件自己更 改,但是你可以通过父组件主动重新渲染的方式来传入新的 props。 这就是React中的单向数据流 2.属性的特点 属性是描述性质、特点的,组件自己不能随意更改,必须由父组件进行更改 3. ......
属性 笔记 React props 16

React学习笔记17-属性VS状态

相似点: 都是纯js对象,都会触发render更新,都具有确定性(状态/属性相同,结果相同) 不同点: 1. 属性能从父组件获取,状态不能 2. 属性可以由父组件修改,状态不能 3. 属性能在内部设置默认值,状态也可以,设置方式不一样 4. 属性不在组件内部修改,状态要在组件内部修改 5. 属性能设 ......
属性 状态 笔记 React 17

React 点击复制按钮,复制浏览器内容,可粘贴到其他地方

效果: 代码: /** * 复制浏览器内容 * @param templateString 需要复制的内容 */ export const copyBrowerString = (templateString: string) => { const textArea = document.creat ......
按钮 浏览器 地方 内容 React

React 中复制静态文件到 build的文件夹中

React 中复制静态文件到 build的文件夹中 环境:umi 框架 前提:在跟目录下放置了Dockerfile 文件,在build时需要自动复制到dist文件夹里面。 1. 安装 copy-webpack-plugin 插件 2. .umirc.ts 文件中使用copy命令 import { d ......
文件 静态 文件夹 React build

React面试题: 我是否可以在项目中不断使用React.Component来优化项目

React.PureComponent 是 React 的一个组件,主要用于性能优化,可以避免不必要的渲染。它的主要特点是: 如果组件的 props 和 state 没有发生变化,则不会重新渲染(此处原理类似React.memo)。 可以自动检查深层对象和数组,判断其是否需要重新渲染(是深层比较)。 ......
项目 React Component 不断

React面试题: useCallBack()与React.memo的区别与使用常见场景

React.usecallback与React.memo的区别: React.useCallback 和 React.memo 是两种不同的优化方式: 主要功能: 它们都可以避免不必要的渲染,提高 React 应用的性能。 React.useCallback 是 Hoc(高阶组件)的解决方案,可以用 ......
React useCallBack 场景 常见 memo

React实战教程推荐

教程推荐 平台慕课网 博主正在创建网站,招募一批前端+Laravel开发的自学团队,无偿提供大量课程,前期当徒弟后期当同事未来未来希望是合作者。欢迎参观:ihopeso.cn React18+Next.js13+TS,B端+C端完整业务+技术双闭环 前端框架及项目面试-聚焦Vue3/React/We ......
实战 教程 React

直播小程序源码,react-native自定义文本输入框

直播小程序源码,react-native自定义文本输入框 Examples from props: ... _onChange = (label, value) => { this.setState({ [label]: value }); }; render() { return ( <View ......

【Bug解决】Can‘t perform a React state update on an unmounted component. This is > a no-op, but it...

在 React 应用程序中我们遇到以下警告消息: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your applica ......
component unmounted perform update React

React Native在非组件的地方使用页面跳转(interceptors拦截器处跳转页面)

官方文档:https://reactnavigation.org/docs/navigating-without-navigation-prop/ 修改APP.js import { NavigationContainer } from '@react-navigation/native'; imp ......
页面 interceptors 组件 地方 Native

App开发:Vue Native vs React Native

随着移动应用开发框架数量的增加,2018年Vue Native的引入让开发者有能力使用Vue.js代码来创建React Native移动应用。 因为 Vue Native 围绕 React Native 包装了 Vue.js 语法,所以框架非常相似。例如,两者都是跨平台框架,这意味着相同的代码库可以 ......
Native React App Vue vs

React学习笔记15-13-setState同步异步问题

先说结论: setState处在同步的逻辑中会异步更新状态,更新真实dom。 连续调用 setState 不会连续进行虚拟dom的对比和页面的更新 setState处在异步的逻辑中,同步更新状态,更新真实dom。 1.同步状态 先看同步状态 /* eslint-disable react/no-di ......
setState 笔记 问题 React 15

[Vue]React、Vue中的key有什么作用? (key的内部原理)

1. 虚拟DOM中key的作用: key是虚拟DOM对象的标识,当状态中的数据发生变化时,Vue会根据[新数据]生成[新的虚拟DOM] 随后Vue进行[新虚拟DOM]与[旧虚拟DOM]的差异比较,比较规则如下: 2. 对比规则: (1).旧虚拟DOM中找到了与新虚拟DOM相同的key: ①.若虚拟D ......
Vue key 原理 作用 React

ElectronReactAdmin跨平台管理系统|electron27+react18后台模板EXE

基于electron27+react18+arco电脑端后台管理程序EXE实例ElectronRAdmin。 electron27-react18-admin 基于跨平台技术Electron集成Vite.js构建桌面端React18后台管理系统应用解决方案。支持dark/light主题、中英文/繁体 ......

使用react-native-drawer,跟着官网配置仍报错,Error: [Reanimated] `valueUnpacker` is not a worklet, js engine: hermes

在使用react-native-drawer组件时,编译项目报错 试了许多的方法,最后通过在一篇博客中找到解决方法https://blog.csdn.net/lxyoucan/article/details/121851577 因为在使用react-native-drawer时也需要使用react- ......

React学习一:环境搭建、JSX基础、事件绑定、组件使用、样式控制

一、概念 React由Meta公司研发,是一个用于构建Web和原生交互界面的库。 react中文文档地址:https://zh-hans.react.dev/learn React的优势 相较传统基于DOM开发的优势:组件化的开发方式;不错的性能 相较于其他前端框架的优势:丰富的生态;跨平台支持 二 ......
样式 组件 事件 环境 基础

react

使用jsx 使用js ......
react

react-query和SWR总结

react-query和SWR都是用来控制请求的库,是用来解决缓存,loading、error状态控制,乐观修改,报错重试等问题的,和axios不在一个层面 SWR是Next.js团队的 react-query是@tanStack的,先已更名 @tanStack/query,支持 React, So ......
react-query react query SWR

基于Electron27+Vite4+React18搭建桌面端项目|electron多开窗口实践

前段时间有分享一篇electron25+vite4搭建跨桌面端vue3应用实践。今天带来最新捣鼓的electron27+react18创建跨端程序、electron多开窗体(模拟QQ登录窗口切换主窗口)、自定义无边框窗口拖拽导航栏的一些知识分享。 electron团队更新迭代比较快,目前稳定版本已经 ......
Electron electron 桌面 项目 Vite4

给react native 添加transform translateY动画报错:Transform with key of "translateY" must be a number:{translateY“:0}

初学react native,想实现一个相机扫描功能时,报错,报错描述如标题 这是我的主要逻辑代码 const fadeAnim = useRef(new Animated.Value(0)).current; const move = () => { fadeAnim.setValue(0); A ......
translateY 画报 quot Transform transform

2023-10-24 react+ts 遍历双重对象嵌套数组

useEffect(() => { if (value) { const arr = value; for (const k in arr) { console.log(k, arr[k]); arr[k].key = arr[k].id; arr[k].title = arr[k].name; f ......
数组 对象 react 2023 10

继续学习webpack+react路由+页面刷新404+nginx部署404+webpack魔法注释

继续学习 webpack 继续我们上一次的操作之后,我们已经可以实现从零到亿自定义运行打包一个 webpack 项目了,接下来我们继续更深层级接触他 我们上次使用的自动清理打包文件的插件在我们 webpack5.*之后呢,可以直接进行配置不需要引入插件,只需要在 wenpack.pro.config ......
webpack 路由 注释 404 页面

react native的新架构

Starting from version 0.68, React Native provides the New Architecture, which offers developers new capabilities for building highly performant and re ......
架构 native react

关于 React 性能优化和数栈产品中的实践

我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。 本文作者:的卢 引入 在日常开发过程中,我们会使用很多性能优化的 API,比如像使用 memo、useMemo优化组件或者值,再比如使用 shouldComponent ......
和数 性能 React 产品

2023-10-24 Too many re-renders. React limits the number of renders to prevent an infinite loop. ==》组件在渲染过程中执行了任务导致状态更新,从而触发了无限循环

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

React技术栈支援Vue项目,你需要提前了解的

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

React18 新特性一览

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

React框架的基本运行原理与组件定义方式

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

React学习笔记14-dangerousSetinnerHtml指令

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