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

Question

我需要有关如何将组件从类组件重写为使用 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

Answer 1

最省力的方法是将处理状态的旧方式切换到 react-hook 方式。从...开始：const&nbsp;[grid,&nbsp;setGrid]&nbsp;=&nbsp;useState(game.init({&nbsp;size:&nbsp;this.props.size&nbsp;})); const&nbsp;[gameWon,&nbsp;setGameWon]&nbsp;=&nbsp;useState(false);现在你使用setGrid(), setGameWon()而不是this.setState()您还可以将两种状态组合成一个状态对象