If/Else

function IfElse():any {
  const [show] = useState(true);

  if (show) return 'This is a show message';
  return 'This is a hidden message';
}

三元运算符

可以使用三元运算符替代if/else代码块：

function TernaryOperator():any {
  const [show] = useState(true);

  return show ? 'This is a show message of TernaryOperator' : 'This is a hidden message of TernaryOperator';
}

短路运算符

三元运算符在某些场景下可以更加简化。例如，当你要么渲染一个组件，要么不做渲染，你可以使用&&运算符。

不像&运算符，如果&&执行左侧的表达式就可以确认结果的话，右侧表达式将不会执行

function ShortCircuitOperator():any {
  const [show] = useState(true);

  return ShortCircuitOperator && 'This is a show message of ShortCircuitOperator';;
}

但是这种有一个陷阱就是当ShortCircuitOperator为0的时候会渲染出来一个0出来。这是因为React只是会忽略null false和undefined的渲染。但是ShortCircuitOperator === 0也是一个假值，但是React又可以渲染出来，所以这种情况我们可以!!(ShortCircuitOperator) && xx强制转换成布尔值，也可以直接使用三元运算符。

详见jsx-in-depth

自执行函数

三元运算符有时候会让人困扰，比如如下的复杂代码：

return (
  <div>
    { condition1
      ? <Component1 />
      : ( condition2
        ? <Component2 />
        : ( condition3
          ? <Component3 />
          : <Component 4 />
        )
      )
    }
  </div>
);

很快，这些代码会变为一团乱麻，因此，有时候你需要一些其他技巧，比如：自执行函数。

顾名思义，自执行函数就是在定义以后会被立刻执行，没有必要显式地调用他们。

function IIFE(): any {
  const [show] = useState(true);

  return (
    (() => {
      if (show) return 'This is a show message of IIFE';
      if (!show) return 'This is a hide message of IIFE';
    })()
  );
}

参考链接