性能优化一直是前端领域讨论的一个热门问题，但在平时沟通及 code review 过程中发现很多人对于 React 中性能优化理解很模糊，讲不清楚组件什么时候更新，为什么会更新，关于 React 性能优化的文章虽然比较多，但大多数都是在罗列一些优化的点，本文将以 React 底层更新过程为基础，层层递进，将性能优化相关的用法、原理串联起来，让读者真正理解为什么需要性能优化以及如何使用。

54 技术 lddgo 分享于 2022-12-15

React 18 提供了一种新的 SSR 渲染模式： Streaming SSR。通过 Streaming SSR，我们可以实现以下两个功能： Streaming HTML：服务端可以分段传输 HTML 到浏览器，而不是像 React 18 以前一样，需要等待服务端渲染完成整个页面后才返回给浏览器。这样，浏览器可以更快的启动 HTML 的渲染，提高 FP、FCP 等性能指标。 Selective Hydration：在浏览器端 hydration 阶段，可以只对已经完成渲染的区域做 hydration，而不需要等待整个页面渲染完成、所有组件的 JS bundle 加载完成，才能开始 hydration。这样可以更早的对已经完成渲染的区域做事件绑定，从而让页面获得更好的可交互性。

48 技术 lddgo 分享于 2022-12-08

其实，最早接触 Headless UI 是在去年，碰巧看到了一个非常前沿且优秀的组件库 ---- Chakra UI[1]，这个组件库本身就是 Headless UI 的实践者，同时也是 CSS-IN-JS 的集大成者。 我当时看过之后，就对该理念产生了很大的兴趣，同时工作中也正好有机会实践（着手公司开源组件库大版本重构），因此对该理念也有一定的实践经验。 那么今天，也是想和大家分享介绍下这项还算前沿的技术，另一方面是也算是个人的一份技术总结，这里也希望感兴趣的小伙伴可以在评论区探讨。

59 技术 lddgo 分享于 2022-12-07

React 重新渲染，指的是在类函数中，会重新执行 render 函数，类似 Flutter 中的 build 函数，函数组件中，会重新执行这个函数 React 组件在组件的状态 state 或者组件的属性 props 改变的时候，会重新渲染，条件简单，但是实际上稍不注意，会引起灾难性的重新渲染

68 技术 lddgo 分享于 2022-11-18

由于 React16 和 React17 在事件机制在细节上有较大改动，本文仅对 React17 的事件机制做讲解，在最后对比 React17 和 React16 在事件机制上的不同点。

60 技术 lddgo 分享于 2022-11-17

在某些场景里，前端开发同学会无意识的编写出一些看似正确的代码，这些代码能够通过所有测试以及代码审查，但是在实际执行时会导致应用程序出现一些意想不到的问题：页面上的数据毫无规律地随机展示出来、搜索出的结果与查询条件不匹配、切换选项卡的导航时出现错误的内容。 当然，我们并不希望发生这些问题，那么如何避免这些问题呢？本文将继续讨论 React 数据获取的一些方法和原理，并深入了解 Promise 在数据获取时如何导致了条件竞争（race conditions）以及如何避免它们。

99 技术 lddgo 分享于 2022-11-11

React 最新提出了一个叫 use 的 Hook，用于在客户端消费 Promise，而 use 和其他 Hook 不同之处在于，它可以在条件语句、block 和循环里使用。除 Promise 之外，use 未来还可能用于消费 Context、store、observable 等。 与之对应的是，在服务端组件中则支持使用 async/await。这个提案本身并不是一个完整的数据获取解决方案，因为它没有解决缓存问题。wait 和 use 是用于读取 promise 异步结果的原语，后续会引入一个名为 cache 的 API 来帮助缓存数据。

65 技术 lddgo 分享于 2022-11-02

本篇文章主要讲解如何从一个空目录开始，建立起一个基于webpack + react + typescript的标准化前端应用。

106 技术 lddgo 分享于 2022-09-02

相信前期使用过react的前端同学，大都会经历从class 语法向hooks 用法的转变，react 的hooks 编程给我们带来了丝滑的函数式编程体验，同时很多前端著名的文章也讲述了hooks 带来的前端心智的转变，这里就不再着重强调，本文则是聚焦于useReducer这个钩子函数的原理和用法，笔者带领大家再一次深入认识useReducer。

188 技术 lddgo 分享于 2022-08-18