React.js中return执行逻辑及无花括号if的用法疑问

原理 #

在JavaScript中，if语句的语法规则是：如果条件后面只有单条执行语句，可以省略包裹它的花括号{}。这条语句会成为if条件为真时的唯一执行体。

你给出的代码里，if (checkDone && done && !props.force) return就是典型场景：当条件为真时，执行return语句直接终止函数，后面的setDone(true)和publishCdmEvent(...)自然不会被执行。本质和带花括号的if (...) { return }完全等价，只是写法更简洁。

用途 #

这种写法属于提前退出模式（守卫模式），核心作用是：

• 把不符合业务逻辑的边界情况先处理掉，直接退出函数，避免后续不必要的计算
• 让核心业务逻辑不需要嵌套在else块里，代码结构更扁平，可读性更高

比如你的示例代码中，当checkDone和done都为真，且没有force强制触发的需求时，就没必要执行状态更新和事件发布，直接退出是最高效的处理方式。

替代方案 #

1. 显式添加花括号（最常用的规范写法）

如果团队代码规范要求必须用花括号包裹if的执行体，或者担心后续维护时误加代码导致逻辑错误，直接加上花括号即可，逻辑完全一致：

const fireScreenDisplayed = (props = {}) => {
    _checkScreenValidity()
    if (checkDone && done && !props.force) {
        return
    }
    setDone(true)
    publishCdmEvent(_buildEvent('ScreenDisplayed', props))
}

2. 用else包裹核心逻辑（不推荐，增加嵌套）

把核心逻辑放到else块里，虽然逻辑正确，但会多一层嵌套，代码可读性不如提前退出：

const fireScreenDisplayed = (props = {}) => {
    _checkScreenValidity()
    if (checkDone && done && !props.force) {
        // 条件满足时什么都不做
    } else {
        setDone(true)
        publishCdmEvent(_buildEvent('ScreenDisplayed', props))
    }
}

3. 逻辑短路写法（可读性差，不推荐）

利用JavaScript逻辑与&&的短路特性，当条件为假时才执行后续代码，但这种写法可读性低，仅作了解：

const fireScreenDisplayed = (props = {}) => {
    _checkScreenValidity()
    !(checkDone && done && !props.force) && (
        setDone(true),
        publishCdmEvent(_buildEvent('ScreenDisplayed', props))
    )
}

注意点 #

省略花括号时，一定要注意：只有紧跟在if条件后的第一行代码属于if的执行体。如果后续换行写了代码，会被当成函数的全局代码执行，比如下面的错误写法：

// 错误示例！
if (checkDone && done && !props.force)
    return
    setDone(true) // 这行永远会执行，因为不在if的作用域内

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