我需要有關如何將組件從類組件重寫為使用 react-hooks 的組件的幫助。React hooks 和 react redux 是我習慣于編寫代碼的方式，所以我知道這部分。但是我需要學習更多關于類組件如何工作的知識，以便我可以更輕松地從教程和較舊的材料中獲取知識。如果有人有關于如何重寫它的提示的建議，或者關于易于閱讀的材料或視頻的提示，這些提示可以解釋使用鉤子的類和組件之間的區別。這將非常有幫助。謝謝！我要重寫的代碼示例如下所示。如果有人知道如何重寫此示例的部分內容，那將很有幫助：import React, { Component } from 'react'import PropTypes from 'prop-types'import Grid from './Grid'import Controls from './Controls'import { game } from './game'import './puzzle.css'class Puzzle extends Component {  static propTypes = {    size: PropTypes.number  }  static defaultProps = {    size: 4  }  state = {    grid: game.init({ size: this.props.size }),    gameWon: false,  }  onCellClick = (index) => {    const [grid, isWon] = game.swapCell(index)    this.setState(() => ({ grid, gameWon: isWon }))  }  restart = (type) => { this.setState(() => ({ grid: game.reset(type), gameWon: false })) }  render() {    const { grid, gameWon } = this.state    return (      <>        { gameWon          ? <div className="win">Grattis!</div>          : <Grid items={grid} onClick={this.onCellClick}/>        }        <Controls restart={this.restart}/>      </>    )  }}export default Puzzle