理解JSX元素声明语法

Question

我看到了在JSX中声明元素的两种不同方式。

第一种情况如下所示。

const element = (
  <div>
    ...
  </div>
);

但我也看到了以下元素声明。

const App = () => (
  <BrowserRouter>
    ...
  </BrowserRouter>
)

这两个元素都可以传递给ReactDOM。render（）作为它们的第一个参数。

但这两种语法之间到底有什么区别呢？

Answer 1

第一个立即评估。第二个是在呈现其父级时计算的。

这是两者的区别

let y = 1,
  x = y;

y = 2;

console.log(x); // prints 1

和

let y = 1,
  x = () => y;

y = 2;

console.log(x()); // prints 2

在设计可重用组件时，请使用第二种语法。在另一个组件的渲染中返回或包含组件时，请使用第一个组件。