Question

我最近加入了React＆amp; amp; 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，测试这些组件非常容易。

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

您可以在redux documentation

上找到这些解释

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

1 个答案: