Javascript 如何将类组件重写为使用挂钩的组件

我需要关于如何将组件从类组件重写为使用react钩子的组件的帮助。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

import React，{Component}来自“React”
从“道具类型”导入道具类型
从“./Grid”导入网格
从“./Controls”导入控件
从“/game”导入{game}
导入“./puzzle.css”
类扩展组件{
静态类型={
大小：PropTypes.number
}
静态defaultProps={
尺码：4
}
状态={
网格：game.init（{size:this.props.size}），
加梅旺：错，
}
onCellClick=（索引）=>{
const[grid，isWon]=game.swapCell（索引）
this.setState（（）=>（{grid，gameWon:isWon}））
}
重新启动=（类型）=>{this.setState（（）=>（{grid:game.reset（类型），gameWon:false}}
render（）{
const{grid，gameWon}=this.state
返回(
{gameWon
格拉蒂斯！
: 
}
)
}
}
导出默认拼图

最省力的方法是将旧的处理状态切换到react hook方式

首先：

const [grid, setGrid] = useState(game.init({ size: this.props.size }));
const [gameWon, setGameWon] = useState(false);

现在您使用

setGrid（），setGameWon（）

而不是

this.setState（）

也可以将这两个状态合并为一个状态对象