如何在React中通過Functional Components和Hooks重構Class Components

在React中可以通過將Class Components轉換為Functional Components和Hooks來實現重構。以下是一個簡單的示例：

Class Component:

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

export default Counter;

Functional Component with Hooks:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

export default Counter;

在上面的示例中，我們將Class Component Counter轉換為Functional Component Counter，并使用useState Hook來管理count狀態。incrementCount方法也被定義為一個普通的函數，而不是類方法。這樣，我們就成功地重構了Class Component為Functional Component和Hooks。