这是我关于egghead.io的ReactJS初学者指南的第三部分。
本节将解释为什么三元运算符表达式在呈现React组件时很常见，以及如何将其从JSX转换为React。
下面是JSX中的示例，其中有条件地呈现组件很有用：
函数Message（{message}）{
返回 {message}
}
ReactDOM.render（
，
document.getElementById（'root'），
）
浏览器上无任何显示。 让我们做一个条件，使其呈现“无消息”。
函数Message（{message}）{
如果（！message）{
返回无消息
}
返回 {message}
}
ReactDOM.render（
，
document.getElementById（'root'），
）
我们还可以在render方法中传递"hi there"以显示带有该消息的div。
上面的JSX会像这样被编译成React：
函数Message（{message}）{
如果（！message）{
返回React.createElement（
'div'，
空值，
“没有消息”，
）
}
返回React.createElement（'div'，null，message）
}
如果要在JSX中有条件地呈现组件，请记住，我们必须使用花括号{}来编写JavaScript。 花括号中的任何内容都必须是有效的表达式，因此， if语句不起作用而三元表达式则有效。 这就是为什么三元运算符在JSX代码中如此常见的原因。
除了Message组件包装在JSX div中之外，下面的代码与上面的代码相似。
函数Message（{message}）{
返回（
{信息
？ React.createElement（
'div'，
空值，
信息，
）
：React.createElement（
'div'，
空值，
“没有消息”，
）}
）
}
让我们使用JSX使代码更具可读性：
函数Message（{message}）{
返回（
{信息 ？ （
{message}
）：（
没有消息
）}
）
}
TL; DR
条件可以帮助我们创建使用正确的属性值呈现的组件。
三元运算符表达式在JSX中很常见，因为我们必须使用大括号{}来编写JavaScript，并且只能在大括号中编写表达式。 三元运算符可以用表达式编写，但是if语句不能。
本节将说明React如何在重新渲染时仅执行重新渲染所需的DOM操作。 这对可访问性和性能具有重大影响。 请注意，此应用程序旨在说明React的一个方面，而不是本身就是一个有用的应用程序。
在下面的应用程序中，我们重新渲染应用程序，并使用React每秒更新一次时间。
const rootElement = document.getElementById（'root'）
函数tick（）{
const time = new Date（）。toLocaleTimeString（）
const element =它是
ReactDOM.render（element，rootElement）
}
蜱（）
setInterval（tick，1000）
我们将时间投入，以便可以看到我们永远不会失去专注。 换句话说，请注意，即使每秒重新渲染一次时间，光标也将停留在表单中。 整个应用程序都将重新呈现，但是更改的唯一部分是我们要更改的部分。
让我们尝试做同样的事情，但是使用HTML DOM和JavaScript重新渲染。
函数tick（）{
const time = new Date（）。toLocaleTimeString（）
const element =`它是
rootElement.innerHTML =元素
}
我们通过将JSX div用作模板来更改tick（）函数，并将element分配给HTML DOM属性.innerHTML 。 请注意，重新呈现时间后如何失去焦点。
我们失去了焦点，因为整个DOM被重新渲染，而不仅仅是时间。
TL; DR
React的优点之一是它只需执行唯一的DOM操作即可重新渲染。
