我正在尝试使用如下所示的函数实现 React 智能组件 https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc
然而，我的问题是我需要维护状态，在这种情况下我该怎么做，例如我需要访问和设置
this.state = {Title: 'Login'};
使用状态react功能组件
IT技术
reactjs
functional-programming
2021-04-14 10:04:08
4个回答
从 React 16.8.0 开始，您可以使用 HooksuseState在您的功能组件中实例化 State 自定义。像这样...
import React, {useState} from 'react';
const AddButon = ({handleAddValue}) => {
return <button onClick={handleAddValue}>Add</button>
}
const App = (props) =>{
const [value, setValue] = useState(0);
const handleAddValue = () => {
const newValue = value+1;
setValue(newValue);
}
return (
<div>
<div>The Value is: {value}</div>
<AddButon handleAddValue={handleAddValue} />
</div>);
}
如果您想阅读有关此新功能的更多信息，请访问以下链接。
更新：从 React 16.8.0 开始，这不再是正确的。请参阅上面的 Rafael Moldonado 的回答
无状态功能组件不能有状态，如果你想在组件中拥有状态，你需要使用常规的 React 组件。
无状态功能组件旨在面向表示，因为它们本身不能具有本地 UI 状态。不过这很好，因为没有内部状态的能力，纯函数式组件的使用促进了在整个应用程序中更好地使用单一职责原则，允许更简单的组件每个专注于做更少的事情。设计软件的胜利，使以后维护和添加功能不那么令人头疼。
无状态功能组件从Container 组件传入状态，并负责渲染通过其 Container 组件中的 props 传入的状态。这允许容器组件在获取和转换数据以传递给无状态功能组件方面具有更简单、更集中的责任。纯函数组件从容器中抽象出渲染 JSX 的细节。
说来话长，你想要的是一个容器组件类，这样你就可以创建相关的 UI 状态并在 React生命周期方法中管理它，而你无法在纯功能组件中访问它。
如果要在功能组件中使用状态，那么有一个名为recompose 的包，它为无状态功能组件提供了一组辅助函数。有withState()启用状态的助手。