使用状态反应功能组件答案

【问题标题】：React functional component using state使用状态反应功能组件
【发布时间】：2017-10-19 01:46:59
【问题描述】：

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

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

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

【问题讨论】：

“智能组件” – 嗯？

标签： reactjs functional-programming

【解决方案1】：

从 React 16.8.0 开始，您可以使用 Hooks 和 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>);
}

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

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

【讨论】：

【解决方案2】：

更新：从 React 16.8.0 开始，这不再适用。请参阅上面 Rafael Moldonado 的回答

无状态功能组件不能有状态，如果你想在组件中有状态，你需要使用常规的 React 组件。

【讨论】：

【解决方案3】：

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

无状态功能组件从Container component 传入状态，并负责渲染通过其容器组件中的道具传递给它们的状态。这允许 Container 组件有一个更简单、更集中的责任来获取和转换数据以传递给无状态功能组件。纯函数式组件从容器中抽象出渲染 JSX 的细节。

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

【讨论】：

【解决方案4】：

如果你想在函数组件中使用状态，那么有一个名为recompose的包，它为无状态函数组件提供了一组辅助函数。有 withState() 助手可以启用状态。

【讨论】：

对于 16.8 之前的版本，您可以使用 recompose 在函数中写入状态，而在 16.8.0 中，您可以使用 react hooks，正如@Rafael Maldonado 已经提到的那样