条件渲染

条件渲染和 javascript 里的 if else 一样，你可以创建不同组件用来不同状态下的 UI 展示。

基本例子

比如，我们可以根据用户登陆状态展示不同的组件。

import { FC } from 'gyron'

const Guest = FC(() => {
  return <div>Please sign up</div>
})
const User = FC(() => {
  return <div>Welcome</div>
})
const Home = FC(({ isLogin }) => {
  return isLogin ? <User /> : <Guest />
})

上述代码中有一个传入的isLogin变量，当它为Truthy时，便会展示 Welcome 文字，否则会展示 Please sign up。

逻辑运算符(&&)

&&运算符在组件中也是比较重要的功能，比如当 CPU 大于一个阈值时报警。

const CpuAlert = () => {
  return <div>Warning: cpu usage exceeds 90%</div>
}
const App = ({ cpuUsed }) => {
  return cpuUsed > 0.9 && <CpuAlert />
}

当 cpu 大于 90%时候会展示 Warning: cpu usage exceeds 90%，如果小于 90%页面中将什么都不展示，在 dom 元素中会有一个注释节点用来占位。（打开控制台就可以看到<!---->）