# JS 表达式

在 React 当中，尤其是在其函数式组件当中，在 return 中返回的必须都是 JS 表达式 ，不能是 JS 代码 。这也就意味着，一切的条件渲染、复杂逻辑渲染，必须只能通过 JS 表达式 来完成。

表达式是 JavaScript 的一个单元，它可以被计算并产生一个值。表达式可以是简单的，如一个数值、字符串、或者是更复杂的操作，比如函数调用、对象字面量、数组操作等。

在 React 中，表达式非常常见，因为它们可以被直接嵌入到 JSX 中。例如，你可以在 JSX 中使用 {} 来嵌入一个表达式，React 会计算这个表达式并将结果渲染到 DOM 中。

举例： <h1>{'Hello, ' + userName}</h1> ，这里 'Hello, ' + userName 就是一个表达式。

# JS 代码

语句执行某些操作，但并不直接返回值。语句定义了程序的结构和控制流，比如条件语句（ if , else ），循环语句（ for , while ），以及函数声明等。

在 React 的 JSX 中，你不能直接使用语句。比如，你不能在 JSX 中直接写一个 if 语句来条件渲染某些元素。不过，你可以使用表达式版本的条件渲染，如逻辑运算符（ && ）或三元运算符（ condition ? true : false ）来实现相似的功能。

# 本质区别

# 值的产生 vs. 动作的执行

表达式 的本质是产生值。无论多么复杂的表达式，它总是计算（或求值）为某个值。这意味着表达式可以放在任何期望值的地方，如赋值操作的右侧，函数调用的参数，或者是逻辑比较的一部分。 也就是说，表达式本身是有一个返回值的。原本我们可能会用一个常量来接收这个返回值然后把它放到别的地方，但是在 React 中，表达式已经是控制 JSX 渲染的一种重要方式了。

代码（语句） 的本质是执行动作。语句可能会改变程序的状态，执行控制流操作（如循环和条件分支），声明变量，或者定义函数等，但它本身不产生值。

# 使用场景

表达式通常用在需要计算结果的场景，比如算术运算、函数调用返回值的处理等。

代码（语句）用于构建程序的结构和逻辑，比如控制流程（ if 、 for 循环等）、变量声明等。

# 组合性

表达式可以很灵活地组合在一起，形成更复杂的表达式。例如， 1 + 2 * 3 是将算术表达式组合在一起。

代码（语句）通常按照一定的顺序执行，虽然可以通过控制流语句组织在一起，但每条语句执行的是一个明确的操作或者动作，而不是产生一个值。