函数式编程倡导者如何使用React或Angular等框架? - 空宝网


函数式编程倡导者如何使用React或Angular等框架?

对于初学者,我建议您将所有行为从React组件中分离出来,并通过组件属性注入行为。然后,您可以将所有行为定义为纯函数 – 甚至是有状态行为。查看重构一系列高阶组件,这些组件有助于在处理组件状态时保持功能,Redux用于应用程序状态。

作为一个具体的例子,让我们考虑一个增加计数器的按钮。使用面向对象的组件,您可以编写如下内容:

class Counter extends React.Component {
constructor(props) {
super(props)
this.state = {
counter: 0,
}
}

render() {
const {
counter,
} = this.state

const onClick = () => {
this.setState({
counter: counter + 1,
})
}

return (

)
}
}
通过函数式编程,我们可以这样写:

// pure functional component
const Counter = ({
onClick,
counter,
}) => (

)

// elsewhere define the behavior again as pure functions
const FunctionalCounter = Recompose.withStateHandlers({
counter: 0, // our initial state
}, {
onClick: ({ counter }) => () => ({ // a pure function that takes state, props, and parameters and updates state
counter: counter + 1,
}),
})(Counter)

下一页更详细

下一页:  父级或子级组件上的Angular 2+提供者

喜欢 (1)
[请支持作者一杯咖啡,谢谢]
分享 (0)