V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
zhangolve
V2EX  ›  JavaScript

九个你忽略的 React 无状态组件的优势

  •  
  •   zhangolve · 2016-12-13 21:05:05 +08:00 · 4747 次点击
    这是一个创建于 2931 天前的主题,其中的信息可能已经有所发展或是发生改变。

    正在用 React ,也就顺手翻译了篇 React 相关的文章,文章主干

    九个你忽略的 React 无状态组件的优势

    • Class 并无必要
    • 没有this关键字
    • 被迫使用最好的方法
    • 高信噪比
    • 代码自动补全
    • 很容易找出来臃肿的组件和低劣的数据结构
    • 便于理解
    • 便于测试
    • 表现

    译文: http://www.zcfy.cc/article/1980

    翻译不到之处,也可以评论里提出来。。

    7 条回复    2016-12-14 22:55:56 +08:00
    chemzqm
        1
    chemzqm  
       2016-12-13 21:36:44 +08:00
    我发现我常干的一件事就是把无状态组件转成有状态的,因为我用的 mobx 只能监听 render 里面的状态变化,这样做可以免去通过 props 传递状态的麻烦。减少组件的层级同时可以避免项目的过于碎片化,便于后续的调整。

    当然, 无状态组件肯定是更加有利于测试和重用,以及性能优化的,但对于一个发展期的项目而言,我更看重的是灵活性。

    我希望开发者多已自己实际情况进行思考权衡,而不是盲目相信所谓权威。
    zhangolve
        2
    zhangolve  
    OP
       2016-12-13 22:33:02 +08:00 via Android
    @chemzqm 你说的有道理,我没有在项目中用过 mobx ,但不要迷信权威这一点我还是认同的。我也是最近才了解到无状态组件,用 eslint-airbnb-config 在没有状态的组件中 lint 有提示要使用无状态组件的写法,也就逼着自己尽量按照一些规范来。
    Lpl
        3
    Lpl  
       2016-12-13 22:43:43 +08:00 via Android
    对于无状态的组件一般都是直接 export 出去, export default xxxx ,只用作渲染,父 container 传递数据和事件绑定到无状态组件。

    然后无状态组件再绑定数据和事件。这样子就能重用
    zhangolve
        4
    zhangolve  
    OP
       2016-12-13 22:45:30 +08:00 via Android
    @Lpl 学习了。
    rockswang
        5
    rockswang  
       2016-12-14 08:59:51 +08:00
    antd 官方基于 dva 的例程里面,所有组件都是无状态的,但是很多场景并不方便,比如一个倒计时的按钮,也得在全局 state 里面放倒计时计数
    zhangolve
        6
    zhangolve  
    OP
       2016-12-14 09:44:44 +08:00
    @rockswang 我也正在用 antd ,只是没有用 dva , antd 官方的例程上并没有见到无状态组件,倒是看的还在用 React.createClass({}) 这种方式 。 https://ant.design/components/form-cn/

    dva 倒是有些了解,按我的理解是对 react+redux 进行了封装,形成了自己的一套框架。还是想要把状态和表现分离开,所以用无状态组件也不奇怪了。能不能给个你说的例程链接,我瞅瞅。
    reus
        7
    reus  
       2016-12-14 22:55:56 +08:00
    同意,很好的做法
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   6085 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 02:12 · PVG 10:12 · LAX 18:12 · JFK 21:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.