qq_36262295的博客

【代码】react dom的diff理解及性能优化。

usereducer

ref

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

说实话，是个正常人都看不懂let isMount = true;//一个指针，指向当前的hooklet workInProgressHook=null;const fiber = { //保存的是这个函数本身 stateNode:App, //保存对应的hooks的数据的 memoizedState:null}//每个useState都会，创建一个hook//并且通过workInProgressHook.next//串成一个链表//有很多useState 那我们怎么知道

: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) ..

在这里插入代码片URL

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

源码分析链接hook分析hook分析react技术揭秘customhook研究

Fiber 在看一些react技术文档时,老提到ReactFiber,百度了一下中午是纤维 我懵了。。。为什么叫Fiber呢？ 大家应该都清楚进程（Process）和线程（Thread）的概念， 在计算机科学中还有一个概念叫做Fiber，英文含义就是“纤维”， 意指比Thread更细的线，也就是比线程(Thread)控制得更精密的并发处理机制。 上面说的Fiber和React Fiber不是相同的概念， 但是，我相信，React团队把这个功能命名为Fiber， 含义也是

<!-- 我原有的Home3.0逻辑 爬楼层效果 --> const [blockTop, setBlockTop] = useState<{ top: number; bgMode: string }[]>( [], ); const getBannerHeight = () => { const banner = document.getElementById('banner'); const appbar = document.

import {useDispatch, useSelector } from 'react-redux';const profile = useSelector((state: MapStateToProps) => state.profile);const dispatch = useDispatch(); dispatch(getUser());

antd 表单受控组件表单数据是由 React 组件来管理的个人觉得最好，不要用受控组件，除非必要如果一个 input 表单元素的值是由 React 控制，就其称为受控组件当用户将数据输入到受控组件时，会触发修改状态的事件处理器，这时由你的代码来决定此输入是否有效受控组件，通过value,defaultValue,onchange来控制受控组件，值由value来控制非受控组件表单数据将交由 DOM 节点来处理一个非受控组件，就像是运行在 React 体系之外的表单元素要编写一个非受

主要是为了，给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

useStatefunction Table(props) { // ⚠️ createRows() 当创建初始 state 很昂贵时： 每次渲染都会被调用 const [rows, setRows] = useState(createRows(props.count)); // ... // ✅ createRows() React 只会在首次渲染时调用这个函数 const [rows, setRows] = useState(() => createRows(props.co

useRef一般用于函数组件useRef 不仅仅是用来管理 DOM ref 的，它还相当于 this , 可以存放任何变量.当 useRef 的内容发生变化时,它不会通知您。更改.current属性不会导致组件重新渲染。因为他一直是一个引用 。createRef一般用于类组件 React.createRef 创建一个能够通过 ref 属性附加到 React 元素的 ref。如果用于函数组件中 当App这个函数组件被重新渲染时，App函数将会执行，并且重新创建、初始化所有的变量和表达式。

原文链接分类防止出现新代码破坏旧代码的无限循环粒度从大到小单元测试：传统单元测试，组件测试，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...

前言下面是拆解的代码因为封装后不易于阅读可以自己组合封装const arr = [ //看板列表 { path: "/kanban", title: "看板", }, // 项目列表 { path: "/projects", title: "项目", children: [ { path: "/projects/list", title: "

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

最近才学习的知识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

在react项目中使用antd进行集成的时候，用到了menu做导航栏菜单项。根据用户的操作习惯，选中一个菜单节点的时候，刷新页面的时候应该保持用户之前的选中状态。今天恰巧碰到了这个问题，于是尝试了解决方案。查看了一下antd中menu的API，定义如下openKeys 当前展开的 SubMenu 菜单项 key 数组 string[] selectedKeys 当前选中的菜单项 key 数组 string[]用到的就是这两个属性值，我们可以在menu中引用他，然后在state中进行配置cons

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} />

//自动化工程const files = require.context('../../pages', true, /\.jsx$/);//第一个参数，要查找的文件夹，//第二个参数，是否查找子级目录，//第三个参数，指定查找的文件后缀，const jsonRouter = [];files.keys().forEach(item => { let jsonObj = {}; if (item.includes('./admin') || item.includes('./logi

store 对象action 发通知reducer 执行者import { createStore } from 'redux';import { Provider } from 'react-redux';const store = createStore(reducer);//包裹根组件//provider相当于把store挂载到了所有组件上了ReactDOM.render( <Provider store={store}> <Routes />

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

生命周期组件将要加载组件加载之前componentWillMount()组件加载完成 componentDidMount()将要接受父组件传来的props componentWillReceiveProps()子组件是不是应该更新 shouldComponentUpdate()组件将要更新 componentWillUpdate()组件更新完成 componentDidUpdate()组件即将销毁 componentWillUnmount()...

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

在https协议的服务器上，当用户第一次访问的时候需要联网才能看到网页，但是一旦用户访 问完网页然后断网，并且引用了下面的文件，即使断网，第二次访问的时候，依然可以看到之前访问的页面。serviceWorker协助将之前的网页存储在浏览器之内...

# 函数定义方式1.箭头函数常用定义fn=()=>{}调用this.fn4.箭头函数常用定义handleClick(){}调用onClick={data=>this.handleClick}2.构造器内声明this.clickHandle = this.clickHandle.bind(this);clickHandle(){}3.bind绑定clickHandle(){}this.clickHandle.bind(this);...

'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');

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

组件的3种写法函数式组件返回jsx函数组件时静态组件 性能消耗小(第一次渲染完成后就不会变了)function App(props) { return <div>{props.title}</div>}export default App;类组件 动态组件 性能消耗大class App extends React.Component { constructor() { super(); this.state = { n: 0

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

'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

byte ai Object.keys(mapCategoryIdToData).map((key) => { const category = mapCategoryIdToData[key]; const subItem = {//当前项，subitem name: category.name, }; const abilityList = []; Array.isArray(categ

2021-6-19优化篇当我们的组件，套了多个子组件，子组件有套了多个子组件，一个顶层的组件重新渲染，导致所有他的子组件、全部重新渲染memo使用memo进行封装不相关的子组件不会重新渲染了，相关的子组件才会重新渲染export default React.memo(Demo);默认情况下其只会对 props 做浅层对比，遇到层级比较深的复杂对象时，表示力不从心了。对于特定的业务场景，可能需要类似 shouldComponentUpdate 这样的 API，这时通过 memo 的第二

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')

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

场景：现有两个组件Navbar和Messages，希望他们之间共享状态。<div className="test"> <Navbar /> <Messages /></div>父组件import React from "react";const TestContext= React.createContext({});<TestContext.Provider value={{ username: