从Hooks重构为类组件

Question

你能帮忙把React Hooks的一些代码重构成一个类组件吗？我是React的新手，这让我很难过。我知道{useState}提供了一些“getter”和“setter”，但不知道如何将它重构为“典型”React类组件中具有props的状态。

钩：

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

阵营：

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

Answer 1

从反应Hooks FAQ page：

我应该使用挂钩，课程还是两者兼而有之？ 当你准备好了，我们鼓励你开始尝试你写的新组件中的Hooks。确保团队中的每个人都使用它们并熟悉本文档。我们不建议将现有类重写为Hook，除非您计划重写它们（例如修复错误）。

你不能在类组件中使用Hook，但是你绝对可以在一棵树中将Hook和类和函数组件混合在一起。组件是类还是使用Hook的函数是该组件的实现细节。从长远来看，我们希望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]);
}

Answer 2

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

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;