React 18更新相关的类型改变

这是个探索性的分享，听完你可以了解到

• React18 更新中涉及类型相关的部分内容
• 关于 ReactFragment 的一些内容

背景

运行效果

17

18

变更比对

17

TypeScript
Copy

    type ReactText = string | number;
    type ReactChild = ReactElement | ReactText;

    /**
     * @deprecated Use either `ReactNode[]` if you need an array or `Iterable<ReactNode>` if its passed to a host component.
     */
    interface ReactNodeArray extends ReadonlyArray<ReactNode> {}
    type ReactFragment = {} | Iterable<ReactNode>;
    type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

18

TypeScript
Copy
    /**
     * @deprecated - This type is not relevant when using React. Inline the type instead to make the intent clear.
     */
    type ReactText = string | number;
    /**
     * @deprecated - This type is not relevant when using React. Inline the type instead to make the intent clear.
     */
    type ReactChild = ReactElement | string | number;

    /**
     * @deprecated Use either `ReactNode[]` if you need an array or `Iterable<ReactNode>` if its passed to a host component.
     */
    interface ReactNodeArray extends ReadonlyArray<ReactNode> {}
    type ReactFragment = Iterable<ReactNode>;
    type ReactNode = ReactElement | string | number | ReactFragment | ReactPortal | boolean | null | undefined;

ReactFragment 是个什么?

https://reactjs.org/docs/fragments.html

搜索了一些内容还是找不到他的具体实现逻辑。 但回顾类型的时候，有了些体会。

TypeScript
Copy
    type ReactFragment = Iterable<ReactNode>;

从React提供的类型和React利用 ReactFragment 的视角来看，这就是一个可以迭代的对象而已，并且支持 key 的属性

在 DOM 上应该没啥映射关系，在 React 虚拟 DOM 中用得上，比对啥的(猜测)