weixin_43822134的博客

跨浏览器一致性性能优化（事件委托 + 事件池）统一的事件处理接口事件委托到根节点合成事件包装原生事件基于虚拟DOM的事件传播JSX事件属性（标准化的事件对象（自动清理和性能优化优先使用合成事件避免混用原生事件大型列表使用事件代理升级到React 17+简化处理委托节点变更（root而非document）移除事件池机制修复传播行为。

访问DOM元素存储可变值（不触发渲染）保存前一次渲染的值返回具有.current属性的对象修改.current不会触发重新渲染值在组件生命周期中持久化避免在渲染期间修改ref总是检查是否存在结合useEffect处理副作用使用forwardRef转发ref到子组件批量读取DOM属性使用优化回调ref避免在循环中创建动态ref类组件中使用createRef需要触发渲染时使用useState。

1、技术选型策略树2、最终建议需要最大浏览器兼容性部署在静态文件服务器开发简单原型或演示无SEO要求面向现代浏览器需要专业URL结构有服务器配置权限需要最佳SEO效果构建企业级应用3、最佳实践1、使用 History 模式（未来导向）2、为不支持History API的浏览器提供fallbackif (!// 回退到 hash 模式或显示提示3、使用成熟的路由库（Vue Router、React Router）4、跟踪路由错误（特别是 404）5、

Diff 算法是现代前端框架的核心1、分层比较是基础策略，将复杂度降至O(n)2、Key 机制是列表高效更新的关键3、组件级优化可大幅减少Diff范围4、从React的简单比较到Vue 3的LIS优化5、合理使用Key、避免不必要的渲染、使用优化工具。

1、并发渲染体系时间切片与优先级调度控制更新节奏2、流式渲染生态流式SSR加速首屏Suspense统一异步处理模型3、渐进升级路径兼容现有代码的并发模式按需采用新特性React 18 将 Web 应用的交互体验推向了新的高度，解决了大型应用卡顿的顽疾，同时通过流式SSR重新定义了服务端渲染的性能标准，是 React 向“用户优先”框架演进的关键里程碑。

1、用户体验革命输入响应延迟从 >300ms 降至 <50ms动画帧率提升 40% 以上（尤其在低端设备）2、渲染范式进化从“全量同步渲染”到“智能增量渲染”从“固定顺序执行”到“动态优先级调度”3、应用架构影响并发渲染使React应用能够像操作系统一样智能管理任务，将用户交互体验提升到前所未有的高度，同时为万级组件树、复杂数据流等场景提供底层支持。他不是简单的性能优化，而是从根本上重新定义了前端渲染的工作方式。

1.平稳升级桥梁零成本升级路径完美支持多版本共存2.事件系统现代化解决微前端事件冲突简化事件处理逻辑3.开发者体验提升告别强制React导入原生错误栈支持更严格的开发警告4.为并发模式奠基副作用清理异步化严格模式强化内部架构优化React 17 是 React 进化史上的“无声革命”，它不追求酷炫功能，而是专注于解决底层架构问题，为 React 18 的并发革命和未来版本演进打下坚实基础。

【代码】React 16 全新生命周期与废弃警告。

特性FragmentPortals主要目的避免多余DOM包裹渲染到DOM树不同位置DOM 影响不创建新节点在指定容器创建节点事件处理正常冒泡事件仍冒泡到React组件树典型场景列表/表格组合元素模态框/提示框/全局组件语法要求支持短语法<>必须用Fragment 和 Portals 共同解决了React 应用中的DOM结构限制问题，使开发者能更灵活地控制渲染输出，同时保持React的声明式特性和组件树的一致性。

/ 更新状态以显示降级UI// 上报错误render() {React 错误边界机制通过实现了对子组件渲染错误的隔离处理，显著提升了应用的健壮性。但需注意其作用范围限制，结合事件处理与异步错误的单独处理方案，才能构建完整的React应用错误防御体系。

Fiber 是 React 的虚拟执行栈，通过：1、链表数据结构→ 实现可中断遍历2、时间切片→ 避免主线程阻塞3、优先级调度→ 优化交互响应4、双缓冲机制→ 确保渲染原子性如同操作系统从单任务到多任务的进化，Fiber 让 React 从同步渲染升级为带优先级的异步可中断渲染系统，为现代Web应用的高性能交互奠定了基石。

日期范围选择，精确到小时，并且不能选择当前时间之前的时间，包括小时时间

需求：在展开多个菜单时，点击进入任意菜单，收起其他已展开的菜单在antd中，有自带的只展开当前父级菜单的例子，但现在要做的并不是展开其他菜单时也要收起当前已展开的菜单，而是点击进入菜单后，再收起非当前父级菜单。具体如下：1、给Menu组件绑定 selectedKeys 和 openKeys const { selectedKeys, openKeys } = this.state; <Menu selectedKeys, openKeys >

自定义AntD Table rowSelection 的 onChange 参数 selectedRowKeys 的取值

最近在玩React-reduxReact-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据用白话说，React-redux就是用来帮助我们处理React中的数据和方法的工具。安装 npm install react-redux -S //或者 yarn add react-redu...