我在纠结什么是用一个好的编码模式在React中实现组件的好方法。
通常我知道表示和容器组件的想法:表示只显示html和接收一切从道具(数据和回调);容器编排表示，检索和改变数据，并通过props将数据传递给它们。
现在我使用redux与redux工具包和rtk查询，与钩子。
按照这种方法，容器组件应该是唯一允许使用eselector、useDispatch和useQuery的组件。但是我发现允许表示选择、获取和分派它们真正需要的东西要简单得多，而不是制作一个巨大的容器组件，用一个巨大的状态列表和获取访问权限来为它的子组件管理所有数据。对于列表来说尤其如此，在列表中，让每个子节点检索自己的数据(从状态中获取或获取)或深度嵌套的表示要简单得多，也要干净得多。
然而，我将容器组件与假表示混合在一起，无论如何检索一些东西，当它更容易和真实的表示可能是一般的和完全可重用的组件。而且组件树也很乱(比如容器->伪表示->容器->伪表示->真表示->真表示…)
最后我觉得我没有好的规则，代码混乱。
在hook和redux的世界里，容器和表示组件仍然是遵循最佳实践模式的良好编码风格吗?
Dan Abramov提倡的React容器模式在2018年引入React钩子后就被弃用了。
参见Dan的博客文章:2015年的表示和容器组件。
他2019年的更新:
2019年更新:我写这篇文章很久了，我的观点已经进化了。特别是，我不建议你把你的不再有这样的组件了。如果你发现它在你的代码库中很自然，这种模式很方便。但我见过强制执行的时候没有任何证据需要，而且很多时候都带着近乎教条的热情。主要的我发现它有用的原因是它让我分离复合体来自组件其他方面的有状态逻辑。胡克斯让我做没有任意的除法也是一样的。这篇课文完好无损这是历史原因，但别太当真。
随着React钩子的出现，"智能"one_answers"智能"之间的区别和";dumb"组件和"容器";和";presentational"组件，几乎被淘汰了。
常用模式和"最佳实践"现在是编写React Function组件并使用React钩子。在使用Redux和React-Redux的情况下，useDispatch和useSelector钩子代替connect高阶组件。我没有特意去写React类组件，也没有把代码分成"演示"one_answers"演示"两部分。和";container"
我的经验法则是在一个组件中完成所有这些。然后，随着您创建越来越多的组件，您将看到模式开始出现。因此，与其在组件之间复制和粘贴代码，不如创建一个呈现性组件，该组件接受要呈现的内容的道具。其中一些道具甚至可以是当按钮被点击或框被选中时的操作。
总的来说，你的表示组件最终会类似于各种react js ui框架中的一个，比如https://mui.com/