【发布时间】：2018-03-20 18:48:42
【问题描述】：
编辑（2021-02-12）： 自从提出这个问题以来，我花了很多时间研究 React 和 Redux 应用程序，我可以理解为什么可能没有一个正确的答案，因为它取决于用例，并且两种解决方案都可以用于实现相同的目标。但是，我仍然相信，如果将其记录在案（尤其是对新手而言），说明人们选择一种方法而不是另一种方法的原因，那将是有益的。遗憾的是，说一切都基于意见并不能提供任何指导。
这里有一个相关的 SO 问答：React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
我最近加入了 React 和 Redux 生态系统；虽然我可以欣赏 React 提供的组件（以及更多）和 Redux 的三个原则之间的清晰组织；我很难决定什么是最好的发展方式；面向对象还是函数式？
在 React/Redux 之前，我们曾经使用 ES6 类进行开发；它为面向对象编程提供了非常整洁的语法，尤其是继承。所有组件类都建立在以下简单结构之上：
export default class MyComponent extends React.Component {
constructor(){
// initialise state here
}
componentWillMount(){
// populate state here
}
componentDidMount(){
// update UI/bind listeners here
}
render(){
// output HTML here
}
}
在引入 Redux 之后，我开始觉得上面的结构不再是我所追求的，因为组件不再保持自己的状态；但相反，状态来自 Redux 存储，并使用 connect 方法和 mapStateToProps 作为道具传递。连同不可变数据的概念，这似乎有利于函数式编程方法，其中所有函数都是一等函数。上面的组件现在开始看起来像：
const MyComponent = ({ myPropA, onEvent }) => {
// output HTML here
}
const mapStateToProps = state => {
return {
myPropA: state.myPropA
}
}
const mapDispatchToProps = dispatch => {
return {
onEvent: data => dispatch({
type: 'ACTION_NAME',
data
});
}
}
connect(mapStateToProps, mapDispatchToProps)(MyComponent);
函数式编程方法似乎更适合 React/Redux 组合，但我不禁觉得错过了一些有用的 OOP。关于 React/Redux 技术堆栈的最佳实践是什么？似乎每个人都在做不同的事情；但是有推荐或最佳实践吗？说表示（哑）组件是功能组件而容器（智能）是类组件是否明智？或者，当您需要组件生命周期时，它应该是一个类，否则是一个功能组件？
我知道 OOP 与 FP 是一个广泛的话题；但是在 React/Redux 的范围内，我希望有一个正确的答案。 :)
【问题讨论】：
-
谁投了反对票，为什么？这实际上是一个有效的问题！我在使用 Angular 和 Redux（后来的 ngrx）时问过自己这个问题。
-
这真的取决于你喜欢用你的组件做什么。我目前将它们混合在一起，因为 React 组件可以在需要时更强大（比如让生命周期事件可用）
-
我不同意它是基于意见的。当然，开发人员可以两者兼而有之，但应该有对与错或好与更好。开发者的选择背后一定有原因。对于更传统的编程语言，例如 Java，可以讨论是否/何时应该使用一种设计模式而不是另一种。
-
@KevinFarrugia 我以为我说过，这取决于用例，当我需要生命周期事件时，我会混合它们。有点像 Olivier 提到的，取决于它们是展示组件还是容器组件（尽管从术语上我更喜欢哑/智能组件的想法）
-
谢谢@Icepickle。我并不是专门针对您，而是更多地指的是在现代 JavaScript 中一切似乎都是“基于意见”的问题。 :) 虽然stackoverflow.com/questions/40703675/… 可以回答这个问题，但我遇到了这个链接（问的方式略有不同）。
标签： javascript reactjs oop functional-programming redux