关于react-redux项目中容器组件和显示组件的一个问题

Question

众所周知容器组件负责逻辑处理，显示组件负责内容展示。

我想问一下显示组件中的onlick等事件处理函数是写在容器组件中，通过props传给显示组件，还是直接写在显示组件中？

显示组件可以有componentWillMount等生命周期事件吗？

显示组件是只能有显示内容的东西吗？

其实哪些东西应该放在容器组件中，通过props传给显示组件，哪些东西应该直接放在显示组件中？查了一下，发现有的人这样用，有的人那样用，看着看着更疑惑了

Answer 1

容器组件其实主要负责的是数据的获取和服务器的交互。

通过props传给显示组件，还是直接写在显示组件中？
这个要看，你click以后，要处理的是显示组件内部的状态，还是要和服务器、其他组件交互。如果只是内部状态，那么写在显示组件中就够了。其他情况，从父组件传入。

显示组件可以有componentWillMount等生命周期事件吗？
当然可以有。比如某些特殊事件的添加和解绑。在didMount里面添加事件，在unmount里面解除事件绑定。

显示组件是只能有显示内容的东西吗？
没有想到什么不显示内容的组件。。。

最后
一般显示组件只负责展示内容，一般容器组件主要负责数据处理，服务器交互之类的，也会负责一些显示内容。

很多时候不要纠结那么多显示组件和容器组件的区别。。。这只是一个指导思想，只要是方便自己的项目的，怎么用都可以。。。

Answer 2

按照Redux官网的这页说明，"容器组件"与"显示组件"主要是以是否有用到Redux绑定而区分，关于"容器组件负责逻辑处理，显示组件负责内容展示"这句，这只是概念上的作用分别，并不是那么严格来分别。

实际上这与React中的组件区分无关，一般来说，React中以ES6类样式所撰写的组件称为"标准组件"或"状态组件"，因为里面可以使用state与生命周期方法，而以函数样式撰写的组件称为"函数组件"或"无状态组件"。Redux的官网示例，全部都用了"无状态组件"，它们都不需要用到state，这是用了Redux中很明显的改变。那React中的state去了哪？实际上都交给Redux与react-redux来控管了。

显示组件中的onlick等事件处理函数是写在容器组件中，通过props传给显示组件，还是直接写在显示组件中？

事件处理函数，逻辑用了Redux后会写在Redux里，改为发送动作(dispatch action)的概念，你不能再以之前React中父子层(内外层)组件的概念来设计。除非这个事件是自己玩自己的，或是在应用之外的与Redux的store无关的，才会独立写在呈现组件中。举例来说:

• 自己玩自己的: onclick后文字框文字清空

• 与Redux无关的: onclick后连到另一页面

显示组件可以有componentWillMount等生命周期事件吗？

当然可以有。上面有说过"容器组件"与"显示组件"的区分，与React中的组件区分无关。不过以性能优化来说，最好不要有。既然都可以在Redux中完全用"无状态组件"来撰写整个应用，实际上也不需要生命周期事件，异步、计时器在Redux中都可以达成。

显示组件是只能有显示内容的东西吗？

这样理解也是可以。我是觉得应该说显示组件是以"显示内容"为主要目的的组件，它里面的数据或方法都不会与Redux进行绑定，相对的，这些"显示"的数据是从父层(上层)组件以props传入，或是用模组系统汇入。所以在一个应用的设计的大部份组件都是显示组件，只有少部份的容器组件。

其实哪些东西应该放在容器组件中，通过props传给显示组件，哪些东西应该直接放在显示组件中？查了一下，发现有的人这样用，有的人那样用，看着看着更疑惑了

如果是从原先React应用，改用Redux进行重构后的作法，第一步是把所有的组件如果能以"无状态组件"改写就改写，通常在末端的子组件，就是有可能变为只用来显示内容的组件，上层的组件也可能最后因为只是用来集中组件而已，也是变为显示组件。第二步是要去state化，原先在React应用中用的state与事件相关方法，逻辑都要移到Redux上去作，原先有用到state或事件相关处理方法的组件，就要改为用react-redux来与Redux中绑定。

并没有一定在某个应用中的这些组件就一定是要怎么作，实际上都可以，这会因人而异。只是看你要不要把组件分割得那么细而已，愈细的组件分割可以比较明确地分割出不同作用的组件，组件可以重覆使用。

总结来看，什么样的组件会被设计为"显示组件"？大致上是下面这两种:

• 末端的子组件: 例如文字输入框+按钮这种ui组件、列表中的项目组件、连到某区的连结组件等等。

• 只用来集中组件们用的组件: 通常是App.js这个组件，它不是最上层组件，作用只是用来集中所有会用到的组件。