Reactjs 使用状态对功能组件进行反应

我正在尝试使用如下所示的函数实现React智能组件

然而，我的问题是我需要维护状态，在这种情况下我该如何做，例如，我需要访问和设置

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

---

更新：从React 16.8.0开始，这不再是事实。见上面拉斐尔·莫尔多纳多的回答

---

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

无状态功能组件旨在面向表示，因为它们本身不能具有本地UI状态。这很好，因为没有内部状态的能力，纯功能组件的使用促进了整个应用程序的更好使用，允许更简单的组件专注于做更少的事情。这是一个成功的设计软件，它的维护和添加功能变得不再那么麻烦

---

无状态功能组件以状态从传递，并负责呈现通过其容器组件的道具传递给它们的状态。这使得容器组件能够更简单、更集中地负责获取和转换数据以传递给无状态功能组件。纯功能组件从容器中抽象出呈现JSX的细节

---

说来话长，您需要的是一个容器组件类，这样您就可以创建相关的UI状态并在React中管理它，而在纯功能组件中您无权访问它。

如果您想在功能组件中使用状态，那么有一个名为重新组合的包，它为无状态函数组件提供了一组帮助函数。在React 16.8.0中，有一个启用状态的

withState（）

帮助程序。

您可以使用钩子

useState

来实例化功能组件中的自定义状态。像这样

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>);
}

import React，{useState}来自“React”；
常量AddButon=（{handleAddValue}）=>{
返回添加
}
常量应用=（道具）=>{
const[value，setValue]=useState（0）；
const handleAddValue=（）=>{
常量newValue=值+1；
设置值（新值）；
}
返回(
值为：{Value}
“智能组件”–嗯？对于16.8之前的版本，您可以使用“重新组合”在函数中写入状态，而在16.8.0中，您可以使用react挂钩，正如@Rafael Maldonado已经提到的那样