React中onClick事件里的双竖线(||)有什么作用？

这段代码里的||是JavaScript的逻辑或运算符，核心是利用它的短路求值特性：

• 逻辑或运算会先执行左侧的表达式setOne(false)，然后判断它的返回值是否为「真值」
• React中useState返回的状态设置函数（比如setOne）执行后，返回值是undefined，而undefined在布尔判断里属于「假值」
• 因为左侧是假值，逻辑或会继续执行右侧的setTwo(false)，最终实现先后调用两个状态设置函数的效果

说白了，这段代码和下面的写法功能完全一致：

() => {
  setOne(false);
  setTwo(false);
}

不过这种写法属于「投机取巧」——它完全依赖于setOne返回假值的特性，虽然目前React的setter确实返回undefined，但如果后续React调整这个返回值（可能性极低），右侧的setTwo就不会执行。而且这种写法的可读性不如直接分开写两行代码，实际开发里更推荐用后者。

内容的提问来源于stack exchange，提问作者Gen Tan