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

初学 react,请教大家创建 component 的方式。

  •  
  •   leedstyh · 2016-08-19 23:21:40 +08:00 · 2757 次点击
    这是一个创建于 3020 天前的主题,其中的信息可能已经有所发展或是发生改变。

    一般都用var CommentForm = React.createClass({})的方式,还是class CommentForm extends React.Component{}的方式,其实哪种方式我倒都可以接受,就是他们的语法有的地方不一样,感觉挺乱的。官方文档又没有统一的地方介绍(或是我没找到?)语法差别。这两种方式各有什么优缺点?

    另外能不能推荐个系统一点的教程(网站 /书),中英文都可, 15.x 版本的,官方文档看的有点儿乱。搜了几个都是以前版本的,虽然我不太清楚语法变动有多大,但感觉还是看最新的比较好!

    13 条回复    2016-09-03 00:04:26 +08:00
    shangjiyu
        1
    shangjiyu  
       2016-08-19 23:35:50 +08:00
    es6 后者
    leedstyh
        2
    leedstyh  
    OP
       2016-08-19 23:41:38 +08:00 via Android
    @shangjiyu 谢谢我也倾向于 es6 ,你怎么解决的官方文档都是 es5 的语法,有的地方和 es6 的不一样
    shyling
        3
    shyling  
       2016-08-19 23:44:09 +08:00
    当然是 stateless component 更为有爱啊
    FragmentLs
        4
    FragmentLs  
       2016-08-19 23:47:03 +08:00   ❤️ 1
    >Our eventual goal is for ES6 classes to replace React.createClass completely, but until we have a replacement for current mixin use cases and support for class property initializers in the language, we don't plan to deprecate React.createClass.

    https://facebook.github.io/react/blog/2015/03/10/react-v0.13.html
    cxbig
        5
    cxbig  
       2016-08-19 23:54:19 +08:00   ❤️ 2
    视频教程我推荐 EggHead
    https://egghead.io/
    leedstyh
        6
    leedstyh  
    OP
       2016-08-19 23:57:53 +08:00
    @shyling 我查了一下,是类似这个东东吗`const Pane = (props) => <div>{props.children}</div>;`
    yangxiongguo
        7
    yangxiongguo  
       2016-08-20 00:24:23 +08:00   ❤️ 1
    印象中 15.x 与以前版本语法没变化,因为是 0.14 直接跳 15.0 的,担心的话可以看看 15.0 的升级文档。

    官方文档看起来挺乱但建议按顺序一步步看下来,这个链接有介绍 es6 语法:

    https://facebook.github.io/react/docs/reusable-components.html#es6-classes
    leedstyh
        8
    leedstyh  
    OP
       2016-08-20 00:32:07 +08:00 via Android
    @yangxiongguo 原来在这个链接了,看来我着急了,看了 tutorial 有一堆疑问,就来发帖了
    df4VW
        9
    df4VW  
       2016-08-20 02:02:45 +08:00
    都行啊,无所谓啊
    adspe
        10
    adspe  
       2016-08-20 08:22:02 +08:00   ❤️ 1
    React.createClass({})是有 autobind 的而 es6 没有
    @leedstyh 这个是 stateless component
    lijsh
        11
    lijsh  
       2016-08-20 08:46:19 +08:00
    @cxbig 这个网站是真的好,不过现在月费贵了好多……
    cxbig
        12
    cxbig  
       2016-08-20 08:55:48 +08:00
    @lijsh 价格比较吃力的话,可以找人合买。
    simonguo
        13
    simonguo  
       2016-09-03 00:04:26 +08:00
    如果 你要用 class 就要牺牲 mixins,但是可以用高阶组件代替,而且在 class 自身的事件都需要 bind(this),用起来很烦。
    所有我现在还是采用的 createClass 方式来创建一个 React 组件,等后面使用 es7 decorator 的时候再替换成 class 来实现。

    另外分享一个 react 实现的组件库: https://github.com/rsuite/rsuite
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1185 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 18:33 · PVG 02:33 · LAX 10:33 · JFK 13:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.