Question

我在React中创建函数组件，我想在其中使用状态像类Component

Answer 1

不使用Alpha版本的React时，可以在组件中使用状态的唯一方法是使用类组件。

如果您乐于使用React的Alpha版本，则可以使用React Hooks。 React提供了一个名为{{1}}的函数，它将使您可以执行此操作。

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

当它是Alpha版本时，请勿在生产中使用它。并且请注意，尽管不太可能，但API可能会发生重大变化。

Answer 2

作为React 16.7 alpha，您实际上可以通过钩子对功能组件使用状态和效果：

import { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

尽管这是新的RFC，但如果您看一下Dan Abramov的演示文稿（https://www.youtube.com/watch?v=dpw9EHDh2bM），则可以推断出这实际上是React的未来。尽管React Blog声明不会放弃类，但我敢打赌他们会放弃。

还请注意，挂钩使组件之间的状态逻辑可重用，而无需在应用程序框架中添加更多组件（例如HoC）。

参考：https://reactjs.org/docs/hooks-intro.html

Answer 3

如果要使用状态或任何生命周期方法，则必须将功能组件转换为基于类的组件。

类组件

基于类的组件使用ES6类语法。它可以利用生命周期方法。

您可以在示例中看到，您在上面给出的Class组件是从React.Component扩展的。

在这里，您必须使用此关键字来访问在类组件中声明的道具和功能。

功能组件

与基于类的函数相比，功能组件更简单。

功能组件主要关注应用程序的UI，而不关注行为。

更准确地说，这些基本上是类组件中的渲染函数。

功能组件不能具有状态，也不能使用生命周期方法。

如何在React.js中的功能Componet中使用状态

3 个答案: