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

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

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

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

zhangolve

2016-12-13 22:33:02 +08:00 via Android

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

Lpl

2016-12-13 22:43:43 +08:00 via Android

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

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

zhangolve

2016-12-13 22:45:30 +08:00 via Android

@Lpl 学习了。

rockswang

2016-12-14 08:59:51 +08:00

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

zhangolve

2016-12-14 09:44:44 +08:00

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

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

reus

2016-12-14 22:55:56 +08:00

同意，很好的做法