微软实习了一个半月了,参与秋招并不是觉得自己不能转正,更多的是希望能把自己带入到应届生的身份中去,掂量掂量自己几斤几两。

也是一个好机会,通过面试去查漏补缺,看看自己的提升方向,在这儿整理一下自己回答的不好或者觉得有价值的问题。

字节提前批一面

虽说是提起批,但仍然问了相当多的八股文,很多问题我在开发中并没有关注,值得考究。

React 中 key 的作用是什么?具体渲染的时候是如何提升性能的?

key 是 React 中用来对组件进行标记的唯一标识(这里的唯一是指局部唯一)。简单来说 key 帮助 React 识别哪些元素被改变了,例如添加或删除。

React 官方的例子很好地解释了 key 能提升性能的原因。

在更改列表的时候,例如我希望往列表尾部插入一个新的元素:

1
2
3
4
5
6
7
8
9
10
<ul>
<li>first</li>
<li>second</li>
</ul>

<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>

那么此时 React 自然知道只需要往后增加一个元素即可,不需要动前两个元素,这棵树实际上只多了一个 node。

但是,如果需要往列表头增加一个元素:

1
2
3
4
5
6
7
8
9
10
<ul>
<li>Duke</li>
<li>Villanova</li>
</ul>

<ul>
<li>Connecticut</li>
<li>Duke</li>
<li>Villanova</li>
</ul>

这棵树上原来两个 nodes 的位置也变了,所以 React 进行的操作不只是添加,而是变更了 1 + 2 个结点。

但是如果当使用了 key 之后,React 可以使用 key 去匹配树上的每个结点:

1
2
3
4
5
6
7
8
9
10
<ul>
<li key="2015">Duke</li>
<li key="2016">Villanova</li>
</ul>

<ul>
<li key="2014">Connecticut</li>
<li key="2015">Duke</li>
<li key="2016">Villanova</li>
</ul>

这样子,React 就知道,只有 key = "2014" 的元素需要被更改。

useMemo 和 useCallback 分别是用来做什么的?具体怎么使用?

useMemo 接收两个参数,第一个参数是个函数,返回值是需要保存的值,第二个参数是一个数组,作为依赖项,变化的时候会执行第一个函数,产生新的值。

应用场景:

  1. 缓存,减少运算量。

    1
    2
    3
    4
    useMemo(() => {
    // 大量运算
    return number;
    }, [props.n]) // 只有 props.n 变化,才会重新计算 number
  2. 减少 dom 循环

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 保证只有在 selectList 的变化的时候,才会重新执行这个循环
    {useMemo(() => (
    <div>{
    selectList.map((i, v) => (
    <span
    className={style.listSpan}
    key={v} >
    {i.patentName}
    </span>
    ))}
    </div>
    ), [selectList])}
  3. 减少子组件渲染

    1
    2
    /* 只有当 props.list 列表改变的时候,子组件才渲染 */
    const goodListChild = useMemo(()=> <GoodList list={ props.list } /> ,[ props.list ])

useCallback 接受的参数和 useMemo 类似,区别在于返回的是函数本身,而不是函数的运行结果。

1
2
3
4
5
6
7
8
9
10
11
12
13
const DemoUseCallback=({ id })=>{
const [number, setNumber] = useState(1)
/* 此时usecallback的第一参数 (sonName)=>{ console.log(sonName) }
经过处理赋值给 getInfo */
const getInfo = useCallback((sonName)=>{
console.log(sonName)
},[id])
return <div>
{/* 点击按钮触发父组件更新 ,但是子组件没有更新 */}
<button onClick={ ()=>setNumber(number+1) } >增加</button>
<DemoChildren getInfo={getInfo} />
</div>
}

类组件和函数组件有什么区别?

React 的新旧版生命周期

HTTPS 是怎么做到加密的

常见的 HTTPS Headers

参考资料

「React进阶」 React全部api解读+基础实践大全(夯实基础2万字总结) (juejin.cn)