笔试题

面试中遇到的笔试题，后面可能会继续补充。

笔试题（2023）

自定义一个useInterval的hoohs，设计一个计时器

import React, { useEffect, useState } from 'react'
export default function Timer() {
  const [count, setCount] = useState(0);
  useInterval(() => {
    setCount(count + 1);
  }, 1000);
  return (
    <div>Timer{count}</div>
  )
}
function useInterval(callback, delay) {
  // 你的代码
  useEffect(() => {
    let time = setInterval(() => {
      callback()
    }, delay)
    return () => clearInterval(time);
  }, [callback, delay])
}

倒计时10秒，按钮点击之后，禁止点击，10秒后恢复

import React, { useState } from 'react'
export default function CountDown() {
  const [num, setNum] = useState(10)
  const [disabled, setDisabled] = useState(false)
  const onClick = () => {
    setDisabled(true)
    setTimeout(() => {
      setDisabled(false)
    }, 10 * 1000)
    let time = setInterval(() => {
      setNum((num) => {
        if(num - 1 === 0) {
          clearInterval(time)
          return 10
        }
        return num -1
      })
    }, 1000)
  }
  return (
    <div>
      <button disabled={disabled} onClick={onClick}>点击{disabled && num + 's' }</button>
    </div>
  )
}

随机给出数组，如 [1234,1234567,1234,12,12,123456781234512]; 根据数字长度，实现方法，能够对各元素进行组合排列，实现瀑布流的展示，数组元素以红块包裹。

要求:

1. 每行最多容纳三个红块 (数组元素)
2. 每行最多容纳 8 个数字长度，超出需换行 (仅100%宽度红块可换行)
3. 每个数组元素有三种宽度形式
   • 33% 宽度，最多容纳 2 个数字长度，最少容纳 1 个数字长度
   • 50% 宽度，最多容纳 4 个数字长度，最少容纳 3 个数字长度
   • 100% 宽度，最大容纳无限制，最少容纳 5 个数字长度

     import React from "react";
     export default function WaterfailFlow() {
       let data = [1234, 1234567, 1234, 12, 12, 1234, 12345678123456132465, 12, 1];
       const getWidthClass = (length) => {
         if (length <= 2 && length >= 1) {
           return "span 2";
         } else if (length <= 4) {
           return "span 3";
         } else {
           return "span 6";
         }
       };
       return (
         <div>
           <div
             style={{
               display: "grid",
               gridTemplateColumns: "repeat(6, 1fr)",
               gridAutoFlow: "row dense",
               gap: 2,
             }}
           >
             {data.map((v) => {
               let str = String(v);
               let strLen = v.toString().length;
               let obj = getWidthClass(strLen);
               let arr = [];
               if (strLen > 8) {
                 for (let i = 0; i < strLen; i += 8) {
                   console.log("i", i);
                   const group = str.slice(i, i + 8);
                   arr.push(group);
                 }
               }
               return (
                 <div style={{ backgroundColor: "red", gridColumnStart: obj }}>
                   {strLen <= 8 ? v : arr.map((item) => <div>{item}</div>)}
                 </div>
               );
             })}
           </div>
         </div>
       );
     }