React无状态组件——为可复用而生

#21

参考ant design的组件模式,你就会发现组件内部没有state :sleeping: 找蚂蚁金服干架去。

#22

记得Redux作者有说过内部State是可以的

无论如何总会有内部状态吧,极端一点比如动画的进度

#23

单人开发的项目,用内部state管理也有方便之处。

如果是多人团队,需要做很多单元测试的话,就需要有个统一的规范了,antd的规范就是统一抽象为无状态组件的方式,如果有内部state的组件出现,对于多人开发的团队维护会带来很大的成本,也会降低复用性。

大公司都讲流程化,小公司一个人做前端爱怎样就怎样呗

#24

https://news.ycombinator.com/item?id=12089570

Facebook是使用内部state的。

#25

分享的很好,可是我们都不是Facebook那些牛人的水平,自己实践出来的才是适合自己的。

#26

随便找了个antd的源码,表格的排序

toggleSortOrder: function toggleSortOrder(order, column) {
var _props;

var sortColumn = this.state.sortColumn;
var sortOrder = this.state.sortOrder;
var sorter = void 0;
// 只同时允许一列进行排序,否则会导致排序顺序的逻辑问题
var isSortColumn = this.isSortColumn(column);
if (!isSortColumn) {
#27

表格是个很多小组件的组合体,已经不能算是一个单纯的组件了,而是一个组件容器,容器内部用state就能很好的保存各种状态,很reducer的功能很相似。

无论是有状态组件还是无状态组件,我都在实际项目尝试应用过。还是那个道理,如果只是一个单纯的dom元素组件,就写出无状态最合适,如果这个组件包含多种组合,比如你列举到的table,每个表格都包含多个小组件,这样的table是个复杂的大组件,最好的维护办法就是通过state来保存一些状态。

组件内部state和reducer中的state有一点很大的区别,就是在页面跳转或者一些事件执行的过程中,组件可能会被卸载掉,那么内部state就会被清空状态,然而reducer中的state是全局共享的,所以内部state有这样的局限性,你最终还是要把内部state选中的状态保存到缓存或者reducer才能保证较长时间可用。

#28

dan也是使用内部state的

1 Like
#29

现在redux 的文档有的概念不清楚(我3月份看的时候,还不是现在这个样子),并不是 所有的state 的都要用redux。https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.6jp66vl6s 这里是作者的理念。

#30

管他清不清晰,又不是用到所有的知识点,能用部分功能实现项目就行了。。

#31

既然要用redux,那肯定没内部state最好了,组件的复用性最高