Reactjs 当没有类或构造函数时，如何在React中设置状态？

我正在查看中的默认demo React代码，结果如下：

import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';

const App = () => <Hello name="CodeSandbox" />;

render(<App />, document.getElementById('root'));

---

因为codesandbox示例没有类或构造函数，所以我没有地方放置

this.state

。那么，我将如何以及在何处添加状态

应用程序是一个无状态组件

如果你想拥有state，你可以将App转换成一个类

例如：

import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {...};
  }
  render() {
    return <Hello name="CodeSandbox" />;
  }
}

render(<App />, document.getElementById('root'));

从“React”导入React；
从'react dom'导入{render}；
从“./Hello”导入Hello；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={…}；
}
render（）{
返回；
}
}
渲染(

有一个标题为“类组件与功能组件”的部分，你不能

const App = () => <Hello name='CodeSandbox' />;

关于如何在没有构造函数或类组件的情况下使用状态，有不同的方法：


这使您能够省略类构造函数，但仍然在React类组件中使用状态

代表增强组件管理状态的或


高阶组件
带有state
，它代表增强组件管理状态


您可以找到更多关于在没有类组件的情况下管理状态的不同解决方案。
从React 16.8开始，函数组件可以有状态。您不再需要类

import React, { useState } from "react"; // need to import useState

function App() {
  const [count, setCount] = useState(0); // initialize state

  function changeState() { 
    setCount(count + 1); // change state
  }
  return (
    <div className="App">
      <h2>Count: {count}</h2>
      <button onClick={changeState}>Change State</button>
    </div>
  );
}

import-React，{useState}来自“React”；//需要导入useState
函数App（）{
const[count，setCount]=useState（0）；//初始化状态
函数changeState（）{
setCount（count+1）；//更改状态
}
返回(
计数：{Count}
改变状态
);
}

完整示例

useState（）是一个

钩子是React 16.8中的一个新添加。它们允许您在不编写类的情况下使用状态和其他React特性

@Burrito setCount定义在哪里？这是一个可以有任何名称的回调，您只需将状态的新更新部分传递给它就可以了吗？我看到很多示例，并且第二个参数总是有不同的值。。。TY@landed它是由useState（）返回的setter函数（可以随意调用），它允许您更新状态值，在本例中为count（您也可以随意调用）。更多信息，请访问
const App = ({ name }) => <Hello name={name} />;

render(<App name='CodeSandbox' />, document.getElementById('root'));

import React, { useState } from "react"; // need to import useState

function App() {
  const [count, setCount] = useState(0); // initialize state

  function changeState() { 
    setCount(count + 1); // change state
  }
  return (
    <div className="App">
      <h2>Count: {count}</h2>
      <button onClick={changeState}>Change State</button>
    </div>
  );
}