![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
react全面掌握
带脑子的CV工程师
是上帝漠视了你,还是你漠视了自己的生命
展开
-
react dom的diff理解及性能优化
【代码】react dom的diff理解及性能优化。原创 2023-12-09 18:41:00 · 306 阅读 · 0 评论 -
usereducer刷新hook
usereducer原创 2023-03-08 14:09:52 · 98 阅读 · 0 评论 -
reacthook的ref循环多个子组件
ref原创 2023-02-06 16:23:42 · 785 阅读 · 0 评论 -
a标签和link的区别
本文已参与「新人创作礼」活动,一起开启掘金创作之路。原创 2022-09-03 19:54:11 · 1308 阅读 · 0 评论 -
性能优化之图片懒加载
本文已参与「新人创作礼」活动,一起开启掘金创作之路。原创 2022-09-03 19:01:22 · 344 阅读 · 0 评论 -
reactHook useState实现原理
说实话,是个正常人都看不懂let isMount = true;//一个指针,指向当前的hooklet workInProgressHook=null;const fiber = { //保存的是这个函数本身 stateNode:App, //保存对应的hooks的数据的 memoizedState:null}//每个useState都会,创建一个hook//并且通过workInProgressHook.next//串成一个链表//有很多useState 那我们怎么知道原创 2022-05-31 19:57:56 · 222 阅读 · 0 评论 -
:global用法
:global { .arco-col { &:nth-last-child(1), &:nth-last-child(2) { margin-bottom: 0; } } } :global { .arco-carousel-card .arco-carousel-item-prev { opacity: .4; transform: translateX($left-offset) ..原创 2022-01-29 17:48:06 · 2035 阅读 · 0 评论 -
react-router-dom
在这里插入代码片URL原创 2022-01-10 17:28:03 · 274 阅读 · 0 评论 -
styledcomponents和meotion的用法
import React from 'react';import classnames from 'classnames/bind';import { IconRight } from '@arco-design/web-react/icon';import styled from 'styled-components';import styles from './index.module.less';const cx = classnames.bind(styles);export typ原创 2022-01-04 16:56:19 · 364 阅读 · 0 评论 -
reactHook原码分析
源码分析链接hook分析hook分析react技术揭秘customhook研究原创 2021-12-31 16:57:51 · 167 阅读 · 0 评论 -
reactfiber
Fiber 在看一些react技术文档时,老提到ReactFiber,百度了一下中午是纤维 我懵了。。。为什么叫Fiber呢? 大家应该都清楚进程(Process)和线程(Thread)的概念, 在计算机科学中还有一个概念叫做Fiber,英文含义就是“纤维”, 意指比Thread更细的线,也就是比线程(Thread)控制得更精密的并发处理机制。 上面说的Fiber和React Fiber不是相同的概念, 但是,我相信,React团队把这个功能命名为Fiber, 含义也是原创 2021-12-20 20:30:39 · 282 阅读 · 0 评论 -
react 实现爬楼层效果
<!-- 我原有的Home3.0逻辑 爬楼层效果 --> const [blockTop, setBlockTop] = useState<{ top: number; bgMode: string }[]>( [], ); const getBannerHeight = () => { const banner = document.getElementById('banner'); const appbar = document.原创 2021-11-07 16:50:15 · 584 阅读 · 0 评论 -
useSelector和useDispatch
import {useDispatch, useSelector } from 'react-redux';const profile = useSelector((state: MapStateToProps) => state.profile);const dispatch = useDispatch(); dispatch(getUser());原创 2021-10-20 11:14:21 · 749 阅读 · 0 评论 -
antdform表单的坑
antd 表单受控组件表单数据是由 React 组件来管理的个人觉得最好,不要用受控组件,除非必要如果一个 input 表单元素的值是由 React 控制,就其称为受控组件当用户将数据输入到受控组件时,会触发修改状态的事件处理器,这时由你的代码来决定此输入是否有效受控组件,通过value,defaultValue,onchange来控制受控组件,值由value来控制非受控组件表单数据将交由 DOM 节点来处理一个非受控组件,就像是运行在 React 体系之外的表单元素要编写一个非受原创 2021-09-24 19:42:12 · 776 阅读 · 0 评论 -
react typesafe-actions
主要是为了,给redux,定义文件夹---目录index.tsx app首页actions index 入口 project.tsreducers index 入口 project.tsindex.tsximport { createStore, applyMiddleware } from 'redux'import { Provider } from 'react-redux'import { createLogger } from 'redux-logger'import原创 2021-09-23 15:14:19 · 257 阅读 · 1 评论 -
reacthook笔记啊
useStatefunction Table(props) { // ⚠️ createRows() 当创建初始 state 很昂贵时: 每次渲染都会被调用 const [rows, setRows] = useState(createRows(props.count)); // ... // ✅ createRows() React 只会在首次渲染时调用这个函数 const [rows, setRows] = useState(() => createRows(props.co原创 2021-09-17 12:51:45 · 270 阅读 · 0 评论 -
react createRef和useRef的forwardRef区别和用法
useRef一般用于函数组件useRef 不仅仅是用来管理 DOM ref 的,它还相当于 this , 可以存放任何变量.当 useRef 的内容发生变化时,它不会通知您。更改.current属性不会导致组件重新渲染。因为他一直是一个引用 。createRef一般用于类组件 React.createRef 创建一个能够通过 ref 属性附加到 React 元素的 ref。如果用于函数组件中 当App这个函数组件被重新渲染时,App函数将会执行,并且重新创建、初始化所有的变量和表达式。原创 2021-09-14 16:11:35 · 1221 阅读 · 0 评论 -
react自动化测试
原文链接分类防止出现新代码破坏旧代码的无限循环粒度从大到小单元测试:传统单元测试,组件测试,hook测试集成测试:e(end)2e(end)测试yarn add -D @testing-library/react @testing-library/user-eventyarn add - D @testing-library/jest-dom@testing-library/react-hooks msw -D...原创 2021-09-07 16:35:58 · 243 阅读 · 0 评论 -
js面包屑封装
前言下面是拆解的代码因为封装后不易于阅读可以自己组合封装const arr = [ //看板列表 { path: "/kanban", title: "看板", }, // 项目列表 { path: "/projects", title: "项目", children: [ { path: "/projects/list", title: "原创 2021-09-03 15:37:04 · 819 阅读 · 4 评论 -
react添加less
webpack版本很重要不同的版本要对应不同的版本加不同的配置所以要注意不同的版本和不同版本的配置因为大部分bug,来源于此我项目中的webpack版本npx create-react-app antd-demo-ts --template typescript "webpack": "4.44.2", "webpack-dev-server": "3.11.1", "webpack-manifest-plugin": "2.2.0", "workbox-webpack-plugi原创 2021-08-17 16:52:30 · 331 阅读 · 1 评论 -
react学习笔记
最近才学习的知识2012年2月28日结束style <p style={{ color: "red", fontSize: 30 }}></p>state状态constructor(){ this.state={}}react状态不可以直接更改this.setState({修改})props直接放在类的里面props是只读的基础用法 传值 <Person title={this.state.title}></Pers原创 2021-02-28 19:43:08 · 573 阅读 · 0 评论 -
React 中使用antd,刷新时被选中的menu初始化的问题
在react项目中使用antd进行集成的时候,用到了menu做导航栏菜单项。根据用户的操作习惯,选中一个菜单节点的时候,刷新页面的时候应该保持用户之前的选中状态。今天恰巧碰到了这个问题,于是尝试了解决方案。查看了一下antd中menu的API,定义如下openKeys 当前展开的 SubMenu 菜单项 key 数组 string[] selectedKeys 当前选中的菜单项 key 数组 string[]用到的就是这两个属性值,我们可以在menu中引用他,然后在state中进行配置cons原创 2021-02-04 14:23:25 · 2428 阅读 · 0 评论 -
Warning: Each child in a list should have a unique “key“ prop react使用table组件报的错
react使用table组件报的错Warning: Each child in a list should have a unique “key“ prop解决方法 加rowKey="id" id是this.state.list中字段的值 <Table rowKey="id" dataSource={this.state.list} columns={columns} />原创 2021-02-01 17:39:05 · 595 阅读 · 1 评论 -
react组件自动化工程
//自动化工程const files = require.context('../../pages', true, /\.jsx$/);//第一个参数,要查找的文件夹,//第二个参数,是否查找子级目录,//第三个参数,指定查找的文件后缀,const jsonRouter = [];files.keys().forEach(item => { let jsonObj = {}; if (item.includes('./admin') || item.includes('./logi原创 2021-02-03 20:18:21 · 172 阅读 · 0 评论 -
react-redux实战完美案例
store 对象action 发通知reducer 执行者import { createStore } from 'redux';import { Provider } from 'react-redux';const store = createStore(reducer);//包裹根组件//provider相当于把store挂载到了所有组件上了ReactDOM.render( <Provider store={store}> <Routes />原创 2021-02-06 15:20:48 · 550 阅读 · 1 评论 -
react创建项目整体流程
npx create-react-app myprojiectnamecd 当前文件夹npm run eject 显示配置文件支持sasscnpm i node-sass@4 --save支持antdcnpm i antd --saveredux需要安装 以下依赖:cnpm install redux --savecnpm install react-redux --savecnpm install redux-actions --save@connect装饰器报错处理因为用到了es原创 2021-02-06 22:32:55 · 95 阅读 · 0 评论 -
react生命周期
生命周期组件将要加载组件加载之前componentWillMount()组件加载完成 componentDidMount()将要接受父组件传来的props componentWillReceiveProps()子组件是不是应该更新 shouldComponentUpdate()组件将要更新 componentWillUpdate()组件更新完成 componentDidUpdate()组件即将销毁 componentWillUnmount()...原创 2021-02-02 21:40:42 · 111 阅读 · 0 评论 -
react使用表格加确认弹框
import React, { Component } from 'react'import { Button, Table, Modal, Space } from 'antd';import { getAxios, delAxios } from '../../api/request.js'import { ExclamationCircleOutlined } from '@ant-design/icons';const { confirm } = Modal;export default原创 2021-02-01 17:41:43 · 779 阅读 · 0 评论 -
react serviceWorker
在https协议的服务器上,当用户第一次访问的时候需要联网才能看到网页,但是一旦用户访 问完网页然后断网,并且引用了下面的文件,即使断网,第二次访问的时候,依然可以看到之前访问的页面。serviceWorker协助将之前的网页存储在浏览器之内...原创 2021-02-06 22:27:52 · 646 阅读 · 0 评论 -
react事件的多种写法
# 函数定义方式1.箭头函数常用定义fn=()=>{}调用this.fn4.箭头函数常用定义handleClick(){}调用onClick={data=>this.handleClick}2.构造器内声明this.clickHandle = this.clickHandle.bind(this);clickHandle(){}3.bind绑定clickHandle(){}this.clickHandle.bind(this);...原创 2021-02-02 12:58:57 · 140 阅读 · 0 评论 -
react webpackconfig.js
'use strict';const fs = require('fs');const path = require('path');const webpack = require('webpack');const resolve = require('resolve');const PnpWebpackPlugin = require('pnp-webpack-plugin');const HtmlWebpackPlugin = require('html-webpack-plugin');原创 2021-02-23 18:49:48 · 735 阅读 · 0 评论 -
redux react-redux使用 connect安装及配置
redux需要安装 以下依赖:cnpm install redux --savecnpm install react-redux --savecnpm install redux-actions --save@connect装饰器报错处理因为用到了es6/7的语法,需要安装babel转码npm run eject //解除封装cnpm install babel-plugin-transform-decorators-legacy --save-devcnpm install原创 2021-02-05 12:14:49 · 186 阅读 · 0 评论 -
react组件定义和分类
组件的3种写法函数式组件返回jsx函数组件时静态组件 性能消耗小(第一次渲染完成后就不会变了)function App(props) { return <div>{props.title}</div>}export default App;类组件 动态组件 性能消耗大class App extends React.Component { constructor() { super(); this.state = { n: 0原创 2021-02-20 21:42:15 · 200 阅读 · 0 评论 -
react菜单栏多种处理方案
cnpm install react-router-dom --savereact-router-dom里包含了react-router的依赖,因此我们在安装的时候只需要安装后者即可。路由<Router> <Switch> {/*只匹配其中一个 */} {routes.map((item, index) => { return (<Route excat key={index} path={item.path} compo原创 2021-01-30 21:44:19 · 312 阅读 · 0 评论 -
react webpack配置 paths.js
'use strict';const path = require('path');const fs = require('fs');const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');//项目根目录const appDirectory = fs.realpathSync(process.cwd());//生成绝对路径const resolveApp = relativePath => pa原创 2021-02-23 16:54:59 · 950 阅读 · 1 评论 -
react扁平数据处理成动态二级菜单栏
byte ai Object.keys(mapCategoryIdToData).map((key) => { const category = mapCategoryIdToData[key]; const subItem = {//当前项,subitem name: category.name, }; const abilityList = []; Array.isArray(categ原创 2021-06-24 16:15:20 · 223 阅读 · 0 评论 -
react优化技巧
2021-6-19优化篇当我们的组件,套了多个子组件,子组件有套了多个子组件,一个顶层的组件重新渲染,导致所有他的子组件、全部重新渲染memo使用memo进行封装不相关的子组件不会重新渲染了,相关的子组件才会重新渲染export default React.memo(Demo);默认情况下其只会对 props 做浅层对比,遇到层级比较深的复杂对象时,表示力不从心了。对于特定的业务场景,可能需要类似 shouldComponentUpdate 这样的 API,这时通过 memo 的第二原创 2021-06-18 20:55:26 · 230 阅读 · 0 评论 -
vue react img标签引入图片的几种方式
reactimport imgURL from './../images/photo.png';<img src={imgURL } /><img src={require('./../images/photo.png')} />vueimport imgURL from './../images/photo.png';<img :src="imgURL" /><img :src="require('./../images/photo.png')原创 2021-03-01 14:11:48 · 690 阅读 · 0 评论 -
react样式覆盖
antd-design样式覆盖:global样式覆盖// TestPage.less.customSelect { :global { .ant-select-selection { max-height: 51px; overflow: auto; } }}// TestPage.jsimport styles from './TestPage.less'ReactDOM.render( <Select mode="mul原创 2021-07-13 14:13:58 · 678 阅读 · 0 评论 -
react-hooks:useContext
场景:现有两个组件Navbar和Messages,希望他们之间共享状态。<div className="test"> <Navbar /> <Messages /></div>父组件import React from "react";const TestContext= React.createContext({});<TestContext.Provider value={{ username:原创 2021-06-27 18:37:10 · 88 阅读 · 0 评论