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

【问题标题】：How do I set state in React when there is no class or constructor?当没有类或构造函数时，如何在 React 中设置状态？
【发布时间】：2017-12-07 18:39:04
【问题描述】：

我正在查看https://codesandbox.io/s/new 中的默认演示 React 代码，结果如下：

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

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

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

这与我见过的许多其他示例不同，这些示例通常更像：

class Layout extends React.Component {
  constructor(props) {
    super(props);
    this.state = {...};
  }
  render() {...}
}

由于代码沙盒示例没有类或构造函数，我没有放置this.state 的地方。那么我将如何以及在哪里添加一个状态？

【问题讨论】：

标签： reactjs state

【解决方案1】：

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

完整示例https://codesandbox.io/s/inspiring-newton-18bc9

useState() 是 Hook 的一个示例

Hooks 是 React 16.8 中的新增功能。它们让您无需编写类即可使用状态和其他 React 功能。

【讨论】：

@Burrito setCount 是在哪里定义的？这是一个可以有任何名称的回调，您只需将状态的新更新部分传递给它？我看到很多例子，而且第二个参数总是有不同的值......TY
@landed 这是一个由 useState() 返回的 setter 函数（你可以随意调用它），它可以让你更新状态值，在这种情况下为 count （你也可以调用任何你想要的）。更多信息reactjs.org/docs/hooks-overview.html

【解决方案2】：

你不能。

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

这是一个stateless 组件。

与此类组件交互的唯一方法是通过props。

const App = ({ name }) => <Hello name={name} />;

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

【讨论】：

【解决方案3】：

应用程序是无状态组件。

如果你想拥有状态，你可以将 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'));

这篇文章可能会有所帮助： https://code.tutsplus.com/tutorials/stateful-vs-stateless-functional-components-in-react--cms-29541

有一节标题为类组件与功能组件

【讨论】：

【解决方案4】：

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

Class field declarations 使您可以省略类构造函数，但仍可在 React 类组件中使用状态。
代表增强组件管理状态的higher-order component 或render prop component。
- 来自recompose 的高阶组件withState 代表增强组件管理状态。

您可以通过here 了解更多关于在没有类组件的情况下管理状态的不同解决方案。

【讨论】：