React无类的状态组件

问题描述：

在React中，我们可以将组件编写为纯函数。但是，问题在于，由于缺少生命周期钩子和状态，因此不能将其用作有状态组件。所以，我想知道是否有任何方法可以在不使用类的情况下创建有状态的组件。React无类的状态组件

我发现的东西是createClass帮手。但是，React已将这名助手转移到版本15.5.0,link的自己的软件包中。此外，他们建议您将它们迁移到JavaScript类，因为类现在是在React中创建组件的首选方式。因此，我不认为使用这个帮手可能是一个好主意。

另一方面，Facebook推荐使用高阶组件（HOC），这是React中用于重用组件逻辑的高级技术。 HOC本身不是React API的一部分。它们是从React的构图本质中浮现出来的一种模式。但是，我找不到可以在没有类的情况下创建通用状态组件的方法。

有没有人经历过这个？有什么方法可以将React用作一些纯功能性的解决方案吗？

With * monad *'s。 –

你有任何函数式编程语言的经验吗？您可以使用纯函数来模拟有状态操作，只需要将新状态作为返回值之一返回，然后在下次调用该函数时将该状态用作参数之一。这种抽象被称为“国家单体”。 – 4castle

是的，但反应生命周期挂钩呢？ – mattias

答

不使用类写入有状态组件绝对是由几个开发人员做出的选择。我推荐使用'recompose'，它具有很好且易于实现的功能，可以编写无状态的组件，同时适用于本地和商店的状态。这里是一个例子：

import compose from 'recompose/compose' 
import withState from 'recompose/withState' 
import withProps from 'recompose/withProps' 

Pure.js 

function MyComponent(props) ({ 

    local: { prop1, prop2 }, 
    setProp1 
}) 

    return <div>{prop1}</div> 
} 

const defaultState = { 
    prop1: false, 
    prop2: false 
} 

const enhance = compose(
    withState('local', 'updateLocal', defaultState), 
    withProps(({ local: { prop1, prop2 }, updateLocal }) => ({ 
    setProp1: (newValue) => updateLocal(state => ({...state, prop1: newValue })) 
    }))) 

export default enhance(MyComponent)

这个图书馆是我的一生。 –

谢谢！反应生命周期钩子怎么样？你可以使用它吗？ – mattias

@mattias，我不确定是否可以连接生命周期事件。到目前为止，我还没有看到实施。您可能想要访问[recompose]（https://github.com/acdlite/recompose）库以获取更多详细信息。 – Umesh

React无类的状态组件

相关推荐