小米面挂了

上周五，晚上六点，参加了小米一面，整体时长1.5个小时，算是比较长的吧

面试官看起来比较年轻，刚开始自己的心态也挺轻松，随着面试的进展，心情变的越加的不对劲，怎么问的每一道题都只知道一点，这是知道了自己的打法，专门来拆台来了 （让我自己认识到自己真不专业，基础太差）

问题的答案，我都用一个链接的形式来呈现，相对简单的会做出解释

px em rem vw vh 分别解释一下这几个单位

www.jianshu.com/p/82f02af17...

padding-top, 10%, 10rem，10vh， 10em 取值逻辑是什么

这个里面有个坑 就是10% ,取的是父容器的宽度的10%

em 也有个坑，不一定取的是父级，position会影响这个取值

npm cpm pnpm yarn 介绍一下，各自的优点

esm 和 commonJs

物理像素 逻辑像素 分辨率 像素比

juejin.cn/post/719072...

介绍一下flex， 并计算一下 下面的宽度

大致从 flex-direction flex-wrap 说起，说到align-self 重点的就是 flex-grow, flex-shrink 这两个的换算

juejin.cn/post/714287...

flex-grow: 1
container: 100px;
A:30px;
B: 40px;

// 计算A和B渲染的真实宽度

flex-shrink: 1;
container: 500px;
A: 200px;
B: 400px;

// 计算A和B渲染的真实宽度

平时都用过什么属性写过动画

@keyframes animation transform

transform: translateX(100px) rotate(50deg);
trabsform: rotate(50deg) translateX(100px);

这两个动画有什么区别，效果是否一样

让我想起来另外一道面试题，如何用js写动画，不能出现css的属性，（深势科技一面）

类组件 和 函数式组件，函数式组件有什么优点

问这个问题，面试官主要想了解：

• 对组件的两种编写模式是否了解
• 是否具备在合适的场景下选用合适的技术栈的能力。

共同点

他们的实际用途都是一样的，无论是高阶组件还是异步加载，都可以用它们作用基础组件展示 UI。也就是作用组件本身的所有基础功能都是一致的。（类组件可以改为函数组件，函数也可以改为类组件）

不同点

• 类组件是基于 OOP（面向对象编程），所以它有继承、有属性、有内部状态的管理。
• 函数组件的根基是 FP，也就是函数式编程。它属于"结构化编程"的一种，与数学函数思想类似。也就是假定输入与输出存在某种特定的映射关系，那么输入一定的情况下，输出必然是确定的。 想较于类组件，函数组件更纯粹、简单、易测试、这是他们本质上的最大不同。

类组件和函数组件有个最经典的问题，就是 this 的问题，类组件中 this 存在一定的模糊性，容易引起错误。函数组件在同一个闭包中，不会有这样的问题。

独有能力

类组件可以通过生命周期包装业务逻辑，这是类组件所"特有的"

sunchang612.github.io/blog/react/...

react 类组件 onClick 和 addEventListener 的区别

setState 是同步的还是异步的，什么时候同步 和 异步

github.com/Advanced-Fr...

hook组件 虚拟dom， diff, fiber，

fiber中schedular 调度的优先级 都有哪些任务，任务的优先级是什么

fiber render阶段 commit 阶段, 哪一个阶段是可以被打断的， commit的阶段能被打断吗

js的eventLoop

jsBridege , web端 如何 调用 App的异步任务

算法

实现一个promiseAll

function myPrimiseAll(proms) {
  let i = 0;
  let length = proms.length;
  let result = [];
  let res = [];
  let rej = [];
  let fullfulledIndex = 0;

  let p = new Promise((resolve, reject) => {
    res = resolve;
    rej = reject;
  });
  for (let prom of proms) {
    const index = i;
    i++;
    Promise.resolve(prom)
      .then(
        (data) => {
          result[index] = data;
          fullfulledIndex++;
          if (fullfulledIndex === length) {
            res(result);
          }
        },
        (rej) => {
          rej(rej);
        }
      )
      .catch((e) => {
        rej(e);
      });
  }

  if (length === 0) {
    res([]);
  }

  return p;
}

找出最后一块石头

  var lastStoneWeight = function (stones) {
      if (stones.length === 1) return stones;
      if (!stones.length) return [];
      let result = [];
      let arr = stones;
      while (arr.length > 1) {
        const newArr = arr.sort((a, b) => a - b);
        const temp = newArr[newArr.length - 1] - newArr[newArr.length - 2];
        newArr.splice(newArr.length - 2, 2, temp);
        arr = newArr;
      }
      return arr;
};

实现lodash 的 set功能

function set(obj, path, value) {
  if (!obj || typeof obj !== 'object') {
    return obj;
  }

  const keys = path.split('.');
  const lastKey = keys.pop();

  let currentObj = obj;
  for (const key of keys) {
    if (!currentObj[key] || typeof currentObj[key] !== 'object') {
      currentObj[key] = {};
    }
    currentObj = currentObj[key];
  }

  currentObj[lastKey] = value;

  return obj;
}