3.15 字节抖音一面

3.8投的内推，3.9约面试，问题都比较基础，但我还是太菜了/(ㄒoㄒ)/~~

问题：

• 自我介绍 -> react侧重
• 用过哪些常用的hooks
• useEffect的使用场景
• class里面的componentDidMount迁移到useEffect要怎么使用（useEffect如何使用）
• useEffect会重复执行怎么办
• class中的setState和function里面setState有什么区别
• class中的setState的第二个参数有什么用
• 在function里面如何获取setState最新的值
• 如何用useState包装实现class中的setState的第二个参数
• JS的基本数据类型和引用数据类型有哪些
• 判断数据类型的方式
• instanceof的实现原理
• 
  
• ——> 手写instanceof
• 
  
• 说一下你对Promise的理解
• 说一下Promise如何进行状态的转变 和 Promise的链式调用
• 
  
• ——>手写实现 Promise.all 方法
• ——>手写树状结构的展平

const entry = [{
  id: '1',
  isOpen: true
}, {
  id: '2',
  children: [{
    id: '21',
    children: [{
      id: '211',
      isOpen: true
    }, {
      id: '212',
      isOpen: false
    }]
  }]
}, {
  id: '3',
  isOpen: false
}]
function flatObj(arr){}
// 平铺，如果有isOpen属性则直接输出，如果没有则查看children里面有没有
// 只要children里面有一个true，那么外层就是true
// 输出 {'1':true, '2':true, '21':true, '211':true, '212':false, '3':false}

答案（挑不会的，重点的）：

1.使用useState时，如何获得state最新的值

（1）使用useEffect代替原本class中setState的第二个参数（回调函数）来获取最新的值 （2）在setState传入一个函数，在函数内部修改前就拿到修改后的值

2.在setState中，批量更新所带来的问题

function App() {
  const [counter, setCounter] = useState(0);
  const handleClick = () => {
    setCounter(counter + 1)
    setCounter(counter + 1)
    setCounter(counter + 1)
  }
  useEffect(() => {
    console.log(counter);
  }, [counter])
  return <div style={{ padding: 30 }}>
    <button onClick={handleClick}>click</button>
    <div>{counter}</div>
  </div>
}

点一次只加1，而不是加三，这是因为我们三次运行时，拿到的都是counter=0，没有拿到上一次运行结束的最新值，因此，只加了1
解决方法：
使用函数式setState（无论是class中还是在hooks中都一样）

function App() {
  const [counter, setCounter] = useState(0);
  const handleClick = () => {
    setCounter(counter => counter + 1)
    setCounter(counter => counter + 1)
    setCounter(counter => counter + 1)
  }
  useEffect(() => {
    console.log(counter);
  }, [counter])
  return <div style={{ padding: 30 }}>
    <button onClick={handleClick}>click</button>
    <div>{counter}</div>
  </div>
}

完美解决

总结：

还是要加强基础，多看原理，今天起把原理都手写十遍！！！