1 Like
Daily Thoughts

Daily Thoughts

51 PV1 LikeDaily Thoughts
开个空间写每日感想, 兴许比写 Tweet 有趣.

2021/7/10

GitHub copilot 真无聊...

2021/7/08

好家伙, 我网站支持 HTTP/3 了.

HTTP/3
HTTP/3

2021/5/31

看到个段子挺有意思: "治大国如调参, 今天改二, 明天改三, 能跑起来就行".

3ltros194v-1622460197994
3ltros194v-1622460197994

2021/5/23

桂林玩了五天, 天天饭桌上都有臭了吧唧的菜.

v1vhqjhdcg-1621824786296
v1vhqjhdcg-1621824786296

2021/5/17

Lane 模型比 expriationTime 好太多了.

2021/5/13

Google 也该学学人家某 du 整个主页皮肤. 🤔

skin
skin

2021/5/12

今儿看 React 源码看到了 FiberRoot 生成 entanglements 这块, 然而被 v8 那个链接给吸引住了.

export function createLaneMap<T>(initial: T): LaneMap<T> { // Intentionally pushing one by one. // https://v8.dev/blog/elements-kinds#avoid-creating-holes const laneMap = []; for (let i = 0; i < TotalLanes; i++) { laneMap.push(initial); } return laneMap; }

文章大抵来讲你就是创建数组, 并且填充元素可以有以下三种:

// 方式 1 const arr = new Array(3) arr[0] = 0 arr[1] = 1 arr[2] = 2 // 方式 2 const arr = [0, 1, 2] // 方式 3 const arr = [] arr.push(0) arr.push(1) arr.push(2)

方式一你创建了数组长度为 3 的无元素数组, 那这个数组是稀疏的, 并且这三个位置会被标记成 HOLEY_SMI_ELEMENTS, 随着你填入数据, 它们会被标记成 HOLEY_ELEMENTS. 因此即便最后我们填满了数组, 但它仍然被标记成是 holey 的.

方式二是最优雅的, 它被标记成了 PACKED_ELEMENTS.

当然如果你不知道到底有多少元素, 那么就使用方式三, 即将元素 push 到一个空数组将是最好的选择.

想起前段时间刷题的时候经常 new Array(n).fill(0) 这种, 竟然是 v8 引擎不推荐的, 大开眼界.

2021/5/11

我觉得 React 的割裂点不在于状态管理库的选择, 而是 ClassComponent 和 FunctionComponent 之间的功能兼容. 自从 Hooks 出现, 关于状态管理, 确切说是 server cache, 更倾向于使用如下这种模式(可参考 relay, react-query, apoll-client 这几个库).

const [getPosts, { data: posts, loading: isLoading }] = useLazyQuery< PostQuery, PostVars >(POSTS, { notifyOnNetworkStatusChange: true, })

而 ClassComponent 和 FunctionComponent 的割裂还是有些大, 比如前者有个 Component.pure, 后者就得适配个 React.memo 或者 useMemo. 而至今 Error Boundaries 还没有 Hooks 版, 意味着你在项目里多少得写个类组件.

2021/5/10

React.Children.map 这个 API 其实用的不多, 最初还是在 ant-design 的源码里看到.

// Pass to React.Children.map to auto fill key return React.Children.map(childList, child => insertSpace(child as React.ReactChild, needInserted), );

回归到 ReactChildren 的源码中, 它简单来讲就是做了一坨递归, 因为 callback 里也可能是数组, 得把它展平. 有趣的是里面还设计了对象池的功能, 它是为了防止频繁创建 ReactNode 造成性能问题. 这种方式可以直接在对象池里拿现成的对象, 用完再去放回去. 其实这是一种典型的设计模式叫做享元模式(Flyweight Pattern). 一个典型的例子是地图上的 Tooltip, 你搜索加油站可能出现 10 个 tooltip, 你再搜索个别的, 就没必要重新创建 tooltip 实例了, 直接复用对象池里的, 多退少补.

Flyweight Pattern
Flyweight Pattern

看起来很装逼, 不过 Dan 把这坨代码给砍了, 我截图了这个 pr 的评论. 其实说白了, 就是这个 api 的需求量太小, 也一般没人让 callback 返回个数组, 纯属过度设计, 所以就给砍了. 关于最新版的这块源码, 我都写了注释, 可以看看.

Dan 给 Children.map 的精简
Dan 给 Children.map 的精简

简简单单才是真.

以上.

浅谈 Server-Sent Events

PREVIOUS POST

浅谈 Server-Sent Events

从 React 源码谈 v8 引擎对数组的内部处理

NEXT POST

从 React 源码谈 v8 引擎对数组的内部处理

    Search by