react 井字棋 函数式写法

用react写一个井字棋，看了官网的文档，自己写一个函数式的写法，比较简陋和粗糙，如有错误请在评论区指出

整体样式结构：（样式代码就不放了）

html:

    return (
        <Fragment>
            <Textdom />
            <div className={style.box}>
                <div id='1' onClick={deploy} className={style.tic}></div>
                <div id='2' onClick={deploy} className={style.tic}></div>
                <div id='3' onClick={deploy} className={style.tic}></div>
                <div id='4' onClick={deploy} className={style.tic}></div>
                <div id='5' onClick={deploy} className={style.tic}></div>
                <div id='6' onClick={deploy} className={style.tic}></div>
                <div id='7' onClick={deploy} className={style.tic}></div>
                <div id='8' onClick={deploy} className={style.tic}></div>
                <div id='9' onClick={deploy} className={style.tic}></div>
            </div>
        </Fragment>
    )

react.js:

function TicTac() {
    const [num, setNum] = useState(0); // 切换棋子的控制器
    const [chess, setChess] = useState('x'); // 当前棋子
    const [one, setone] = useState(''); // 棋盘一
    const [two, settwo] = useState(''); // 棋盘二
    const [three, setthree] = useState(''); // 棋盘三
    const [fore, setfore] = useState(''); // 棋盘四
    const [five, setfive] = useState(''); // 棋盘五
    const [six, setsix] = useState(''); // 棋盘六
    const [seven, setseven] = useState(''); // 棋盘七
    const [eight, seteight] = useState(''); // 棋盘八
    const [nine, setnine] = useState(''); // 棋盘九
    const [king, setKing] = useState(false); // 是否胜出 || 胜出者
    const [ping, setPing] = useState(true); // 是否平局
    useEffect(() => { // 根据奇数或者偶数来控制棋子
        if (num % 2 === 0) {
            setChess(chess => 'x')
        } else {
            setChess(chess => 'o')
        }
    }, [num])
    useEffect(() => { // 响应式钩子
        // 作用一 将棋盘数组进行编组传递给deds函数处理
        // 作业二 实时判断是否是平局
        deds([[one, two, three], [fore, five, six], [seven, eight, nine],
        [one, fore, seven], [two, five, eight], [three, six, nine],
        [one, five, nine], [three, five, seven]])
        let arr = [one, two, three, fore, five, six, seven, eight, nine];
        let s = ''
        for (let k in arr) {
            if (arr[k]) {
                s++;
                if (s == arr.length && king == false) {
                    setPing(false);
                }
            }
        }
    }, [one, two, three, fore, five, six, seven, eight, nine])
    const deploy = (e) => { // 点击事件 根据id向棋盘内填充棋子
        if (!e.target.innerHTML && !king) {
            setNum(num => num + 1);
            e.target.innerHTML = chess;
            switch (e.target.id) {
                case '1':
                    setone(chess);
                    break;
                case '2':
                    settwo(chess);
                    break;
                case '3':
                    setthree(chess);
                    break;
                case '4':
                    setfore(chess);
                    break;
                case '5':
                    setfive(chess);
                    break;
                case '6':
                    setsix(chess);
                    break;
                case '7':
                    setseven(chess);
                    break;
                case '8':
                    seteight(chess);
                    break;
                case '9':
                    setnine(chess);
                    break;
            }
        }
    }
    const deds = (arr) => { // 接收数组循环对比找出胜利者
        let yes = 0;
        let hhh = '';
        for (let k in arr) {
            for (let i = 0; i <= 3; i++) {
                if (arr[k][0] && arr[k][i] === arr[k][0]) {
                    yes++;
                    if (yes == 3) {
                        hhh = arr[k][0]
                        setKing(arr[k][0])
                        break;
                    }
                } else {
                    yes = 0;
                }
            }
        }
    }
    const Textdom = () => { 渲染组件 
        if (king) {
            return <p className={style.title}>胜利者为{king}</p>
        } else if (ping === false) {
            return <p className={style.title}>平局</p>
        } else if (king === false) {
            return <p className={style.title}>当前执棋者为:{chess}</p>
        }
    }

写法比较粗糙，但是逻辑还是清晰的，我的主要思路就是对1~9的棋盘进行编组，然后进行循环对比

下面是整体代码：

import React, { Fragment, useEffect, useReducer, useRef, useState } from 'react';
import style from '../src/public_css/TicTac.module.css';

function TicTac() {
    const [num, setNum] = useState(0);
    const [chess, setChess] = useState('x'); // 当前棋子
    const [one, setone] = useState(''); // 棋盘一
    const [two, settwo] = useState(''); // 棋盘二
    const [three, setthree] = useState(''); // 棋盘三
    const [fore, setfore] = useState(''); // 棋盘四
    const [five, setfive] = useState(''); // 棋盘五
    const [six, setsix] = useState(''); // 棋盘六
    const [seven, setseven] = useState(''); // 棋盘七
    const [eight, seteight] = useState(''); // 棋盘八
    const [nine, setnine] = useState(''); // 棋盘九
    const [king, setKing] = useState(false); // 是否胜出 || 胜出者
    const [ping, setPing] = useState(true); // 是否平局
    useEffect(() => {
        if (num % 2 === 0) {
            setChess(chess => 'x')
        } else {
            setChess(chess => 'o')
        }
    }, [num])
    useEffect(() => {
        deds([[one, two, three], [fore, five, six], [seven, eight, nine],
        [one, fore, seven], [two, five, eight], [three, six, nine],
        [one, five, nine], [three, five, seven]])
        let arr = [one, two, three, fore, five, six, seven, eight, nine];
        let s = ''
        for (let k in arr) {
            if (arr[k]) {
                s++;
                if (s == arr.length && king == false) {
                    setPing(false);
                }
            }
        }
    }, [one, two, three, fore, five, six, seven, eight, nine])
    const deploy = (e) => {
        if (!e.target.innerHTML && !king) {
            setNum(num => num + 1);
            e.target.innerHTML = chess;
            switch (e.target.id) {
                case '1':
                    setone(chess);
                    break;
                case '2':
                    settwo(chess);
                    break;
                case '3':
                    setthree(chess);
                    break;
                case '4':
                    setfore(chess);
                    break;
                case '5':
                    setfive(chess);
                    break;
                case '6':
                    setsix(chess);
                    break;
                case '7':
                    setseven(chess);
                    break;
                case '8':
                    seteight(chess);
                    break;
                case '9':
                    setnine(chess);
                    break;
            }
        }
    }
    const deds = (arr) => { // 接收数组循环对比找出胜利者
        let yes = 0;
        let hhh = '';
        for (let k in arr) {
            for (let i = 0; i <= 3; i++) {
                if (arr[k][0] && arr[k][i] === arr[k][0]) {
                    yes++;
                    if (yes == 3) {
                        hhh = arr[k][0]
                        setKing(arr[k][0])
                        break;
                    }
                } else {
                    yes = 0;
                }
            }
        }
    }
    const Textdom = () => {
        if (king) {
            return <p className={style.title}>胜利者为{king}</p>
        } else if (ping === false) {
            return <p className={style.title}>平局</p>
        } else if (king === false) {
            return <p className={style.title}>当前执棋者为:{chess}</p>
        }
    }
    return (
        <Fragment>
            <Textdom />
            <div className={style.box}>
                <div id='1' onClick={deploy} className={style.tic}></div>
                <div id='2' onClick={deploy} className={style.tic}></div>
                <div id='3' onClick={deploy} className={style.tic}></div>
                <div id='4' onClick={deploy} className={style.tic}></div>
                <div id='5' onClick={deploy} className={style.tic}></div>
                <div id='6' onClick={deploy} className={style.tic}></div>
                <div id='7' onClick={deploy} className={style.tic}></div>
                <div id='8' onClick={deploy} className={style.tic}></div>
                <div id='9' onClick={deploy} className={style.tic}></div>
            </div>
        </Fragment>
    )
}

export default TicTac;

喜欢的点个赞，或者收藏，然后新年快乐，工作顺利，升职，加薪！！！