为什么最好的做法是用括号将分配给变量的 JSX 括起来？

在下面的示例中，x 和 y 的输出相同。我见过两种方式编写的 React 代码。有区别吗？由于我看到的许多 React 代码示例都使用括号语法，我认为这是有原因的。如果这是最佳实践，那么为什么用括号将分配给变量的 JSX 括起来是最佳实践？如果还有其他原因是什么？

let x =  <div> Hello World! </div>;
let y = (<div> Hello World! </div>);

console.log(x,y);

一般来说，为了代码清晰，括号用于包装 JSX 代码......也就是说，

let y = <ul>
    <li>
        Hello World!
    </li>
</ul>;

很丑但是正确

let y = 
    <ul>
        <li>
            Hello World
        </li>
    </ul>;

格式更好，但语法不正确（编译时会出错）。

所以解决方案是使用

let y = (
    <ul>
        <li>
            Hello World
        </li>
    </ul>
);

这是两全其美的。

UPDATE :第二个代码不正确的原因是自动分号插入 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion。感谢@EricKing 指出了这一点。