新的 react useState 钩子相当于 'this.state' 是什么？答案

【问题标题】：What is the equivalent of 'this.state' with the new react useState hook?新的 react useState 钩子相当于 'this.state' 是什么？
【发布时间】：2020-06-21 19:00:54
【问题描述】：

我正在练习新的 React 钩子，我想知道是否有人知道在函数组件中的 useState 钩子方面，console.log(this.state) 的等价物是什么。

问候！

【问题讨论】：

不清楚你在问什么——没有“等价物”；从useState 返回的数组中的第一个值是useState 钩子的当前状态。 reactjs.org/docs/hooks-state.html
对不起，如果我没有说清楚。我的意思是：在基于类的组件中，我可以使用 console.log(this.state)，它返回给我所有的对象、数组、字符串等。页面的整个状态是什么。在这个功能组件中，我只找到了一种专门选择某个状态的方法。没有等效的方法来获取钩子的整个状态吗？如您所说，例如在数组中。因为如果我使用 console.log(useState) 我只是得到这个功能。如果我使用 useState() 显然会给我一个错误。
你要的东西不存在
现在这太虎头蛇尾了。嘿，这是 react useState 钩子的优点还是缺点？
都不是；这是不同的。

标签： javascript reactjs react-hooks

【解决方案1】：

函数组件中没有“状态”。

您可以通过使用“useReducer”来获得一个状态对象。（如果你的状态是一个复杂的对象）

const [state, dispatch] = useReducer(reducer, initialState);

【讨论】：

这被认为是“好的做法”吗？还是更多的“创造性解决方案”？
@Pgreat 两者都不；一些组件需要复杂的状态。如果你使用钩子编写这样一个具有聚合状态的组件，这就是它的样子。
如果你的函数组件需要处理很多状态值，你可以使用 useReducer 代替。如果组件足够复杂，您需要证明自己的合理性。如果我的组件具有复杂的 ui 行为，我只会使用它。

【解决方案2】：

如果您要将 React 应用从基于类转换为钩子。

寻找类似的东西

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      var1: "foo",
      var2:"bar"
    };
  }

在这种情况下 this.state.var1 = "foo" this.state.var2 = “酒吧” this.state =

{
      var1: "foo",
      var2:"bar"
}

【讨论】：