todolist react
React笔记-渲染列表Key(五)
React学习笔记-渲染列表Key(五) 渲染列表需要添加key属性 import React from "react" export default class LearnKey extends React.Component { state = { infos : [ {name : 'Bob' ......
ReactHub：我用 ChatGPT 搞了一个 React 的资源导航网站，谁有我用心啊！
大家好，我是DOM哥。 图谱年年有，今年我来盘！ 之前已经盘完了 Vue 的技术图谱，今天来盘 React 的。不管你是资深 React 用户，还是刚入门想学习 React 的小白，相信都能帮助到你 ......
React Native之React基础
React Native 的基础是React， 是在 web 端非常流行的开源 UI 框架。要想掌握 React Native，先了解 React 框架还是很有帮助的。主要理解三个概念：组件、状态和 JSX。 使用组件的方式描述 UI 使用组件的方式描述 UI在 React 中，所有的 UI 都是通 ......
react 杂记2
大括号 - JavaScript 的“新世界”{变量} {方法（param）} {逻辑} {逻辑+html} {}里面还是可以应用变量 再用{}获取即可 函数 （onClick），变量 (movieName) ，插槽（children），都是作为props传递给子组件的 添加事件 注意：传递的是一个 ......
react + antd table列表自动滚动
/** * @file: table列表自动滚动，鼠标划入滚动暂停，鼠标划出滚动继续 */ const [dataSource, setDataSource] = useState([]) const [timer, setTimer] = useState() useEffect(() => { ......
理解 React 中的 useEffect、useMemo 与 useCallback
useEffect 先理解 useEffect 有助于学习 useMemo 和 useCallback。因为 useMemo 和 useCallback 的实现实际上都是基于 useEffect 的。 useEffect 是 React 中的一个很重要的 Hook，用于执行副作用操作。什么是副作用？ ......
[React Typescript] ComponentProps
Blog: https://www.totaltypescript.com/react-component-props-type-helper Get any Prop type from html element: import { ComponentProps } from "react"; t ......
react-navigation 页面跳转
使用react-navigation 在进行页面跳转的时候,遇到些问题,现在来总结下,主要是web和android 的差异 react-navigation 页面跳转方法 navigation navigate - 转到另一个屏幕，找出需要采取的操作 replace - 用新屏幕替换当前屏幕 pus ......
react native UIManager.measure 方法废弃 替代
从 React Native 0.63 开始，UIManager.measure 方法已被废弃并计划在未来的版本中移除。 取而代之的是使用 useRef 和 useLayoutEffect 钩子函数， 结合 measure 方法的异步调用实现对组件的测量。 具体实现方法如下： 首先通过 useRef ......
vite+vue3+ts简单例子todolist
1、安装vite $ npm init vite@latest √ Project name: ... vue-el-admin √ Select a framework: » Vue √ Select a variant: » TypeScript Scaffolding project in D ......
react useCallback获取元素实时高度
import React, { useCallback, useState } from 'react'; import { Button } from 'antd'; const maxHeight = 540; const Component = () => { const [textHeigh ......
React Native之JSX语法
一、什么是 JSX JSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖，也是react.js的使用基础。React在不使用JSX的情况下一样可以工作，然而使用JSX可以提高组件的可读性，因此推荐使用JSX。 二、JSX 的基 ......
umi +react 搭建项目细节记录
配置请求域名，有umirc.ts文件可以直接在该文件加 proxy: { '/api': { // 检测域名后面带 /api/ 的路径 target: 'http://192.168.0.90', // 要请求的域名或IP地址 'changeOrigin': true, // 'pathRewrit ......
第二节：react-redux详解、分模块、调式工具等
一. 二. 三. ! 作 者 : Yaopengfei(姚鹏飞) 博客地址 : http://www.cnblogs.com/yaopengfei/ 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权 ......
react 用父组件状态控制子组件状态方案
react 想用父组件的状态来控制子组件的状态。有时我们可能想在父组件里设置子组件某个状态的值，这时我们应该怎么实现代码呢？ 法一：把需要共享的状态放在子组件的参数里 比如下面这个 MyTestSubModal 子组件，有 2 个状态：visible 和 loading，分别使用 setVisibl ......
Uncaught Error: Objects are not valid as a React child (found: object with keys {content, key, duration}). If you meant to render a collection of children, use an array instead（转）
转自：react报错 Uncaught Error: Objects are not valid as a React child (found: object with keys {a} ... 报错信息分析 Uncaught Error: Objects are not valid as a R ......
Vite + React 项目，在 Webstorm 中的 tailwind css 无法自动补全问题
问题 根据官网的安装步骤，Install Tailwind CSS with Vite 安装完成后，在 Webstorm 中 Tailwind 始终无法自动补全，查看 Webstorm 的日志，提示报错 Tailwind CSS: Tailwind CSS: require() of ES Modu ......
React 中 Router的相关面试题
一、 请你说说react的路由是什么？React的路由是纯前端的路由，就是根据hash或browser path的变化，框架内封装好了方法，可以自由的切换DOM展示，来模拟页面或局部页面被替换的目的；让浏览器不用刷新，也能获取想要的页面结构，保存内存数据，提升用户体验 二、React-Router ......
闲聊 React hook，我们聊的是什么？
React hook 的由来 React hook 的由来，其实也可以看作是前端技术不断演进的结果。 在 world wide web 刚刚诞生的洪荒时代，还没有 js，Web 页面也都是静态的，更没有所谓的前端工程师，页面的内容与更新完全由后端生成。这就使得页面的任意一点更新，都要刷新页面由后端重 ......
(一 ).react官网阅读 ———描述UI
这个系列笔记，会从头阅读react 官网文档内容，记录阅读笔记。 从react 官网首页可以(最重要部分是中间)，分为两大块 内容： 学习React | API参考 快速入门： 介绍了常见的react概念：包括嵌套组件，状态提升，Hook等； 同时还给出了react 框架思想： ###学习React ......
React介绍
title: 01-React介绍 publish: true 虚拟DOM和diff算法 在学习 React 之前，我们需要先了解两个概念：虚拟DOM、diff算法。 虚拟DOM 问题描述： 假设我们的数据发生一点点的变化，也会被强制重建整颗DOM树，这么做，会涉及到很多元素的重绘和重排，导致性能浪 ......
React Navive初识
title: 11-React Navive初识 publish: true 搭建开发环境 官方文档：https://reactnative.cn/docs/getting-started.html 安装Node、homebrew、Watchman 安装 homebrew： 安装 watchman： ......
React路由的使用
title: 07-React路由的使用 publish: true React路由的使用 使用React路由之前，我们需要先安装 react-router-dom这个包。比如： yarn add react-router-dom 代码举例： （1）index.html <!DOCTYPE html ......
React的单向数据绑定
title: 06-React的单向数据绑定 publish: true 单项数据绑定 在 Vue 中，可以通过 v-model 指令来实现双向数据绑定。但是，在 React 中并没有指令的概念，而且 React 默认不支持 双向数据绑定。 React 只支持，把数据从 state 上传输到 页面， ......
11-react使用props.children 处理父子组件之间的传值
// props.children 组件传值 import { Component } from "react" import reactDom from "react-dom" // 床架一个 createRef 函数 用来创建 ref 对象 const Hello = (props) => { ......
10-react不同层级的组件之间的数据传递数据 createContext 上下文
// 组件传值 props 接收传递过来的数据 import ReactDom from "react-dom" import { createContext, Component } from "react" // createContext is useed to create a contex ......
09-react的组件传值 props
// 组件传值 props 接收传递过来的数据 import ReactDom from "react-dom" import { Component } from "react" // 类组件中使用函数组件 和 类组件 注意区分不同的组件使用不同方式接收数据 const Hellow = (pro ......
08-react修改state数据驱动视图UI的更新【注意和vue的区别】
// setState 修改状态 如果是直接修改页面不会改变 使用 setState 修改数据 才会驱动视图的改变 // setState 的原理：修改玩状态之后会调用 render 函数 import ReactDom from "react-dom" import { Component } f ......
07 - react 唯一修改state状态的方式 setState
// setState 修改状态 如果是直接修改页面不会改变 使用 setState 修改数据 才会驱动视图的改变 // setState 的原理：修改玩状态之后会调用 render 函数 import ReactDom from "react-dom" import { Component } f ......