React 的 Hooks构建自定义组件-随机验证码

react项目里面要求在登录的时候输入一个随机验证码
效果是这样的：

搜索了一下，其他的写法都没有把随机验证码抽出来当组件写，所以这里分享一下
可传参配置验证码的大小、范围、长度以及颜色范围和干扰项配置，复制代码可用。

在这解释一下组件传参：
state：是传入自定义配置的随机验证码
changeRadomNumber ：是一个函数，返回当前生成的随机码，用做判断输入验证码是否与生成验证码一致。

自定义随机验证码组件代码如下：

import React, { useEffect, useRef } from 'react';


export default function RandomNumber ({ state, changeRadomNumber }) {
    const canvasRef = useRef();
    const stateData = {
        codeLength: 4,// 长度
        fontSizeMin: 17,// 文字大小最小范围
        fontSizeMax: 21,// 文字大小最大范围
        backgroundColorMin: 100,// 背景颜色范围
        backgroundColorMax: 200,// 背景颜色范围
        colorMin: 10,// 颜色范围
        colorMax: 100,// 颜色范围
        lineCount: 4,// 干扰线条数
        lineColorMin: 10,// 干扰线颜色范围
        lineColorMax: 180,// 干扰线颜色范围