编译的阿喵

定义事件委托机制：并不是将Click事件绑定在DOM上，而是采用事件冒泡的形式冒泡到document上，然后将React事件内容封装并交真正的函数处理合成事件SyntheticEvent：冒泡到document上的事件也不是原生的浏览器事件，而是由react实现的合成事件SyntheticEvent。⚠️如果不想要事件冒泡的话应该调用event.preventDefault()方法，而不是event.stopProppagation(),event.stopProppagation()只

构建项目初始化项目mkdir react-templeatecd react-templeate npm init安装Webpacknpm i webpack webpack-cli --save-devwebpack-cli@4.9.1webpack@5.64.1配置Webpack新建webpack相关文件 |-- react-templeate | |-- package-lock.json | |-- package.json |

react v16.x更新了组件生命周期，将componentWillReceiveProps、componentWillMount、componentWillUpdate这三个钩子函数丢弃了，然后增加了getDerivedStateFromProps、getSnapshotBeforeUpdate。废弃原因

众所周知，react16版本更新后，将原来的Stack Reconciler架构重写成了Fiber Reconciler架构，从而解决了React15遗留下来的整体渲染掉帧、响应延迟缓慢的问题。这里有个优化前后的例子：[react-fiber-vs-stack-demo]...

MessageBox.jsimport React, { useRef, useEffect, memo } from 'react'import PropTypes from 'prop-types'import { Spin } from 'antd'import { isEmpty } from 'lodash'import * as api from '../../api'import MessageItemBox from './MessageItemBox'import '../

最近在项目中实现了一个Table 相同数据行合并及表格头下拉筛选的需求，这类需求平时在项目中比较少遇到，操作的方法也比较麻烦，因此记录下来方便以后遇到有迹可循。实现效果合并相同行数据对dataSource数据进行处理，判断列scene字段是否有行数据相同，进行提取并添加新字段rowSpan，记录合并的行数// 合并数组单元格 createNewArr=data => {...

最近项目中开始使用Echart做图表，在React+Antd中使用Echart还是遇到了很多坑，希望记录下解决办法可以帮助到大家。最终效果1、实现点击折线图上的点联动两个饼图数据2、处理Echart饼图数据为0或者是空时饼图消失问题如何在react中使用echart1、在render中添加div<div id='echartLine' style={{ width: '10...

最近在做react项目的时候遇到了几个报错，这几个报错在react项目还算常见，因此记录下来解决方法。’type’ is missing in props validation报错：type缺少props验证解决：1.查看下propTypes是否写成大写了，因为我们引入的时候是大写的，所以很多小伙伴可能直接复制过来就成大写了，也会报错哦2.新增type: PropTypes.numbe...

import React from 'react'import { HashRouter as Router, Route } from 'react-router-dom'import { Layout } from 'antd'import PropTypes from 'prop-types'import Sider from '../components/Sider'import...