javascript - React/Redux 开发应该是面向对象编程还是函数式编程？

Question

关闭。这个问题是opinion-based .它目前不接受答案。












想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它.


4年前关闭。







Improve this question




编辑(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 作为 Prop 传递方法和 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 的范围内，我希望有一个正确的答案。 :)

Answer 1

问题更多的是，我应该使用无状态组件还是有状态组件？

如果您只需要组件的属性，那么它是一个无状态组件，您可以使用函数式编程来创建它。它给你的代码行数更少，也更容易阅读和测试。

如果你需要管理组件内部的状态，那么它就是一个有状态的组件，你需要像以前一样使用 ES6 类来描述它的行为。

我在许多项目中看到 之间的区别展示和容器组件 .

展示组件 仅从 props 渲染数据，因此是无状态组件，可以使用函数创建。这些组件不知道redux，测试这些组件真的很容易。

容器组件 管理一个状态并了解 redux，他们调度操作并订阅 redux 状态。它们是有状态的组件，可以使用 ES6 类创建。

您可以在 redux documentation 上找到这些解释。