V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
KyrieJoshua
V2EX  ›  程序员

请教一下前端写 React 中三目运算相关的写法?

  •  
  •   KyrieJoshua ·
    kyriejoshua · 2020-10-27 18:54:14 +08:00 · 1512 次点击
    这是一个创建于 1249 天前的主题,其中的信息可能已经有所发展或是发生改变。

    render 渲染的时候,大家一般会写成

    return flag && <div />

    还是写成三目运算

    return flag ? <div /> : null

    平时写的时候略有争议,感觉自己水平有限说不出个一二三四。

    只能说前者复杂度低?但是可能会踩到 flag 为 0 渲染出来的坑。当然也可以写成 !!flag &&,但是有时会忘记,因为就算不写,程序一般也跑的起来。而三目运算要是写错,一般是运行不起来的。

    大家会怎么写,写的方式有理由吗,还是说只是风格不同而已。

    14 条回复    2020-10-28 11:58:19 +08:00
    dethan
        1
    dethan  
       2020-10-27 18:57:49 +08:00 via Android
    第一种 看久了有种赏心悦目的感觉
    vision1900
        2
    vision1900  
       2020-10-27 19:00:30 +08:00   ❤️ 2
    // 你要不问这问题,我是不会想起这写法的
    const If(condition,children) {
    return condition ? children : null;
    }

    <If condition={flag}>
    <div />
    </If>
    vision1900
        3
    vision1900  
       2020-10-27 19:01:51 +08:00
    const 改为 function 。。。
    Torpedo
        4
    Torpedo  
       2020-10-27 19:04:13 +08:00
    第一种 ts 类型有可能报错
    KyrieJoshua
        5
    KyrieJoshua  
    OP
       2020-10-27 19:08:51 +08:00
    @dethan 确实,可读性上来说是比较好一些
    @vision1900 这个好像是模版写法哈哈?很久没有这样写过了。。
    @Torpedo 还没在 ts 里试过这么写,估计写之前要先定义类型了。。

    我自己还是写三目比较多。。但也不得不承认,如果内容比较多,是有点丑陋。。
    vision1900
        6
    vision1900  
       2020-10-27 19:16:40 +08:00
    @vision1900 惭愧,好久没写代码,解构都忘了,就当上面是伪代码吗;刚刚用 TS 实现了下 If 这个组件
    import React from "react";

    interface Props {
    condition: boolean;
    children: React.ReactElement;
    }

    const If: React.FC<Props> = ({ condition, children }) => {
    return condition ? children : null;
    };

    export default If;
    akatquas
        7
    akatquas  
       2020-10-27 19:21:58 +08:00
    TLDR;
    第一种语义简单,节省字符数量,但是不能解决 falsy 的显示问题。比较适合 else 分支是不需要显示 Node 的情形。

    第二种三元表达式,字符较多,上下文阅读压力大。可以根据条件选择渲染两种不同的 Node,不仅限于 null 。

    写 JSX 还是要显示的写一些判断逻辑比较好。

    ```
    if (flag) {
    return <NodeA />
    }

    return <NodeB />
    ```

    ---

    以下较长。

    ```js
    const a =() => flag && <div />

    const b = () => flag ? <div /> : null
    ```

    两个方法会被 babel 编译成

    ```
    var a = function a() {
    return flag && /*#__PURE__*/React.createElement("div", null);
    };

    var b = function b() {
    return flag ? /*#__PURE__*/React.createElement("div", null) : null;
    };
    ```

    看起来还是有差别。但是,编译成字节码,两种的操作是完全一致的。

    ```
    node --print-bytecode --eval "var a = function a() { return flag && /*#__PURE__*/React.createElement("div", null); };"

    node --print-bytecode --eval "var b = function b() { return flag ? /*#__PURE__*/React.createElement("div", null) : null; };"

    ```
    wxsm
        8
    wxsm  
       2020-10-27 19:36:45 +08:00 via iPhone   ❤️ 1
    关于这个的思考,我写过一篇博文,欢迎讨论: https://wxsm.space/posts/2019-11-15-conditional-rendering-in-react.html
    jinliming2
        9
    jinliming2  
       2020-10-27 20:57:33 +08:00
    我觉得只是风格不一样。
    第一种要记得加 !!,控制显示与否的时候用。
    第二种在条件显示两种不同东西的时候用,return flag ? <A /> : <B />;
    mxT52CRuqR6o5
        10
    mxT52CRuqR6o5  
       2020-10-27 20:59:15 +08:00
    比较习惯第一种,一眼就能看出是条件展示组件
    后面一种写法,不看到冒号后面是不知道是二选一还是条件展示
    en20
        11
    en20  
       2020-10-27 21:21:48 +08:00 via iPhone
    如果写 rn 的话第一种会直接渲染字符串而报错
    KyrieJoshua
        12
    KyrieJoshua  
    OP
       2020-10-28 11:30:58 +08:00
    @akatquas 多谢大佬解答~
    @wxsm 我去看看~
    @jinliming2 我也是这么觉得,其实只是风格不一样而已。。
    @mxT52CRuqR6o5 选择不同吧。。第二种可读性确实弱一些
    @en20 记得之前也有踩过类似坑,所以写 React 的时候也沿用三目了。。
    svenzhaog
        13
    svenzhaog  
       2020-10-28 11:33:10 +08:00
    第一种我是不会选的
    第二种 三元的情况 我一般只会用在有两个组件渲染的情况
    按照你的例子我一般会这样写 要么提前抛出 null 要么最终兜底抛出 null
    renderTpl(){

    if(!flag)return null

    return <div/>

    }
    enjoyCoding
        14
    enjoyCoding  
       2020-10-28 11:58:19 +08:00
    第一种 第二种是什么鬼 给人看的嘛 都不如用 if
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2666 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 15:26 · PVG 23:26 · LAX 08:26 · JFK 11:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.