react

Fiber就是控制优先级，然后进行随时中断，浏览器原生的api requestIdleCallback，兼容性不高，所以react写Fiber进行兼容

日常的crud页面分为筛选、表格、分页 使用react和antd快速搭建页面，只需简单配置json即可 对按钮级别进行二次封装，主要是点击弹出modal 里面是常见add，delete，edit三种按

最大的变化就是redux和组件的连接 对于重复的dom元素代码可以封装成函数进行传参，大大简化代码，提高代码的复用性 避免在return里面使用大量的dom元素，可以将其提取成函数放在return外面

``` import { useEffect, useState } from "react"; import { Button, Checkbox, Form, Input } from "antd

react多级表单封装思路，采用hooks组件的写法，把组件放在数组里面，解构拿到组件的变量和方法。

自己开发学习项目时，为了方便，不用开启多个shell启动前后端项目的命令，想到使用一个命令进行启动项目并且启动node服务，这里使用的是一个插件 npm-run-all 安装 page.json编写命

其中多点标注使用map去渲染生成（在地图上的点，生成的形状，生成的文本） 添加辅助函数去渲染传进来的背景颜色 完整代码 使用

首先是table有多个按钮可以从外界传入，使用的是tsx的children进行插槽 关键代码 父组件使用 antd的数据源是key作为唯一的key，如果数据是id，可以将ttable指定为这样<Tab

二次封装的antd select组件，定义选中的是id还是name，...rest将其原有的select进行透传 使用方法

1.render更加语义化 2.自动批量更新state（开发模式下关闭严格模式） promise、setTimeout、原生事件支持（监听click，滚动等），react17会触发两次，react18

1.高阶组件去绑定表单元素，原生的表单元素一个个去绑定表单元素比较繁琐 2.yup实现表单元素校验 2.yup实现表单元素校验

1.安装 yarn add react-spring 2.使用react-spring,组件切换时有动画过度，如果组件被销毁后没有动画，必须保证组件一直存在 这里如果有遮罩层会导致页面无法点击，所以在

InfiniteLoader用户滚动时加载更多数据 WindowScroller将高度设置为视口高度，同步滚动条 AutoSizer虚拟长列表，将视口的数据转换为响应式数据，优化加载 Infinite

react点击相同组件切换时，数据更新了，但是选中的值没有回显，如果关闭组件在打开就可以正确渲染，解决的方案就是需要重新创建组件，渲染组件 来回点击时，数据回显组件的默认值不限，没有回显父组件传给子组

FilterTitle组件 1.使用map遍历展示条件筛选的title，然后通过父组件传值false、true来展示高亮效果 2.子组件调用父组件的onClick传type给父组件 FilterPic

1.封装组件传参className，合并以空格隔开 2.react的样式覆盖 完整代码，高阶组件withRouter 实现效果

1.脚手架使用时会提示undefined，可以在react组件外面定义一个变量 const BMapGL = window.BMapGL 2.城市反向解析，并调整视野，获取比例尺和缩放空间 3.调整控

react的组件封装 1.组件间的类名冲突，可以使用css in js的方案，创建.module.css,vue的scoped是一样的作用 2.使用children来传值，类似vue的slot 3.r

实现效果实现效果实现效果实现效果实现效果实现效果实现效果实现效果实现效果实现效果实现效果实现效果实现效果

注册百度账号，在控制台注册应用，记得使用浏览器端 引入百度地图 定位城市示例 刷新页面进行验证是否获取到定位