🔥 最近前端百度二面面经

🤖 自我介绍

🤖 聊项目 30min

🤖 场景题 30min

🚀 打乱数组

🚀 实现一个评分组件

🔥 我的实现

function rate() {
  const [stars, setStars] = useState([
    { isSelected: false },
    { isSelected: false },
    { isSelected: false },
    { isSelected: false },
    { isSelected: false },
  ]);

  function handleClick(star, idx) {
    if (!star.isSelected) {
      for (let i = 0; i <= idx; i++) {
        stars[i].isSelected = true;
      }
    } else {
      for (let i = idx; i <= 5; i++) {
        stars[i].isSelected = false;
      }
    }

    setStars(stars);
  }

  return (
    <>
      {stars.map((star, idx) => {
        return (
          <div
            key={idx}
            className={`${star.isSelected ? 'is-selected' : ''}`}
            onClick={(star, idx) => handleClick(star, idx)}
          ></div>
        );
      })}
    </>
  );
}

🔥 加问：如果评分组件的数据是由父组件传入的，那么在评分组件里面的操作，怎么能修改到父组件的值？

• 受控组件：
  • 当你传给组件一个受控属性，组件只受到这个属性的控制
  • 对组件进行操作不会修改组件的值，操作结果通过 onChange 传递给父组件

function useControlledValue(props, { controlledKey, onChange }) {
  const isControlled = props.hasOwnProperty(controlledKey);
  const [internalValue, setInternalValue] = useState(props.defaultValue);

  const value = isControlled ? props[controlledKey] : internalValue;

  const handleChange = (newValue) => {
    if (!isControlled) {
      setInternalValue(newValue);
    }
    if (onChange) {
      onChange(newValue);
    }
  };

  return [value, handleChange];
}

function Rate(props) {

  const [value, setValue] = useControlledValue(props, {
    controlledKey: 'value',
    onChange: props.onChange,
  });

  function handleClick(star, idx) {
    if (!star.isSelected) {
      for (let i = 0; i <= idx; i++) {
        stars[i].isSelected = true;
      }
    } else {
      for (let i = idx; i <= 5; i++) {
        stars[i].isSelected = false;
      }
    }

    setValue(stars);
  }

  return (
    <>
      {value.map((star, idx) => {
        return (
          <div
            key={idx}
            className={`${star.isSelected ? 'is-selected' : ''}`}
            onClick={(star, idx) => handleClick(star, idx)}
          ></div>
        );
      })}
    </>
  );
}

Rate.defaultProps = {
  defaultValue: [
    { isSelected: false },
    { isSelected: false },
    { isSelected: false },
    { isSelected: false },
    { isSelected: false },
  ],
};

🚀 实现 Scheduler 类，控制并发数

🔥 自己实现

🔥 加功能

• 怎么取消所有任务？

• 注册一个函数，所有任务结束后会触发这个函数？

🤖 八股 5min

输入url页面发生什么 ？不懂乱答

http2.0/3.0 ？不懂乱答

🤖 反问

做什么项目的

前端人员结构