理解 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

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