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

[zhangolve]

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

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

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

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

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

[chemzqm]

我发现我常干的一件事就是把无状态组件转成有状态的，因为我用的 mobx 只能监听 render 里面的状态变化，这样做可以免去通过 props 传递状态的麻烦。减少组件的层级同时可以避免项目的过于碎片化，便于后续的调整。

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

我希望开发者多已自己实际情况进行思考权衡，而不是盲目相信所谓权威。

[zhangolve]

@chemzqm 你说的有道理，我没有在项目中用过 mobx ，但不要迷信权威这一点我还是认同的。我也是最近才了解到无状态组件，用 eslint-airbnb-config 在没有状态的组件中 lint 有提示要使用无状态组件的写法，也就逼着自己尽量按照一些规范来。

[Lpl]

对于无状态的组件一般都是直接 export 出去， export default xxxx ，只用作渲染，父 container 传递数据和事件绑定到无状态组件。

然后无状态组件再绑定数据和事件。这样子就能重用

[zhangolve]

@Lpl 学习了。

[rockswang]

antd 官方基于 dva 的例程里面，所有组件都是无状态的，但是很多场景并不方便，比如一个倒计时的按钮，也得在全局 state 里面放倒计时计数

[zhangolve]

@rockswang 我也正在用 antd ，只是没有用 dva ， antd 官方的例程上并没有见到无状态组件，倒是看的还在用 React.createClass({}) 这种方式 。 https://ant.design/components/form-cn/

dva 倒是有些了解，按我的理解是对 react+redux 进行了封装，形成了自己的一套框架。还是想要把状态和表现分离开，所以用无状态组件也不奇怪了。能不能给个你说的例程链接，我瞅瞅。

[reus]

同意，很好的做法