使用状态反应功能组件

Question

我正在尝试使用此处所示的函数实现React智能组件 https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc

然而我的问题是我需要维护状态，如何在这种情况下执行此操作，例如我需要访问和设置

this.state = {Title: 'Login'};

Answer 1

无状态功能组件无法拥有状态，如果您希望在组件中拥有状态，则需要使用常规的React组件。

Answer 2

从React 16.8.0开始，您可以使用Hooks，并使用“ useState”在功能组件中实例化State自定义。像这样...

let &listchars = "tab:>-,eol:$,space:\u00B7"

如果您想了解有关此新功能的更多信息，请访问以下链接。

https://reactjs.org/docs/hooks-intro.html

Answer 3

如果要在功能组件中使用状态，则有一个名为 recompose 的程序包，它为无状态功能组件提供了一组辅助函数。有withState()助手可以启用状态。

Answer 4

无状态功能组件旨在面向表示，因为它们本身不具有本地UI状态。这很棒，因为没有内部状态的能力，使用纯功能组件可以在整个应用程序中更好地使用single responsibility principle，允许更简单的组件，每个组件都专注于做更少的事情。设计软件的胜利使得维护和添加功能变得不那么令人头疼。

无状态功能组件从Container component传递状态，并负责通过其Container组件中的props渲染传递给它们的状态。这使得Container组件可以更简单，更集中地负责获取和转换数据以传递给无状态功能组件。纯函数组件抽象出了从Container中渲染JSX的细节。

这么长的故事，你想要的是一个容器组件 class ，这样你就可以创建相关的UI状态并在React lifecycle methods中管理它，你无法访问它一个纯粹的功能组件。