render 渲染的时候,大家一般会写成
return flag && <div />
还是写成三目运算
return flag ? <div /> : null
平时写的时候略有争议,感觉自己水平有限说不出个一二三四。
只能说前者复杂度低?但是可能会踩到 flag 为 0 渲染出来的坑。当然也可以写成 !!flag &&
,但是有时会忘记,因为就算不写,程序一般也跑的起来。而三目运算要是写错,一般是运行不起来的。
大家会怎么写,写的方式有理由吗,还是说只是风格不同而已。
1
dethan 2020-10-27 18:57:49 +08:00 via Android
第一种 看久了有种赏心悦目的感觉
|
2
vision1900 2020-10-27 19:00:30 +08:00 2
// 你要不问这问题,我是不会想起这写法的
const If(condition,children) { return condition ? children : null; } <If condition={flag}> <div /> </If> |
3
vision1900 2020-10-27 19:01:51 +08:00
const 改为 function 。。。
|
4
Torpedo 2020-10-27 19:04:13 +08:00
第一种 ts 类型有可能报错
|
5
KyrieJoshua OP @dethan 确实,可读性上来说是比较好一些
@vision1900 这个好像是模版写法哈哈?很久没有这样写过了。。 @Torpedo 还没在 ts 里试过这么写,估计写之前要先定义类型了。。 我自己还是写三目比较多。。但也不得不承认,如果内容比较多,是有点丑陋。。 |
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; |
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; };" ``` |
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
|
9
jinliming2 2020-10-27 20:57:33 +08:00
我觉得只是风格不一样。
第一种要记得加 !!,控制显示与否的时候用。 第二种在条件显示两种不同东西的时候用,return flag ? <A /> : <B />; |
10
mxT52CRuqR6o5 2020-10-27 20:59:15 +08:00
比较习惯第一种,一眼就能看出是条件展示组件
后面一种写法,不看到冒号后面是不知道是二选一还是条件展示 |
11
en20 2020-10-27 21:21:48 +08:00 via iPhone
如果写 rn 的话第一种会直接渲染字符串而报错
|
12
KyrieJoshua OP @akatquas 多谢大佬解答~
@wxsm 我去看看~ @jinliming2 我也是这么觉得,其实只是风格不一样而已。。 @mxT52CRuqR6o5 选择不同吧。。第二种可读性确实弱一些 @en20 记得之前也有踩过类似坑,所以写 React 的时候也沿用三目了。。 |
13
svenzhaog 2020-10-28 11:33:10 +08:00
第一种我是不会选的
第二种 三元的情况 我一般只会用在有两个组件渲染的情况 按照你的例子我一般会这样写 要么提前抛出 null 要么最终兜底抛出 null renderTpl(){ if(!flag)return null return <div/> } |
14
enjoyCoding 2020-10-28 11:58:19 +08:00
第一种 第二种是什么鬼 给人看的嘛 都不如用 if
|