logo
Redian新闻
>未名空间
>Programming - 葵花宝典
>
react is total crap
avatar
react is total crap# Programming - 葵花宝典
f*i
1 楼
家里的一个纱窗原先就掀起一个角，打算最后收拾小东西的时候一起修。昨天刮了大风
把半个纱窗吹起来了，想着早点解决吧。我大致看了一下好像需要外面用螺丝之类的固
定住。但是不太清楚需要到哪里买什么材料，或者说找人修需要找什么工种的工人修理
？（如果哪位知道材料，请告之材料的具体英文名字和型号尺寸。我是一个纯菜鸟，多
谢了先。）
avatar
l*n
2 楼
React Inline Styles are Fundamentally Flawed
https://byjoeybaker.com/react-inline-styles
参加一个js的会议，大牛正在讲着web component，突然冒出一句react is complete
crap。
大牛还讲了， why it is crap? because it wants to do everything in js. That
is complete nuts.
see the link above to understand yourself.
trying to render the DOM using js is also nuts.
大牛说了in many situations, using the browser native API, for example the
DOM API, and css animations are always the best choices.
by letting the framework to render the DOM for you is total nuts and the
framework is full of pitfalls and flaws.
avatar
c*t
3 楼
你是说纱窗的框子还是试试纱窗上的纱?如果是后者,你得把边拆了.

【在 f****i 的大作中提到】
: 家里的一个纱窗原先就掀起一个角，打算最后收拾小东西的时候一起修。昨天刮了大风
: 把半个纱窗吹起来了，想着早点解决吧。我大致看了一下好像需要外面用螺丝之类的固
: 定住。但是不太清楚需要到哪里买什么材料，或者说找人修需要找什么工种的工人修理
: ？（如果哪位知道材料，请告之材料的具体英文名字和型号尺寸。我是一个纯菜鸟，多
: 谢了先。）
avatar
s*y
4 楼
So backbone js rules? Even Angular is crab sometimes.
avatar
T*J
5 楼
图？

【在 f****i 的大作中提到】
: 家里的一个纱窗原先就掀起一个角，打算最后收拾小东西的时候一起修。昨天刮了大风
: 把半个纱窗吹起来了，想着早点解决吧。我大致看了一下好像需要外面用螺丝之类的固
: 定住。但是不太清楚需要到哪里买什么材料，或者说找人修需要找什么工种的工人修理
: ？（如果哪位知道材料，请告之材料的具体英文名字和型号尺寸。我是一个纯菜鸟，多
: 谢了先。）
avatar
l*n
6 楼
this is the natural workflow:
http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
What triggers a reflow or a repaint
Anything that changes input information used to construct the rendering tree
can cause a repaint or a reflow, for example:
Adding, removing, updating DOM nodes
Hiding a DOM node with display: none (reflow and repaint) or visibility:
hidden (repaint only, because no geometry changes)
Moving, animating a DOM node on the page
Adding a stylesheet, tweaking style properties
User action such as resizing the window, changing the font size, or (oh, OMG
, no!) scrolling
avatar
T*J
7 楼
不用拆

【在 c*****t 的大作中提到】
: 你是说纱窗的框子还是试试纱窗上的纱?如果是后者,你得把边拆了.
avatar
l*n
8 楼
those are ok. They don't get rid of the native DOM API.
React completely gets rid of the DOM API, that is why it is total crap.
you should read the article and understand the point.

【在 s*********y 的大作中提到】
: So backbone js rules? Even Angular is crab sometimes.
avatar
f*i
9 楼
这个是图片，不好意思，第一次传图

【在 f****i 的大作中提到】
: 家里的一个纱窗原先就掀起一个角，打算最后收拾小东西的时候一起修。昨天刮了大风
: 把半个纱窗吹起来了，想着早点解决吧。我大致看了一下好像需要外面用螺丝之类的固
: 定住。但是不太清楚需要到哪里买什么材料，或者说找人修需要找什么工种的工人修理
: ？（如果哪位知道材料，请告之材料的具体英文名字和型号尺寸。我是一个纯菜鸟，多
: 谢了先。）
avatar
l*n
10 楼
一个Java大牛说，java你就不要优化了，优化你也优化不过compiler，react再怎么优
化，也优化不过browser，
Browsers are smart
avatar
c*t
11 楼
你这个是折了吧.应该一边有半月形的钢片,装的时候卡住就好
你这样的拿个双面胶粘住吧

【在 f****i 的大作中提到】
: 这个是图片，不好意思，第一次传图
avatar
l*n
12 楼
react的.bind(this)简直是一坨啊。都什么年代了，还bind（this），不是脑残，是什
么，现在都arrow function了。
avatar
T*J
13 楼
看不清

【在 f****i 的大作中提到】
: 这个是图片，不好意思，第一次传图
avatar
l*n
14 楼
render: function() {
return (

{this.state.items.map(function(item, i) {
var boundClick = this.handleClick.bind(this, i);
return (
/>
);
}, this)}

);
}
这个不是有病，是什么：var boundClick = this.handleClick.bind(this, i);
avatar
f*i
15 楼
是边儿，这个纱窗边角都是很薄的钢骨架子，大致看了一下其他的纱窗，好像是每个横
着的钢骨边上各有一个固定的东西。但是没搞明白是什么起到固定作用的。

【在 c*****t 的大作中提到】
: 你是说纱窗的框子还是试试纱窗上的纱?如果是后者,你得把边拆了.
avatar
l*n
16 楼
angular 2:

这个是不是简洁多了，没有脑残bind了。
avatar
f*i
17 楼
汗，那个位置拍不了特别清楚的，我爬不上去，家里还没买梯子呢。要想很近的拍照，
我得徒手爬上去......，我怕摔个半残。大致的这个类型的纱窗应该可以根据那个掀起
来的情形估计一下吧？

【在 T**J 的大作中提到】
: 看不清
avatar
l*n
18 楼
react比angular恶心一万倍都不止。angular至少还能用jquery操作DOM，到了react，
DOM API被完全禁止了，意味着jquery完全无法使用了，如果mutate DOM using jQuery
，那么就出现这样的bug：
Uncaught Invariant Violation: Unable to find element with ID
而且根本无法debug。
avatar
f*i
19 楼
原先是一个小角被掀起来了，昨天大风给刮的另外一个固定的角也给掀起来了。结果就
成了下半边都折起来了。我试了一下，从内部没办法扳回去。估计得上房顶从外面往里
推给还原，然后得买固定的东西。我就是没搞懂那个固定的好像是钉子的东西是啥，在
哪儿买。上边和下面都有类似推拉门的滑槽，其他边角有类似钉子的东西固定住。拿两
面胶效果如何？能持续多久？我想着反正肯定是要在外面固定住窗子，不如就一次性收
拾齐活儿了。

【在 c*****t 的大作中提到】
: 你这个是折了吧.应该一边有半月形的钢片,装的时候卡住就好
: 你这样的拿个双面胶粘住吧
avatar
d*r
20 楼
我咋用 Angular1 的时候，就觉得排斥 JQuery 呢
avatar
f*r
21 楼
别折腾了，把纱窗整个卸下来，在半截那有个弹簧的顶铉，压一下就能推出来，拿到
ACE那，几块钱的事，再装回去
avatar
w*m
22 楼
为啥为啥要pass一个function到子component
代码太老了
binding也没必要吧
  • dispatch({"type": "TOGGLE_TODO", "id": id})}
    >
    {text}


    • i}

    【在 l**********n 的大作中提到】
    : react比angular恶心一万倍都不止。angular至少还能用jquery操作DOM，到了react，
    : DOM API被完全禁止了，意味着jquery完全无法使用了，如果mutate DOM using jQuery
    : ，那么就出现这样的bug：
    : Uncaught Invariant Violation: Unable to find element with ID
    : 而且根本无法debug。
    avatar
    f*i
    23 楼
    多谢，明天试试。

    【在 f********r 的大作中提到】
    : 别折腾了，把纱窗整个卸下来，在半截那有个弹簧的顶铉，压一下就能推出来，拿到
    : ACE那，几块钱的事，再装回去
    avatar
    S*n
    24 楼
    js社区的发展趋势就是 出来一个新轮子，瞬间被捧上天 (特别是大厂出的)，然后一堆
    人开始写x reasons i like xxx, why I migrate from yyy. 然后过一段时间开始出现
    ：xxx is anti pattern. why I hate xxx. x reasons I move away from xxx. 然后
    新轮子在这中间出现。于是又是 x reasons I like zzz 周而复始，生生不息
    avatar
    W*o
    25 楼
    大牛对于popularity不算个屌，关键还是看eco system
    avatar
    N*m
    26 楼
    同意大牛说的

    【在 l**********n 的大作中提到】
    : React Inline Styles are Fundamentally Flawed
    : https://byjoeybaker.com/react-inline-styles
    : 参加一个js的会议，大牛正在讲着web component，突然冒出一句react is complete
    : crap。
    : 大牛还讲了， why it is crap? because it wants to do everything in js. That
    : is complete nuts.
    : see the link above to understand yourself.
    : trying to render the DOM using js is also nuts.
    : 大牛说了in many situations, using the browser native API, for example the
    : DOM API, and css animations are always the best choices.
    avatar
    d*r
    27 楼
    确实 XD

    【在 S*******n 的大作中提到】
    : js社区的发展趋势就是 出来一个新轮子，瞬间被捧上天 (特别是大厂出的)，然后一堆
    : 人开始写x reasons i like xxx, why I migrate from yyy. 然后过一段时间开始出现
    : ：xxx is anti pattern. why I hate xxx. x reasons I move away from xxx. 然后
    : 新轮子在这中间出现。于是又是 x reasons I like zzz 周而复始，生生不息
    avatar
    y*6
    28 楼
    那么完全的js新手应该学啥？

    【在 d*******r 的大作中提到】
    : 确实 XD
    avatar
    h*b
    29 楼
    react把html塞入js就是love/hate, 没有中间的。
    我觉得工作数量，还有生态环境很难追上angular。当然如果你喜欢也不会有很大待遇
    上的区别。
    问题是angular 2改的太多了，你随便搜各种工作需求，轮子，插件，documentation都
    是angular 1为主，而且我真心不喜欢typescript, angular 2的documentation/例子一
    半ts一半js很烦。
    所以我还是暂时用angular 1。 ionic creator真的很强，用gui画出界面/workflow给
    客户demo，然后直接export成干净template代码开始开发后台。这种工具目前都是
    angular 1。
    avatar
    y*n
    30 楼
    我觉得react不错。最近用react搞了一个SPA。
    https://my.pkgrun.com/
    angular我不太喜欢，太复杂，而且以前被google坑过，所以用g家的东西提心吊胆。
    React比较轻，所以心理负担小一点。
    关于这个inline styles，这个不是必须的，我上面这个例子里面inline用的很少。主
    要还是css。
    而且inline style这个也不能一棒子打死。
    react这种把所有东西都component化的思路，确实比较适合inline style（并非必须）。
    把css单独弄出去的好处是 html这里比较clean。但是时间久了，一个项目里的css文件
    就无比复杂，很多东西要删起来很痛苦。
    React这种component自带style的，你不用的话，自己写一个component替换掉就是了，
    这边整个component扔掉就行。不用操心要清除js代码，清理不用的css。
    上面这个项目里面，用了material ui，用起来就很clean。不会污染其他地方。
    avatar
    y*n
    31 楼
    React用js直接渲染DOM这个我个人理解是和React长期远景是有关系的。
    到目前为止，虽然React还做不到write once，run everywhere（跨平台）。但是把DOM
    从business logic离别分离出来无疑是很重要的一步。
    这样开发者只要负责用js完成business logic就行了。至于最后渲染出来是浏览器里面
    的DOM还是其他东西，完全可以交给react负责。
    如果还是用html的模板引擎，那实际上和传统的开发没有本质区别。
    开发的趋势就是一层一层的抽象。
    我觉得目前这些轮子里面，react这个抽象是最靠谱的。
    avatar
    n*w
    32 楼
    ionic 2 等着angular 2.

    【在 h******b 的大作中提到】
    : react把html塞入js就是love/hate, 没有中间的。
    : 我觉得工作数量，还有生态环境很难追上angular。当然如果你喜欢也不会有很大待遇
    : 上的区别。
    : 问题是angular 2改的太多了，你随便搜各种工作需求，轮子，插件，documentation都
    : 是angular 1为主，而且我真心不喜欢typescript, angular 2的documentation/例子一
    : 半ts一半js很烦。
    : 所以我还是暂时用angular 1。 ionic creator真的很强，用gui画出界面/workflow给
    : 客户demo，然后直接export成干净template代码开始开发后台。这种工具目前都是
    : angular 1。
    avatar
    h*8
    33 楼
    Angular 要学一大堆ng tags 也是烦死了
    而且 typescript 是比较烦烦的
    React native 又比较容易
    话说Angular 2 不也要用vdom 了？ 还有piggyback reactnative？
    avatar
    w*m
    34 楼
    你这个app看上去不错啊。
    楼上说不能用jquery的可以用你这个模版了。

    ）。

    【在 y*******n 的大作中提到】
    : 我觉得react不错。最近用react搞了一个SPA。
    : https://my.pkgrun.com/
    : angular我不太喜欢，太复杂，而且以前被google坑过，所以用g家的东西提心吊胆。
    : React比较轻，所以心理负担小一点。
    : 关于这个inline styles，这个不是必须的，我上面这个例子里面inline用的很少。主
    : 要还是css。
    : 而且inline style这个也不能一棒子打死。
    : react这种把所有东西都component化的思路，确实比较适合inline style（并非必须）。
    : 把css单独弄出去的好处是 html这里比较clean。但是时间久了，一个项目里的css文件
    : 就无比复杂，很多东西要删起来很痛苦。
    avatar
    O*b
    35 楼
    请问这个APP有教程或者模板吗？

    ）。

    【在 y*******n 的大作中提到】
    : 我觉得react不错。最近用react搞了一个SPA。
    : https://my.pkgrun.com/
    : angular我不太喜欢，太复杂，而且以前被google坑过，所以用g家的东西提心吊胆。
    : React比较轻，所以心理负担小一点。
    : 关于这个inline styles，这个不是必须的，我上面这个例子里面inline用的很少。主
    : 要还是css。
    : 而且inline style这个也不能一棒子打死。
    : react这种把所有东西都component化的思路，确实比较适合inline style（并非必须）。
    : 把css单独弄出去的好处是 html这里比较clean。但是时间久了，一个项目里的css文件
    : 就无比复杂，很多东西要删起来很痛苦。
    avatar
    c*0
    38 楼

    ）。
    你这个网站用Polymer一样开发很快，你说的好处都有，还不用纠缠JSX。
    Polymer和React的思想都是像搭积木一样去做网站，只不过一个是以传统html／css／
    js的方式，一种是Js all the way的方式。

    【在 y*******n 的大作中提到】
    : 我觉得react不错。最近用react搞了一个SPA。
    : https://my.pkgrun.com/
    : angular我不太喜欢，太复杂，而且以前被google坑过，所以用g家的东西提心吊胆。
    : React比较轻，所以心理负担小一点。
    : 关于这个inline styles，这个不是必须的，我上面这个例子里面inline用的很少。主
    : 要还是css。
    : 而且inline style这个也不能一棒子打死。
    : react这种把所有东西都component化的思路，确实比较适合inline style（并非必须）。
    : 把css单独弄出去的好处是 html这里比较clean。但是时间久了，一个项目里的css文件
    : 就无比复杂，很多东西要删起来很痛苦。
    avatar
    y*n
    39 楼
    之前很多项目里面，大致用jQuery的地方有两种。
    一种就是最简单的一些动效。
    另外一种就是大量的DOM操作，比如在前端渲染，或者巨复杂的form处理。
    用React的话，基本上DOM这部分就不需要jQuery了，所以我也没有用jQuery做DOM操作
    的需求，按照楼主所说，这里jQuery会fail，但是我没有试过。
    动效的话，我用的amaze ui，或者bootstrap里面很多是用js实现的，都需要jQuery，
    目前为止我还没发现有fail的地方。
    比如toggle一个侧边栏，或者dropdown menu之类的。

    【在 d*******r 的大作中提到】
    : 跟 JQuery 的插件联合用，有啥问题没
    avatar
    l*n
    40 楼
    用jQuery，你会死得很难看。根本没法debug，没办法，我直接把jquery的插件用react
    重现实现了一遍。因为react要求list的话，就需要加key，要不然死得很难看。

    【在 d*******r 的大作中提到】
    : 跟 JQuery 的插件联合用，有啥问题没
    avatar
    y*n
    41 楼
    工具太多了。同样的app用什么手段都能实现。
    具体选哪一个纯粹是个人喜好问题。
    这个react的app也是我第一次用react做完整的SPA。之前只有两三次使用react的简单
    经历，就是很简单的一个页面里ajax load完数据以后渲染一个列表这样的功能。
    觉得react比较对路子纯粹是因为学习门槛低，有些地方和django有些像。react还搞了
    个简单的mixin，很好用。

    【在 c*******0 的大作中提到】
    :
    : ）。
    : 你这个网站用Polymer一样开发很快，你说的好处都有，还不用纠缠JSX。
    : Polymer和React的思想都是像搭积木一样去做网站，只不过一个是以传统html／css／
    : js的方式，一种是Js all the way的方式。
    avatar
    d*r
    42 楼
    主要是大量的已有lib, 插件，是依赖 JQuery 的，不知道能混用不
    当年用 Angular 1 的时候，发现用起来麻烦，prefer 封装在 Angular Directive 里面

    【在 y*******n 的大作中提到】
    : 之前很多项目里面，大致用jQuery的地方有两种。
    : 一种就是最简单的一些动效。
    : 另外一种就是大量的DOM操作，比如在前端渲染，或者巨复杂的form处理。
    : 用React的话，基本上DOM这部分就不需要jQuery了，所以我也没有用jQuery做DOM操作
    : 的需求，按照楼主所说，这里jQuery会fail，但是我没有试过。
    : 动效的话，我用的amaze ui，或者bootstrap里面很多是用js实现的，都需要jQuery，
    : 目前为止我还没发现有fail的地方。
    : 比如toggle一个侧边栏，或者dropdown menu之类的。
    avatar
    d*r
    43 楼
    是不是要考虑向前兼容的话，还是 vue.js 最保险

    react

    【在 l**********n 的大作中提到】
    : 用jQuery，你会死得很难看。根本没法debug，没办法，我直接把jquery的插件用react
    : 重现实现了一遍。因为react要求list的话，就需要加key，要不然死得很难看。
    avatar
    s*o
    44 楼
    vue 2.0 has virtual dom and supports jsx, so it's crap too, to some 大妞 :)

    【在 d*******r 的大作中提到】
    : 是不是要考虑向前兼容的话，还是 vue.js 最保险
    :
    : react
    avatar
    d*r
    45 楼
    T_T
    前端框架，天天自己乱革命，太烦了。。。

    【在 s***o 的大作中提到】
    : vue 2.0 has virtual dom and supports jsx, so it's crap too, to some 大妞 :)
    avatar
    Y*G
    46 楼
    主要问题不是优化吧？browser虽说都打着DOM的旗号，但是都有细微的区别。用
    virtual DOM至少不用担心browser的兼容性问题了吧？

    【在 l**********n 的大作中提到】
    : 一个Java大牛说，java你就不要优化了，优化你也优化不过compiler，react再怎么优
    : 化，也优化不过browser，
    : Browsers are smart
    avatar
    h*b
    47 楼
    vue太小众了。
    随便搜了一下indeed的加州angular javascript工作是1824, react是1034。vue是13个
    ，随大流绝对没错。

    【在 d*******r 的大作中提到】
    : 是不是要考虑向前兼容的话，还是 vue.js 最保险
    :
    : react
    avatar
    l*n
    48 楼
    react真是一坨屎，竟然限制这么多，无法inline svg。弱智
    avatar
    l*n
    49 楼
    The following SVG elements are supported in React.DOM.*:
    circle clipPath defs ellipse g image line linearGradient mask path pattern
    polygon polyline radialGradient rect stop svg text tspan
    avatar
    l*n
    50 楼
    真几把脑残
    avatar
    l*n
    51 楼
    真几把脑残，不支持namespace，那怎么实现动画。
    Namespace tags are not supported
    avatar
    f*2
    52 楼
    学前端不是找工作用，是自己业余做些项目用，主要考虑上手块


    :
    vue太小众了。

    : 随便搜了一下indeed的加州angular javascript工作是1824, react是1034。vue
    是13个

    : ，随大流绝对没错。



    【在 h******b 的大作中提到】
    : vue太小众了。
    : 随便搜了一下indeed的加州angular javascript工作是1824, react是1034。vue是13个
    : ，随大流绝对没错。
    avatar
    l*n
    53 楼
    用javascript实现动画本来就是非常脑残的行为。
    avatar
    l*n
    54 楼
    jsx inline html template 应该属于非常脑残的行为，应该用es6的template literal
    avatar
    l*n
    55 楼
    我自己写的代码都觉得恶心：
    const getDialogContent = () => {
    return _.range(3).map((i) => {
    let r = i * 3;
    let cells = [1, 2, 3].map((c) => {
    let active = (c+r === this.state.selectedCell);
    let className = cx(s.tile, { active: active});
    return
    handleDialogTileClick.bind(this, c + r)} key={c}>{c + r}
    avatar
    l*n
    56 楼
    用js返回html，这也是醉了。
    avatar
    l*n
    57 楼
    尼玛这在angular2里这么写：

    event)">
    avatar
    l*n
    58 楼
    to close a dialog, I have to do this:
    handleOpen = () => {
    this.setState({open: true});
    };
    wtf
    in angular, I do this:
    this.modal.open();
    avatar
    a*o
    59 楼
    既然你这么讨厌它，就赶紧换回angular。没有人拿枪顶着你用react吧？

    【在 l**********n 的大作中提到】
    : to close a dialog, I have to do this:
    : handleOpen = () => {
    : this.setState({open: true});
    : };
    : wtf
    : in angular, I do this:
    : this.modal.open();
    avatar
    w*m
    60 楼
    不客气的说，你写的太难看
    从来没看过return里面套return的。
    要用stateless component，就不要设置状态。
    状态都给redux，argument里面进来，dispatch里面出去。
    function Board({ rows }) {
    return (

      {rows.map(row =>
      key = {row.id}
      {...row}
      />
      )}

    )
    }
    function Row({ text, dispatch }) {
    return (
  • dispatch(handleTileClick())}>
    {text}

    • )
    }

    【在 l**********n 的大作中提到】
    : 我自己写的代码都觉得恶心：
    : const getDialogContent = () => {
    : return _.range(3).map((i) => {
    : let r = i * 3;
    : let cells = [1, 2, 3].map((c) => {
    : let active = (c+r === this.state.selectedCell);
    : let className = cx(s.tile, { active: active});
    : return
    : handleDialogTileClick.bind(this, c + r)} key={c}>{c + r}
    相关阅读
    SENIOR FLAG码工收入不比医生律师少多少了清华学霸Remote Development with VS Code现在的编程考试都这样吗？ (转载)App Engine 也算是 serverless？closure的优点是啥?也跟一下风一个华为， 就把美国吓破了胆数据库/数据仓库技术已经停滞好多年了研究一下云部署方案前后端分离为什么最近几年才开始流行？Statistician OpportunityAWS Web Hosting ELB costs被三哥写的java绕晕了我公司的两个CTO匹兹堡大学医学院博士后位置 (转载)还记得之前我有几个贴推论AI走向超现实吗？这个匿名类怎么写？StackOverflow咋回事行业是不是变动在即
    logo
    联系我们隐私协议©2024 redian.news
    Redian新闻
    Redian.news刊载任何文章，不代表同意其说法或描述，仅为提供更多信息，也不构成任何建议。文章信息的合法性及真实性由其作者负责，与Redian.news及其运营公司无关。欢迎投稿，如发现稿件侵权，或作者不愿在本网发表文章，请版权拥有者通知本网处理。