Stateless or stateful component ?

#1

stateless 组件其实就是一个简单的接受传参的函数,而 stateful 组件 是拥有自己状态的组件。
什么时候该用有状态,什么时候该用无状态。

比如我有一个 dropdown 组件,我点击展开,就会出现下拉。这里就有一个状态 open ,值是 false 或者 true。我更倾向于把它写成一个 stateless 组件, open 的值通过父层传递。

但是把他写成有状态的也未曾不可,状态 open 的值通过父层传递,自己接管。

还是倾向于写 stateless 组件,因为省去了许多生命周期的 Hook,所以会有性能的提升,对 react 后面新的性能优化也有帮助。
而且状态都是通过父层传递,想想用 redux,那么状态都是可以保存的,本地或者服务器。
比如我展开了一个 dropdown,然后不小心刷新了页面,新的页面状态并没有丢失,所以 dropdown 还是展开的。这只是其中一个例子。

后面可以玩的更多。。。

So, stateless or stateful, what you think ?

#2

好像我理解错了stateless 和 stateful :disappointed_relieved:

谢谢作者,俺好像又懂了些新概念

好吧,又一次修改,想问问大大有木有demo,这种无状态+redux好像特别棒

#3

这个问题挺复杂的;简单的答案是应该写成无态的。复杂的答案可以写超过5000字还得有很多代码来说明。

#4

能写成 stateless 都应该写成 stateless
但凡你有一点犹豫都写成 stateful,然后加个 FIXME 未来再解决
这样怎么样

#5

写成 stateless 更加容易 :smile:

#6

现在都在忙搬运基础组件…

有时间的话,我两者都写,然后再对比,刚刚撸了个简单的基础 input 组件,解决中文输入 composition 的问题,参考的 draft-js 方法。

可以看看:BaseInput

有时候写 stateless 组件没思路,就先写了个 stateful 的,后来写着就发现用 stateless 可以写的更加简单
并且功能也没有丢失 :smile:

#7

你这么考虑。

react的defaultState,和reducer的参数缺省值是一回事;react的setState,和reducer的return new state是一回事;所以问题演化成这个state是放在全局的redux store里还是放在local的component里;

这是functional编程和object编程的根深蒂固的区别;

redux是从全局角度去定义系统的state的,react则是基于oo的角度去encapsulate;但是redux里对action是有定义的;react里没有明确定义,setState()一种更新方法,通过调用ReactDOM.render()强制props更新也是一种方法,但这正是react发生自我混乱的地方;

如果你选了redux,你会问自己,为毛我还需要setState()或者props?为什么不能从store state开始算出一个component在render时需要的所有态和变量?

这个想法是对的;

因为react强制了一种父子耦合,这个耦合是view的耦合,和state无关,谁说view layer一定要是react呢?有其他的render引擎行不行?

props的唯一方便是写重用的pure view;用它传递state是错的;

redux的特点是:它用了一个全局广播机制;从效率而言这是缺点,但是从去耦合来说,这是优点;很抱歉我这会儿没时间举复杂的例子;

如果把全部state都铺到redux里,代码写得到处都是是一个担心,也许这可以通过把reducer代码和component代码写在一个文件里解决,我不太确定;

更核心的问题是什么是action,这个很难长话短说,建议了解一下TLA模型中对action的定义:action是一个pure function,它让系统从state 1 => state 2;redux是遵循这个理念的。

#8

嗯嗯,哈哈,学习到了,我以后写react也要改改 :smirk: 楼主 阿姨嘎多

#9

发现 BaseInput 这个组件有点问题,当state 的 value 的值是通过其他方式触发的,那么 input 的值不会更新,即使是从父元素传入参数,好像对 react 而言 defaultValue 是一次性的,父层第二次 setState 传入的参数并不会触发 defalutValue 值的变化。将 defalutValue 换为 value 可以解决,可是 composition 的时候就有点问题。。

暂时没想到好的解决办法,,

#10

如果把全部state都铺到redux里,代码写得到处都是是一个担心,也许这可以通过把reducer代码和component代码写在一个文件里解决,我不太确定;

写在一个文件里。。那还要 reducer 干嘛? 作者设计 reducer 就是为了将复杂的状态树解析成一个个简单的 reducer ,然后 combine 的…

redux的特点是:它用了一个全局广播机制;从效率而言这是缺点,但是从去耦合来说,这是优点;很抱歉我这会儿没时间举复杂的例子;

如果写一次性的代码,这当然没问题。但是既然都组件化写 web 应用了,可维护比效率更加重要。

#11

建议写一个项目,实际的项目,不要写个demo就做出这样的定论…

#12

尽量 stateless