Question

可以帮您从React Hooks重构一些代码到类组件吗？我是React的新手，这让我很难受。我知道{useState}提供了一些“ getter”和“ setter”，但是不知道如何在“典型” React类组件中将其重构为带有道具的状态。

挂钩：

export default function App() {
const [counter, setCounter] = useState([]);
}

反应：

class App extends React.Component {
state = {
counter:
}

Answer 1

您可以看一下此示例。这是用于增量/计数的典型类组件。

class App extends React.Component {
  state = { count: 0 }

  increment = () => {
      this.setState({
         count: this.state.count + 1
      });
  }

  render(){
     return(
    <button onClick={this.increment}>+</button>
    );
  }

}

export default App;

这是它的Hooks实现。

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

 const increment = () => {
    setCount(count+1);
  };

  return(
    <button onClick={increment}>+</button>
   );
 }
export default App;

Answer 2

从反应Hooks FAQ page：

我应该使用钩子，类还是两者的结合？
  准备就绪后，建议您开始尝试在新组件中使用钩子   写。确保团队中的每个人都在使用它们，并且   熟悉本文档。我们不建议重写您的   钩子的现有类，除非您计划以任何方式重写它们   （例如，修复错误）。

您不能在类组件内部使用钩子，但是您可以   绝对将类和函数组件与Hooks混合在一起   树。组件是使用Hooks的类还是函数是   该组件的实现细节。 从长远来看，我们   希望Hooks是人们编写React组件的主要方式。

为回答您的问题，等效的类组件为：

class App extends React.Component {
  state = {
    counter: [] // equivalent of useState([]);
  }
  ...
  this.setState(prevState => ({
    counter: [...prevState.counter, newelement]
  })) // equivalent of setCounter(counter => [...counter, newelement]);
}

从Hooks重构为类组件

2 个答案: