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

2020-10-27 18:54:14 +08:00
 KyrieJoshua

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

return flag && <div />

还是写成三目运算

return flag ? <div /> : null

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

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

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

1649 次点击
所在节点    程序员
14 条回复
dethan
2020-10-27 18:57:49 +08:00
第一种 看久了有种赏心悦目的感觉
vision1900
2020-10-27 19:00:30 +08:00
// 你要不问这问题,我是不会想起这写法的
const If(condition,children) {
return condition ? children : null;
}

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

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

if(!flag)return null

return <div/>

}
enjoyCoding
2020-10-28 11:58:19 +08:00
第一种 第二种是什么鬼 给人看的嘛 都不如用 if

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/719149

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX