面试题：如果 React 的 render 函数中的 return 没有使用圆括号，会出现什么问题？

在 React 的 render 函数（或函数组件）中，return 语句是否使用圆括号（()）主要影响的是 JavaScript 的自动分号插入 (ASI, Automatic Semicolon Insertion) 行为，这可能导致代码出现意外的结果。

JavaScript 引擎会在某些情况下自动在行末插入分号。其中一个规则是：如果在换行处，当前语句在语法上已经是一个完整的语句，那么引擎会自动插入一个分号。

当你使用圆括号将 JSX 包裹起来时，JavaScript 引擎会将括号内的内容视为一个表达式的延续。

// ✅ 正确：使用圆括号
return (
  <div>
    <h1>Hello</h1>
    <p>World</p>
  </div>
);

解析过程：
1. return 关键字被识别。
2. 遇到 (，引擎知道这是一个表达式的开始，需要等待 ) 来结束。
3. 引擎会继续读取后续的多行 JSX，直到遇到 )。
4. 整个 JSX 片段被当作一个表达式求值。
5. return 语句返回这个表达式的值（即 React 元素）。

结果：JSX 被正确返回，组件正常渲染。

当你不使用圆括号，并且 return 后紧跟换行时，问题就出现了。

// ❌ 危险：没有圆括号，且 return 后换行
return 
  <div>
    <h1>Hello</h1>
    <p>World</p>
  </div>;

解析过程：
1. return 关键字被识别。
2. 紧接着是一个换行符。
3. JavaScript 引擎检查 return 之后的内容：return 本身可以是一个完整的语句（表示返回 undefined）。
4. 因此，引擎自动在 return 后插入一个分号。
5. 代码被解析为：
```
return; // 自动插入分号，返回 undefined
<div>  // 这行变成了一个独立的表达式，但没有任何作用（表达式求值但不赋值）
  <h1>Hello</h1>
  <p>World</p>
</div>; // 这行也被求值，但无作用
```
6. 函数执行到这里，立即返回 undefined，后面的 JSX 根本不会被 return 返回。

结果：组件返回 undefined，React 无法渲染任何内容，页面上可能一片空白，并且控制台通常会出现错误，如：

Error: A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

如果 JSX 是单行的，并且紧跟在 return 后面，那么即使没有圆括号，通常也不会出错，因为 ASI 不会在 return 和下一个 token 之间插入分号。

// ✅ 可以工作（但不推荐）
return <h1>Hello</h1>;

但是，这种写法可读性差，一旦 JSX 变复杂需要换行，就极易出错。

问题：在 return 后换行且不使用圆括号时，JavaScript 的自动分号插入机制会导致 return 语句提前结束，返回 undefined，从而使组件渲染失败。
解决方案：始终使用圆括号包裹 return 语句中的 JSX。

// ✅ 始终推荐的写法
return (
  <div>
    <h1>This is safe and readable</h1>
    <p>No ASI issues here!</p>
  </div>
);

这样做不仅避免了 ASI 带来的陷阱，还提高了代码的可读性和可维护性。

THE END