浅谈 ReactDom.render

参数

有没有考虑过ReactDom.render的第一个参数到底是什么?render 函数的方法签名:

1
ReactDOM.render(element, container[, callback])

既然讨论类型,那不如看看强类型的 ts 对这个函数的类型定义:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
export interface Renderer {
// Deprecated(render): The return value is deprecated.
// In future releases the render function's return type will be void.

<T extends Element>(
element: DOMElement<DOMAttributes<T>, T>,
container: Element | null,
callback?: () => void
): T;

(
element: Array<DOMElement<DOMAttributes<any>, any>>,
container: Element | null,
callback?: () => void
): Element;

(
element: SFCElement<any> | Array<SFCElement<any>>,
container: Element | null,
callback?: () => void
): void;

<P, T extends Component<P, ComponentState>>(
element: CElement<P, T>,
container: Element | null,
callback?: () => void
): T;

(
element: Array<CElement<any, Component<any, ComponentState>>>,
container: Element | null,
callback?: () => void
): Component<any, ComponentState>;

<P>(
element: ReactElement<P>,
container: Element | null,
callback?: () => void
): Component<P, ComponentState> | Element | void;

(
element: Array<ReactElement<any>>,
container: Element | null,
callback?: () => void
): Component<any, ComponentState> | Element | void;

(
parentComponent: Component<any> | Array<Component<any>>,
element: SFCElement<any>,
container: Element,
callback?: () => void
): void;
}

render 方法的返回值被废弃,在将来的版本中将返回 void。理由大概是将来可能会使用异步 render。

第一个参数的类型包括:

  • DOMElement 或 DOMElement 数组,返回 Element
  • SFCElement 或 SFCElement 数组,返回 void
  • CElement 或 CElement 数组,返回 Component
  • ReactElement 或 ReactElement 数组,返回 Component 或 Element 或 void

其中 SFCElement、CElement、DOMElement 都是 ReactElement 的子类,分别对应类组件和函数组件生成的 Element 以及 DOM 元素的包装。

还有最后一个,接收 4 个参数:

1
2
3
4
5
6
(
parentComponent: Component<any> | Array<Component<any>>,
element: SFCElement<any>,
container: Element,
callback?: () => void
): void;

从方法签名看,第一个参数接收的是一个 React 组件。

我试了一下,直接报错 Target container is not a DOM element.

查看 React 的源码也没有这个方法签名,和这个接近的方法是非正式的 unstable_renderSubtreeIntoContainer。

很多人误解了 React 的 Component 和 Element。

1
2
3
4
5
const App = ({ name }) => (
<div>
Hello {name}!
</div>
);

App 就是 Component,而 是 Element。

您的支持将鼓励我继续创作!