使用状态来反应功能组件

Question

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

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

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

Answer 1

从React 16.8.0开始，您可以使用Hooks，并使用“ useState”在功能组件中实例化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>);
}

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

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

Answer 2

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