React/Redux开发应该是面向对象的编程还是功能编程？

Question

我最近加入了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的范围内,我希望有一个正确的答案.:)

Answer 1

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

如果您只需要组件中的属性,那么它就是无状态组件,您可以使用函数式编程来创建它.它为您提供了更少行的代码,也更容易阅读和更容易测试.

如果您需要管理组件内部的状态,那么它是一个有状态的组件,您需要使用ES6类来描述其行为,就像您之前所做的那样.

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

演示组件仅从props渲染数据,因此是无状态组件,可以使用函数创建.这些组件不了解redux,测试这些组件非常容易.

Container Component管理一个状态并且知道redux,他们调度action并订阅redux状态.它们是有状态的组件,可以使用ES6类创建.

您可以在redux文档中找到这些解释