实时字幕/Suspense/ref的妙用/MutationObserver
1.2024.1.112.2024.1.103.2024.1.124.2024.1.135.2024.1.156.2024.1.187.2024.1.198.40 个拓展思维的概念/一位 44 岁老人的人生经验9.bigfrontend/usehooks10.React 面试题/Hooks CheatSheet11.zustand/useWhyDidYouUpdate/HTTP 缓存12.react tips/webpack热更新原理/webpack优化性能/超级蔬菜配比13.延迟Promise/单项目多npm版本/webpack好处/webpack5构建速度14.钝感力/孤独力/antd低代码15.ReadableStream/TransformStream/HMR/软件设计哲学/SSR 条件渲染/CSS.escape/Copilot16.写少一点/ARCHITECTURE/JavaScript类型转换/Logitech Options一直转圈17.prompt生成器/为什么需要react服务器组件/建议18.ts using/核心技能/三个我/日志/如何做好工作/多写/写简单的代码19.tailwindcss/React 性能优化20.一次性初始化/重新挂载/便捷类型/优化技巧21.DoD22.三角不等式/react ts 速查表23.delete/声明语句/赋值操作24.在macOS上管理MongoDB:服务和手动后台进程25.export/import26.深入解析JavaScript的块级作用域和for循环的性能考量27.常用术语28.停车场的投币器/return/throw/动画方案/疑难杂症/GetValue/Empty/引用解析与执行顺序/+ 和 - /双点语法29.new/类/null/+/PrimitiveValue/valueOf/toString/环境/HTML 脚本元素属性
30.实时字幕/Suspense/ref的妙用/MutationObserver
31.zustand Auto Generating Selectors/ts-pattern/swr/TypeScript在monorepo项目中实现即时更新/monorepo docker/turb 使用chrome 设置 搜索“实时字幕”
Suspense的 Promise由并行改为了串行
https://sorrycc.com/react-19-rc-suspense/
解法:
提前准备好数据,在 Render 时仅需要消费那个 Promise
export const Route = createFileRoute('/')({
loader: ({ context: { queryClient } }) => {
queryClient.ensureQueryData(repoOptions('tanstack/query'))
queryClient.ensureQueryData(repoOptions('tanstack/table'))
},
component: () => (
<Suspense fallback={<p>...</p>}>
<RepoData name="tanstack/query" />
<RepoData name="tanstack/table" />
</Suspense>
),
})
ref的妙用
https://github1s.com/timolins/react-hot-toast/blob/main/src/components/toaster.tsx#L15-L45
const ToastWrapper = ({
id,
className,
style,
onHeightUpdate,
children,
}: ToastWrapperProps) => {
const ref = React.useCallback(
(el: HTMLElement | null) => {
if (el) {
const updateHeight = () => {
const height = el.getBoundingClientRect().height;
onHeightUpdate(id, height);
};
updateHeight();
new MutationObserver(updateHeight).observe(el, {
subtree: true,
childList: true,
characterData: true,
});
}
},
[id, onHeightUpdate]
);
return (
<div ref={ref} className={className} style={style}>
{children}
</div>
);
};
MutationObserver
目标节点及其整个子树(subtree: true):任何后代节点的变化也会被捕捉。
子节点的添加或删除(childList: true):如果有新的子节点被添加到目标节点或有子节点被移除,观察者会捕捉到。
字符数据的变化(characterData: true):如果目标节点或其子节点的文本内容发生变化,观察者也会捕捉到。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!