函数式组件是一个普通函数，接受参数并返回一个 React 元素。

一些特殊的返回值：

• 没有任何返回会直接导致错误，这包括显式的返回 undefined，两者等价

import React from 'react';
import { render } from 'react-dom';

const App = () => {
  return; // 等价于 return undefined;
};

render(<App />, document.getElementById('root'));

错误提示我们没有返回任何内容供 render。

• 如果返回了 null 则是可以正常渲染空白页面的:

import React from 'react';
import { render } from 'react-dom';

const App = () => {
  return null;
};

render(<App />, document.getElementById('root'));

除此之外还有以下类型:

• 空字符串、空数组、false、返回空白页面，不渲染任何内容。

• 1 或者 0 直接渲染 1 或 0;

• 空对象出错

问题的原因在于 render(<App />, document.getElementById('root'));，也就是 react-dom 的 render 方法，它接受的第一个参数为 React 元素类型。

源码中的定义为

function render(
  element: React$Element<any>,
  container: Container,
  callback: ?Function,
) {};

可以看到 element 的类型为 React$Element<any>，接收的为一个 React 组件。

tips😂: 这样做会有特殊的效果:

import React from 'react';
import { render } from 'react-dom';

const App = () => {
  return <App />;
};

render(<App />, document.getElementById('root'));