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

Question

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

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

console.log(x,y);

Answer 1

在将HTML代码分配给变量（jsx）时，括号不会有太大的区别，但我想指出它在使用箭头函数甚至创建无状态组件时的优势。

const FunctionName = () => {
 return <p>Hello World </p>;
};

注意，在上面的代码中，我们必须在使用大括号时编写return关键字，但是如果您想更简洁，可以使用括号。。。

const FunctionName = () => (
 <p> Hello World </p>
); 

//or write it in one line as well

const FunctionName = () => ( <p> Hello World </p> );  

Answer 2

建议这样做有两个原因，

第一，它帮助javascript解释器找到赋值的结尾，因为有时，解释器可能会读取语句，如返回，它存在于代码的中间，并在那里结束赋值。

其次，它有助于提高可读性

return 
  <div> Your text here </div>

将被解释为

return;
<div> Your text here </div>;

因此，为了避免这种情况，首选JSX周围的括号

return (
    <div> 
       Your text here 
    </div>
)

Answer 3

一般来说，括号用于包装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>
);

这是两个世界中最好的。

更新：第二个代码不正确的原因是自动插入分号。感谢@EricKing指出这一点。